#4A5366#4A5366
#4A5366 is a dark, muted blue. Relative luminance 0.086; OKLCH L 44.2% C 0.033 H 265.1°. Best body text is #FFFFFF at 7.72:1 contrast (WCAG AA passes).
Color values
| HEX | #4A5366 |
|---|---|
| RGB | rgb(74, 83, 102) |
| HSL | hsl(221, 16%, 35%) |
| HSV | hsv(221, 27%, 40%) |
| CMYK | cmyk(27.5%, 18.6%, 0%, 60%) |
| CIE-LAB | lab(35.21, 1.25, -12.15) |
| CIE-LCH | lch(35.21, 12.22, 275.87°) |
| OKLab | oklab(44.18% -0.0028 -0.0333) |
| OKLCH | oklch(44.18% 0.033 265.1) |
| XYZ | xyz(8.3149, 8.6014, 13.7899) |
| Luminance | 0.0860 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Charcoal
#36454F
ΔE00 8.38
Dusk
#4E5481
ΔE00 8.61
Dark Grey Blue
#29465B
ΔE00 8.71
Slate
#516572
ΔE00 8.86
Slate Grey
#59656D
ΔE00 8.95
Dark Slate Blue
#214761
ΔE00 9.64
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#4A5366 #665D4A
analogous
#4A6166 #4A5366 #4F4A66
triadic
#4A5366 #664A53 #53664A
tetradic
#4A5366 #664A61 #665D4A #4A664F
square
#4A5366 #664A61 #665D4A #4A664F
split-complementary
#4A5366 #664F4A #61664A
monochromatic
#17191F #303643 #4A5366 #647089 #848FA6
Accessibility & contrast
On white
7.72
#4A5366 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.72
#4A5366 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #4A5366
7.72:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##4A5366 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##4A5366 | 1.00 | 7.72 | 2.72 | 7.72 |
| #FFFFFF | 7.72 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.72 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.72 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#4D5467
Deuteranopia (green-blind)
#4A5266
Tritanopia (blue-blind)
#435759
Achromatopsia (no color)
#535353
Design tokens & code
CSS
--color: #4a5366; /* rgb */ color: rgb(74, 83, 102); /* oklch */ color: oklch(44.2% 0.033 265.1);
Tailwind
colors: {
custom: {
50: '#7d8391',
500: '#4a5366',
950: '#000000',
},
}SCSS
$custom: #4a5366; $custom-light: #7d8391; $custom-dark: #000000;
JSON
{
"hex": "#4a5366",
"rgb": {
"r": 74,
"g": 83,
"b": 102
},
"hsl": {
"h": 220.714,
"s": 15.909,
"l": 34.51
},
"oklch": {
"l": 0.4418,
"c": 0.03341,
"h": 265.1
},
"luminance": 0.08602
}Semantic roles & 50–950 ramp
primary
#4A5366
secondary
#938B78
accent
#A16FB9
background
#F7F8F8
surface
#EEEFF0
border
#C9CACB
text
#090A0C
muted
#7B7C7D