#21312E#21312E
#21312E is a dark, muted teal. Relative luminance 0.027; OKLCH L 29.8% C 0.022 H 181.9°. Best body text is #FFFFFF at 13.61:1 contrast (WCAG AA passes).
Color values
| HEX | #21312E |
|---|---|
| RGB | rgb(33, 49, 46) |
| HSL | hsl(169, 20%, 16%) |
| HSV | hsv(169, 33%, 19%) |
| CMYK | cmyk(32.7%, 0%, 6.1%, 80.8%) |
| CIE-LAB | lab(18.87, -7.42, -0.23) |
| CIE-LCH | lch(18.87, 7.43, 181.74°) |
| OKLab | oklab(29.79% -0.0219 -0.0007) |
| OKLCH | oklch(29.79% 0.022 181.9) |
| XYZ | xyz(2.2185, 2.7171, 2.9918) |
| Luminance | 0.0272 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Gunmetal
#2A3439
ΔE00 6.82
Charcoal (survey)
#343837
ΔE00 6.91
Onyx
#353839
ΔE00 8.14
Dark Grey
#363737
ΔE00 8.77
Charcoal Grey
#3C4142
ΔE00 8.78
Darkslategray
#2F4F4F
ΔE00 10.18
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#21312E #312124
analogous
#213126 #21312E #212C31
triadic
#21312E #2E2131 #312E21
tetradic
#21312E #262131 #312124 #2C3121
square
#21312E #262131 #312124 #2C3121
split-complementary
#21312E #31212C #312621
monochromatic
#0C1211 #0C1211 #21312E #3A5650 #527A73
Accessibility & contrast
On white
13.61
#21312E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.54
#21312E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #21312E
13.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##21312E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##21312E | 1.00 | 13.61 | 1.54 | 13.61 |
| #FFFFFF | 13.61 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.54 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.61 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#302F2E
Deuteranopia (green-blind)
#2D2D2E
Tritanopia (blue-blind)
#1C3230
Achromatopsia (no color)
#2E2E2E
Design tokens & code
CSS
--color: #21312e; /* rgb */ color: rgb(33, 49, 46); /* oklch */ color: oklch(29.8% 0.022 181.9);
Tailwind
colors: {
custom: {
50: '#5c6966',
500: '#21312e',
950: '#000000',
},
}SCSS
$custom: #21312e; $custom-light: #5c6966; $custom-dark: #000000;
JSON
{
"hex": "#21312e",
"rgb": {
"r": 33,
"g": 49,
"b": 46
},
"hsl": {
"h": 168.75,
"s": 19.512,
"l": 16.078
},
"oklch": {
"l": 0.29788,
"c": 0.02192,
"h": 181.9
},
"luminance": 0.02717
}Semantic roles & 50–950 ramp
primary
#21312E
secondary
#634B4F
accent
#6C7BBC
background
#F5F6F6
surface
#E9EBEB
border
#C5C6C6
text
#040606
muted
#797A7A