#EF6561#EF6561
#EF6561 is a light, vivid red. Relative luminance 0.285; OKLCH L 67.9% C 0.172 H 24.4°. Best body text is #000000 at 6.70:1 contrast (WCAG AA passes).
Color values
| HEX | #EF6561 |
|---|---|
| RGB | rgb(239, 101, 97) |
| HSL | hsl(2, 82%, 66%) |
| HSV | hsv(2, 59%, 94%) |
| CMYK | cmyk(0%, 57.7%, 59.4%, 6.3%) |
| CIE-LAB | lab(60.36, 52.93, 29.34) |
| CIE-LCH | lch(60.36, 60.52, 29.00°) |
| OKLab | oklab(67.86% 0.1563 0.0709) |
| OKLCH | oklch(67.86% 0.172 24.4) |
| XYZ | xyz(42.4118, 28.5265, 14.5797) |
| Luminance | 0.2852 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Coral Pink
#FF6163
ΔE00 2.68
Grapefruit
#FD5956
ΔE00 2.97
Coral (survey)
#FC5A50
ΔE00 3.92
Light Red
#FF474C
ΔE00 4.89
Pastel Red
#DB5856
ΔE00 5.13
Watermelon (survey)
#FD4659
ΔE00 5.20
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#EF6561 #61EBEF
analogous
#EF61A4 #EF6561 #EFAC61
triadic
#EF6561 #61EF65 #6561EF
tetradic
#EF6561 #A4EF61 #61EBEF #AC61EF
square
#EF6561 #A4EF61 #61EBEF #AC61EF
split-complementary
#EF6561 #61EFAC #61A4EF
monochromatic
#C21914 #E92F29 #EF6561 #F59B99 #FAD1D0
Accessibility & contrast
On white
3.13
#EF6561 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.70
#EF6561 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #EF6561
6.70:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##EF6561 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##EF6561 | 1.00 | 3.13 | 6.70 | 6.70 |
| #FFFFFF | 3.13 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.70 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.70 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#877F60
Deuteranopia (green-blind)
#AA9D5E
Tritanopia (blue-blind)
#FF4B65
Achromatopsia (no color)
#919191
Design tokens & code
CSS
--color: #ef6561; /* rgb */ color: rgb(239, 101, 97); /* oklch */ color: oklch(67.9% 0.172 24.4);
Tailwind
colors: {
custom: {
50: '#fb968e',
500: '#ef6561',
950: '#000000',
},
}SCSS
$custom: #ef6561; $custom-light: #fb968e; $custom-dark: #000000;
JSON
{
"hex": "#ef6561",
"rgb": {
"r": 239,
"g": 101,
"b": 97
},
"hsl": {
"h": 1.69,
"s": 81.609,
"l": 65.882
},
"oklch": {
"l": 0.67859,
"c": 0.17158,
"h": 24.4
},
"luminance": 0.28521
}Semantic roles & 50–950 ramp
primary
#EF6561
secondary
#BEECED
accent
#D8DE08
background
#FFF9F8
surface
#FFF2F0
border
#D7CCCB
text
#190E0C
muted
#877E7D