#2775A0#2775A0
#2775A0 is a mid, moderate cyan. Relative luminance 0.157; OKLCH L 53.5% C 0.100 H 237.4°. Best body text is #FFFFFF at 5.07:1 contrast (WCAG AA passes).
Color values
| HEX | #2775A0 |
|---|---|
| RGB | rgb(39, 117, 160) |
| HSL | hsl(201, 61%, 39%) |
| HSV | hsv(201, 76%, 63%) |
| CMYK | cmyk(75.6%, 26.9%, 0%, 37.3%) |
| CIE-LAB | lab(46.57, -8.54, -29.87) |
| CIE-LCH | lch(46.57, 31.06, 254.04°) |
| OKLab | oklab(53.53% -0.0539 -0.0843) |
| OKLCH | oklch(53.53% 0.1 237.4) |
| XYZ | xyz(13.5406, 15.6904, 35.5658) |
| Luminance | 0.1569 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Ocean Blue (survey)
#03719C
ΔE00 2.40
Nice Blue
#107AB0
ΔE00 2.76
Cerulean
#007BA7
ΔE00 3.02
Muted Blue
#3B719F
ΔE00 3.89
Dull Blue
#49759C
ΔE00 4.58
Sea Blue
#047495
ΔE00 4.83
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#2775A0 #A05227
analogous
#27A08F #2775A0 #2739A0
triadic
#2775A0 #A02775 #75A027
tetradic
#2775A0 #8F27A0 #A05227 #39A027
square
#2775A0 #8F27A0 #A05227 #39A027
split-complementary
#2775A0 #A02739 #A08F27
monochromatic
#0F2D3E #1B516F #2775A0 #3698CE #67B1DA
Accessibility & contrast
On white
5.07
#2775A0 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.14
#2775A0 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #2775A0
5.07:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##2775A0 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##2775A0 | 1.00 | 5.07 | 4.14 | 5.07 |
| #FFFFFF | 5.07 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.14 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.07 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#6175A2
Deuteranopia (green-blind)
#50699F
Tritanopia (blue-blind)
#008084
Achromatopsia (no color)
#6E6E6E
Design tokens & code
CSS
--color: #2775a0; /* rgb */ color: rgb(39, 117, 160); /* oklch */ color: oklch(53.5% 0.100 237.4);
Tailwind
colors: {
custom: {
50: '#739cbc',
500: '#2775a0',
950: '#000000',
},
}SCSS
$custom: #2775a0; $custom-light: #739cbc; $custom-dark: #000000;
JSON
{
"hex": "#2775a0",
"rgb": {
"r": 39,
"g": 117,
"b": 160
},
"hsl": {
"h": 201.322,
"s": 60.804,
"l": 39.02
},
"oklch": {
"l": 0.53534,
"c": 0.10005,
"h": 237.4
},
"luminance": 0.15692
}Semantic roles & 50–950 ramp
primary
#2775A0
secondary
#C08463
accent
#7D44E4
background
#F7F9FB
surface
#EDF2F6
border
#C8CCD0
text
#090E12
muted
#7B7E81