#E78583#E78583
#E78583 is a light, vivid red. Relative luminance 0.354; OKLCH L 72.2% C 0.121 H 21.7°. Best body text is #000000 at 8.08:1 contrast (WCAG AA passes).
Color values
| HEX | #E78583 |
|---|---|
| RGB | rgb(231, 133, 131) |
| HSL | hsl(1, 68%, 71%) |
| HSV | hsv(1, 43%, 91%) |
| CMYK | cmyk(0%, 42.4%, 43.3%, 9.4%) |
| CIE-LAB | lab(66.06, 37.24, 17.55) |
| CIE-LCH | lch(66.06, 41.17, 25.24°) |
| OKLab | oklab(72.17% 0.1122 0.0447) |
| OKLCH | oklch(72.17% 0.121 21.7) |
| XYZ | xyz(45.4418, 35.4068, 25.9093) |
| Luminance | 0.3540 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Lightcoral
#F08080
ΔE00 2.01
Salmon Pink
#FE7B7C
ΔE00 4.47
Blush Pink
#FE828C
ΔE00 4.81
Salmon
#FA8072
ΔE00 5.68
Dirty Pink
#CA7B80
ΔE00 6.52
Dusty Pink (survey)
#D58A94
ΔE00 6.56
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#E78583 #83E5E7
analogous
#E783B3 #E78583 #E7B783
triadic
#E78583 #83E785 #8583E7
tetradic
#E78583 #B3E783 #83E5E7 #B783E7
square
#E78583 #B3E783 #83E5E7 #B783E7
split-complementary
#E78583 #83E7B7 #83B3E7
monochromatic
#C92A27 #DD5350 #E78583 #F1B7B6 #FAE6E5
Accessibility & contrast
On white
2.60
#E78583 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.08
#E78583 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #E78583
8.08:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##E78583 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##E78583 | 1.00 | 2.60 | 8.08 | 8.08 |
| #FFFFFF | 2.60 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.08 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.08 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#9A9582
Deuteranopia (green-blind)
#B2A881
Tritanopia (blue-blind)
#F97885
Achromatopsia (no color)
#A1A1A1
Design tokens & code
CSS
--color: #e78583; /* rgb */ color: rgb(231, 133, 131); /* oklch */ color: oklch(72.2% 0.121 21.7);
Tailwind
colors: {
custom: {
50: '#f2aaa7',
500: '#e78583',
950: '#000000',
},
}SCSS
$custom: #e78583; $custom-light: #f2aaa7; $custom-dark: #000000;
JSON
{
"hex": "#e78583",
"rgb": {
"r": 231,
"g": 133,
"b": 131
},
"hsl": {
"h": 1.2,
"s": 67.568,
"l": 70.98
},
"oklch": {
"l": 0.72168,
"c": 0.12074,
"h": 21.7
},
"luminance": 0.35403
}Semantic roles & 50–950 ramp
primary
#E78583
secondary
#D6F0F0
accent
#CCCF16
background
#FFFAFA
surface
#FFF4F4
border
#D7CECE
text
#17100F
muted
#857F7F