#022020#022020
#022020 is a very dark, muted teal. Relative luminance 0.011; OKLCH L 22.2% C 0.036 H 194.9°. Best body text is #FFFFFF at 17.07:1 contrast (WCAG AA passes).
Color values
| HEX | #022020 |
|---|---|
| RGB | rgb(2, 32, 32) |
| HSL | hsl(180, 88%, 7%) |
| HSV | hsv(180, 94%, 13%) |
| CMYK | cmyk(93.8%, 0%, 0%, 87.5%) |
| CIE-LAB | lab(10.18, -11.04, -3.28) |
| CIE-LCH | lch(10.18, 11.52, 196.57°) |
| OKLab | oklab(22.16% -0.0344 -0.0091) |
| OKLCH | oklch(22.16% 0.036 194.9) |
| XYZ | xyz(0.8021, 1.1501, 1.5459) |
| Luminance | 0.0115 (WCAG relative) |
| Temperature | cool |
| Family | teal |
Closest named colors
Almost Black
#070D0D
ΔE00 10.82
Gunmetal
#2A3439
ΔE00 11.25
Charcoal (survey)
#343837
ΔE00 13.01
Dark
#1B2431
ΔE00 13.45
Black
#000000
ΔE00 13.65
Onyx
#353839
ΔE00 13.82
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#022020 #200202
analogous
#022011 #022020 #021120
triadic
#022020 #200220 #202002
tetradic
#022020 #110220 #200202 #112002
square
#022020 #110220 #200202 #112002
split-complementary
#022020 #200211 #201102
monochromatic
#021D1D #021D1D #022020 #065A5A #099393
Accessibility & contrast
On white
17.07
#022020 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.23
#022020 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #022020
17.07:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##022020 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##022020 | 1.00 | 17.07 | 1.23 | 17.07 |
| #FFFFFF | 17.07 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.23 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 17.07 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#1D1E20
Deuteranopia (green-blind)
#181A20
Tritanopia (blue-blind)
#002120
Achromatopsia (no color)
#1C1C1C
Design tokens & code
CSS
--color: #022020; /* rgb */ color: rgb(2, 32, 32); /* oklch */ color: oklch(22.2% 0.036 194.9);
Tailwind
colors: {
custom: {
50: '#475b5b',
500: '#022020',
950: '#000000',
},
}SCSS
$custom: #022020; $custom-light: #475b5b; $custom-dark: #000000;
JSON
{
"hex": "#022020",
"rgb": {
"r": 2,
"g": 32,
"b": 32
},
"hsl": {
"h": 180,
"s": 88.235,
"l": 6.667
},
"oklch": {
"l": 0.22158,
"c": 0.03556,
"h": 194.9
},
"luminance": 0.0115
}Semantic roles & 50–950 ramp
primary
#022020
secondary
#661818
accent
#2929FE
background
#F4F5F5
surface
#E6E9E9
border
#C2C5C5
text
#000404
muted
#777979