#424657#424657
#424657 is a dark, muted blue. Relative luminance 0.062; OKLCH L 39.7% C 0.029 H 274.6°. Best body text is #FFFFFF at 9.35:1 contrast (WCAG AA passes).
Color values
| HEX | #424657 |
|---|---|
| RGB | rgb(66, 70, 87) |
| HSL | hsl(229, 14%, 30%) |
| HSV | hsv(229, 24%, 34%) |
| CMYK | cmyk(24.1%, 19.5%, 0%, 65.9%) |
| CIE-LAB | lab(29.98, 2.63, -10.64) |
| CIE-LCH | lch(29.98, 10.96, 283.88°) |
| OKLab | oklab(39.73% 0.0024 -0.0291) |
| OKLCH | oklch(39.73% 0.029 274.6) |
| XYZ | xyz(6.1568, 6.2266, 9.8924) |
| Luminance | 0.0623 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Charcoal
#36454F
ΔE00 7.96
Dark Grey Blue
#29465B
ΔE00 9.31
Charcoal Grey
#3C4142
ΔE00 9.53
Onyx
#353839
ΔE00 10.15
Dark Blue Grey
#1F3B4D
ΔE00 10.47
Dark Grey
#363737
ΔE00 10.52
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#424657 #575342
analogous
#425157 #424657 #484257
triadic
#424657 #574246 #465742
tetradic
#424657 #574251 #575342 #425748
square
#424657 #574251 #575342 #425748
split-complementary
#424657 #574842 #515742
monochromatic
#0D0E11 #282A34 #424657 #5C627A #7A809A
Accessibility & contrast
On white
9.35
#424657 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.25
#424657 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #424657
9.35:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##424657 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##424657 | 1.00 | 9.35 | 2.25 | 9.35 |
| #FFFFFF | 9.35 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.25 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.35 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#414758
Deuteranopia (green-blind)
#404657
Tritanopia (blue-blind)
#3D494C
Achromatopsia (no color)
#474747
Design tokens & code
CSS
--color: #424657; /* rgb */ color: rgb(66, 70, 87); /* oklch */ color: oklch(39.7% 0.029 274.6);
Tailwind
colors: {
custom: {
50: '#767986',
500: '#424657',
950: '#000000',
},
}SCSS
$custom: #424657; $custom-light: #767986; $custom-dark: #000000;
JSON
{
"hex": "#424657",
"rgb": {
"r": 66,
"g": 70,
"b": 87
},
"hsl": {
"h": 228.571,
"s": 13.725,
"l": 30
},
"oklch": {
"l": 0.39729,
"c": 0.02917,
"h": 274.6
},
"luminance": 0.06227
}Semantic roles & 50–950 ramp
primary
#424657
secondary
#86826F
accent
#A971B7
background
#F7F7F8
surface
#EDEDEF
border
#C8C8CA
text
#08090B
muted
#7B7B7C