#3D433A#3D433A
#3D433A is a dark, near-neutral grey. Relative luminance 0.053; OKLCH L 37.4% C 0.017 H 135.0°. Best body text is #FFFFFF at 10.18:1 contrast (WCAG AA passes).
Color values
| HEX | #3D433A |
|---|---|
| RGB | rgb(61, 67, 58) |
| HSL | hsl(100, 7%, 25%) |
| HSV | hsv(100, 13%, 26%) |
| CMYK | cmyk(9%, 0%, 13.4%, 73.7%) |
| CIE-LAB | lab(27.61, -4.49, 4.63) |
| CIE-LCH | lch(27.61, 6.45, 134.16°) |
| OKLab | oklab(37.43% -0.012 0.012) |
| OKLCH | oklch(37.43% 0.017 135) |
| XYZ | xyz(4.6952, 5.3119, 4.7801) |
| Luminance | 0.0531 (WCAG relative) |
| Temperature | neutral |
| Family | grey |
Closest named colors
Charcoal (survey)
#343837
ΔE00 5.93
Charcoal Grey
#3C4142
ΔE00 6.17
Onyx
#353839
ΔE00 7.31
Dark Grey
#363737
ΔE00 7.34
Gunmetal
#2A3439
ΔE00 9.82
Darkslategray
#2F4F4F
ΔE00 10.32
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#3D433A #403A43
analogous
#42433A #3D433A #3A433C
triadic
#3D433A #3A3D43 #433A3D
tetradic
#3D433A #3A4243 #403A43 #433C3A
square
#3D433A #3A4243 #403A43 #433C3A
split-complementary
#3D433A #3C3A43 #433A42
monochromatic
#0F100E #1F221E #3D433A #5B6456 #798573
Accessibility & contrast
On white
10.18
#3D433A on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.06
#3D433A on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #3D433A
10.18:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##3D433A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##3D433A | 1.00 | 10.18 | 2.06 | 10.18 |
| #FFFFFF | 10.18 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.06 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 10.18 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#44423A
Deuteranopia (green-blind)
#43413A
Tritanopia (blue-blind)
#3D4240
Achromatopsia (no color)
#414141
Design tokens & code
CSS
--color: #3d433a; /* rgb */ color: rgb(61, 67, 58); /* oklch */ color: oklch(37.4% 0.017 135.0);
Tailwind
colors: {
custom: {
50: '#727770',
500: '#3d433a',
950: '#000000',
},
}SCSS
$custom: #3d433a; $custom-light: #727770; $custom-dark: #000000;
JSON
{
"hex": "#3d433a",
"rgb": {
"r": 61,
"g": 67,
"b": 58
},
"hsl": {
"h": 100,
"s": 7.2,
"l": 24.51
},
"oklch": {
"l": 0.37427,
"c": 0.01701,
"h": 135
},
"luminance": 0.05312
}Semantic roles & 50–950 ramp
primary
#3D433A
secondary
#6E6772
accent
#78B09D
background
#F6F7F6
surface
#ECEDEC
border
#C7C8C7
text
#080807
muted
#7B7B7A