#54646C#54646C
#54646C is a mid, muted cyan. Relative luminance 0.121; OKLCH L 49.3% C 0.023 H 229.5°. Best body text is #FFFFFF at 6.15:1 contrast (WCAG AA passes).
Color values
| HEX | #54646C |
|---|---|
| RGB | rgb(84, 100, 108) |
| HSL | hsl(200, 13%, 38%) |
| HSV | hsv(200, 22%, 42%) |
| CMYK | cmyk(22.2%, 7.4%, 0%, 57.6%) |
| CIE-LAB | lab(41.35, -4.11, -6.54) |
| CIE-LCH | lch(41.35, 7.72, 237.83°) |
| OKLab | oklab(49.27% -0.0152 -0.0177) |
| OKLCH | oklch(49.27% 0.023 229.5) |
| XYZ | xyz(10.9194, 12.0815, 15.9411) |
| Luminance | 0.1208 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Gunmetal (survey)
#536267
ΔE00 1.73
Slate Grey
#59656D
ΔE00 1.80
Slate
#516572
ΔE00 2.36
Dimgray
#696969
ΔE00 7.99
Flint
#6F7A80
ΔE00 9.05
Metallic Blue
#4F738E
ΔE00 9.21
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#54646C #6C5C54
analogous
#546C68 #54646C #54586C
triadic
#54646C #6C5464 #646C54
tetradic
#54646C #68546C #6C5C54 #586C54
square
#54646C #68546C #6C5C54 #586C54
split-complementary
#54646C #6C5458 #6C6854
monochromatic
#1E2427 #39444A #54646C #6F848E #91A1A9
Accessibility & contrast
On white
6.15
#54646C on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.42
#54646C on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #54646C
6.15:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##54646C | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##54646C | 1.00 | 6.15 | 3.42 | 6.15 |
| #FFFFFF | 6.15 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.42 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.15 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#60636C
Deuteranopia (green-blind)
#5C606C
Tritanopia (blue-blind)
#4D6666
Achromatopsia (no color)
#616161
Design tokens & code
CSS
--color: #54646c; /* rgb */ color: rgb(84, 100, 108); /* oklch */ color: oklch(49.3% 0.023 229.5);
Tailwind
colors: {
custom: {
50: '#849096',
500: '#54646c',
950: '#000000',
},
}SCSS
$custom: #54646c; $custom-light: #849096; $custom-dark: #000000;
JSON
{
"hex": "#54646c",
"rgb": {
"r": 84,
"g": 100,
"b": 108
},
"hsl": {
"h": 200,
"s": 12.5,
"l": 37.647
},
"oklch": {
"l": 0.49274,
"c": 0.02334,
"h": 229.5
},
"luminance": 0.12082
}Semantic roles & 50–950 ramp
primary
#54646C
secondary
#988B84
accent
#8972B5
background
#F8F8F9
surface
#EFF0F1
border
#CACBCB
text
#0B0C0D
muted
#7C7D7E