#CC010E#CC010E
#CC010E is a mid, highly saturated red. Relative luminance 0.129; OKLCH L 53.2% C 0.217 H 28.0°. Best body text is #FFFFFF at 5.87:1 contrast (WCAG AA passes).
Color values
| HEX | #CC010E |
|---|---|
| RGB | rgb(204, 1, 14) |
| HSL | hsl(356, 99%, 40%) |
| HSV | hsv(356, 100%, 80%) |
| CMYK | cmyk(0%, 99.5%, 93.1%, 20%) |
| CIE-LAB | lab(42.60, 67.73, 52.17) |
| CIE-LCH | lch(42.60, 85.50, 37.61°) |
| OKLab | oklab(53.15% 0.1915 0.1017) |
| OKLCH | oklch(53.15% 0.217 28) |
| XYZ | xyz(24.9953, 12.8952, 1.5884) |
| Luminance | 0.1289 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Scarlet
#BE0119
ΔE00 3.98
Red (survey)
#E50000
ΔE00 5.74
Firebrick
#B22222
ΔE00 5.75
Rusty Red
#AF2F0D
ΔE00 6.18
Rust Red
#AA2704
ΔE00 6.97
Darkish Red
#A90308
ΔE00 6.98
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#CC010E #01CCBF
analogous
#CC0173 #CC010E #CC5A01
triadic
#CC010E #0ECC01 #010ECC
tetradic
#CC010E #73CC01 #01CCBF #5A01CC
square
#CC010E #73CC01 #01CCBF #5A01CC
split-complementary
#CC010E #01CC5A #0173CC
monochromatic
#520006 #8F010A #CC010E #FE0C1C #FE4955
Accessibility & contrast
On white
5.87
#CC010E on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.58
#CC010E on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #CC010E
5.87:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##CC010E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##CC010E | 1.00 | 5.87 | 3.58 | 5.87 |
| #FFFFFF | 5.87 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.58 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.87 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#554B07
Deuteranopia (green-blind)
#817200
Tritanopia (blue-blind)
#E2000E
Achromatopsia (no color)
#656565
Design tokens & code
CSS
--color: #cc010e; /* rgb */ color: rgb(204, 1, 14); /* oklch */ color: oklch(53.2% 0.217 28.0);
Tailwind
colors: {
custom: {
50: '#e86953',
500: '#cc010e',
950: '#000000',
},
}SCSS
$custom: #cc010e; $custom-light: #e86953; $custom-dark: #000000;
JSON
{
"hex": "#cc010e",
"rgb": {
"r": 204,
"g": 1,
"b": 14
},
"hsl": {
"h": 356.158,
"s": 99.024,
"l": 40.196
},
"oklch": {
"l": 0.53151,
"c": 0.21687,
"h": 28
},
"luminance": 0.12891
}Semantic roles & 50–950 ramp
primary
#CC010E
secondary
#4BDED5
accent
#FFF129
background
#FFF7F4
surface
#FFEDE7
border
#D7C8C3
text
#190803
muted
#867B78