#63271C#63271C
#63271C is a dark, moderate red. Relative luminance 0.042; OKLCH L 35.7% C 0.090 H 32.2°. Best body text is #FFFFFF at 11.43:1 contrast (WCAG AA passes).
Color values
| HEX | #63271C |
|---|---|
| RGB | rgb(99, 39, 28) |
| HSL | hsl(9, 56%, 25%) |
| HSV | hsv(9, 72%, 39%) |
| CMYK | cmyk(0%, 60.6%, 71.7%, 61.2%) |
| CIE-LAB | lab(24.28, 26.34, 20.61) |
| CIE-LCH | lch(24.28, 33.44, 38.03°) |
| OKLab | oklab(35.73% 0.076 0.0479) |
| OKLCH | oklch(35.73% 0.09 32.2) |
| XYZ | xyz(6.0813, 4.1883, 1.5866) |
| Luminance | 0.0419 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Reddy Brown
#6E1005
ΔE00 6.08
Rosewood
#65000B
ΔE00 7.01
Blood
#770001
ΔE00 7.91
Chestnut
#742802
ΔE00 8.51
Claret
#680018
ΔE00 8.57
Dried Blood
#4B0101
ΔE00 8.68
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#63271C #1C5863
analogous
#631C34 #63271C #634B1C
triadic
#63271C #1C6327 #271C63
tetradic
#63271C #34631C #1C5863 #4B1C63
square
#63271C #34631C #1C5863 #4B1C63
split-complementary
#63271C #1C634B #1C3463
monochromatic
#180907 #33140F #63271C #933A29 #C24D37
Accessibility & contrast
On white
11.43
#63271C on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.84
#63271C on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #63271C
11.43:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##63271C | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##63271C | 1.00 | 11.43 | 1.84 | 11.43 |
| #FFFFFF | 11.43 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.84 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 11.43 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#37321B
Deuteranopia (green-blind)
#463F1B
Tritanopia (blue-blind)
#6D1B25
Achromatopsia (no color)
#3A3A3A
Design tokens & code
CSS
--color: #63271c; /* rgb */ color: rgb(99, 39, 28); /* oklch */ color: oklch(35.7% 0.090 32.2);
Tailwind
colors: {
custom: {
50: '#946358',
500: '#63271c',
950: '#000000',
},
}SCSS
$custom: #63271c; $custom-light: #946358; $custom-dark: #000000;
JSON
{
"hex": "#63271c",
"rgb": {
"r": 99,
"g": 39,
"b": 28
},
"hsl": {
"h": 9.296,
"s": 55.906,
"l": 24.902
},
"oklch": {
"l": 0.35728,
"c": 0.08979,
"h": 32.2
},
"luminance": 0.04188
}Semantic roles & 50–950 ramp
primary
#63271C
secondary
#438B98
accent
#C8DF49
background
#F9F6F5
surface
#F2EBE9
border
#CCC6C5
text
#0E0503
muted
#7E7A78