#24689E#24689E
#24689E is a mid, moderate cyan. Relative luminance 0.127; OKLCH L 50.2% C 0.109 H 246.6°. Best body text is #FFFFFF at 5.92:1 contrast (WCAG AA passes).
Color values
| HEX | #24689E |
|---|---|
| RGB | rgb(36, 104, 158) |
| HSL | hsl(207, 63%, 38%) |
| HSV | hsv(207, 77%, 62%) |
| CMYK | cmyk(77.2%, 34.2%, 0%, 38%) |
| CIE-LAB | lab(42.37, -1.85, -35.28) |
| CIE-LCH | lch(42.37, 35.33, 267.00°) |
| OKLab | oklab(50.16% -0.0434 -0.1002) |
| OKLCH | oklch(50.16% 0.109 246.6) |
| XYZ | xyz(11.8471, 12.7429, 34.1764) |
| Luminance | 0.1274 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Mid Blue
#276AB3
ΔE00 3.19
Ugly Blue
#31668A
ΔE00 3.51
Muted Blue
#3B719F
ΔE00 3.63
Peacock Blue
#016795
ΔE00 3.75
Denim (survey)
#3B638C
ΔE00 3.88
Flat Blue
#3C73A8
ΔE00 4.51
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#24689E #9E5A24
analogous
#249E97 #24689E #242B9E
triadic
#24689E #9E2468 #689E24
tetradic
#24689E #97249E #9E5A24 #2B9E24
square
#24689E #97249E #9E5A24 #2B9E24
split-complementary
#24689E #9E242B #9E9724
monochromatic
#0D263A #19476C #24689E #2F89D0 #61A5DB
Accessibility & contrast
On white
5.92
#24689E on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.55
#24689E on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #24689E
5.92:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##24689E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##24689E | 1.00 | 5.92 | 3.55 | 5.92 |
| #FFFFFF | 5.92 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.55 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.92 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#4F6AA0
Deuteranopia (green-blind)
#3E5F9D
Tritanopia (blue-blind)
#00757B
Achromatopsia (no color)
#646464
Design tokens & code
CSS
--color: #24689e; /* rgb */ color: rgb(36, 104, 158); /* oklch */ color: oklch(50.2% 0.109 246.6);
Tailwind
colors: {
custom: {
50: '#7192bb',
500: '#24689e',
950: '#000000',
},
}SCSS
$custom: #24689e; $custom-light: #7192bb; $custom-dark: #000000;
JSON
{
"hex": "#24689e",
"rgb": {
"r": 36,
"g": 104,
"b": 158
},
"hsl": {
"h": 206.557,
"s": 62.887,
"l": 38.039
},
"oklch": {
"l": 0.50162,
"c": 0.10922,
"h": 246.6
},
"luminance": 0.12744
}Semantic roles & 50–950 ramp
primary
#24689E
secondary
#C0895E
accent
#8A42E6
background
#F7F8FB
surface
#EDF0F6
border
#C8CBD0
text
#090D12
muted
#7B7D81