#DF886C#DF886C
#DF886C is a light, moderate red. Relative luminance 0.344; OKLCH L 71.2% C 0.114 H 38.6°. Best body text is #000000 at 7.88:1 contrast (WCAG AA passes).
Color values
| HEX | #DF886C |
|---|---|
| RGB | rgb(223, 136, 108) |
| HSL | hsl(15, 64%, 65%) |
| HSV | hsv(15, 52%, 87%) |
| CMYK | cmyk(0%, 39%, 51.6%, 12.5%) |
| CIE-LAB | lab(65.27, 30.39, 29.12) |
| CIE-LCH | lch(65.27, 42.09, 43.77°) |
| OKLab | oklab(71.2% 0.0895 0.0714) |
| OKLCH | oklch(71.2% 0.114 38.6) |
| XYZ | xyz(41.9450, 34.3828, 18.6119) |
| Luminance | 0.3438 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Dark Peach
#DE7E5D
ΔE00 2.99
Darksalmon
#E9967A
ΔE00 3.79
Pinkish Tan
#D99B82
ΔE00 6.00
Melon
#FF7855
ΔE00 6.99
Coral
#FF7F50
ΔE00 7.24
Salmon
#FA8072
ΔE00 7.25
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#DF886C #6CC3DF
analogous
#DF6C89 #DF886C #DFC26C
triadic
#DF886C #6CDF88 #886CDF
tetradic
#DF886C #89DF6C #6CC3DF #C26CDF
square
#DF886C #89DF6C #6CC3DF #C26CDF
split-complementary
#DF886C #6CDFC2 #6C89DF
monochromatic
#AB4625 #D45F3A #DF886C #EAB19E #F5D9D1
Accessibility & contrast
On white
2.67
#DF886C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.88
#DF886C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #DF886C
7.88:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##DF886C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##DF886C | 1.00 | 2.67 | 7.88 | 7.88 |
| #FFFFFF | 2.67 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.88 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.88 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#9E936A
Deuteranopia (green-blind)
#B3A66B
Tritanopia (blue-blind)
#F17A81
Achromatopsia (no color)
#9E9E9E
Design tokens & code
CSS
--color: #df886c; /* rgb */ color: rgb(223, 136, 108); /* oklch */ color: oklch(71.2% 0.114 38.6);
Tailwind
colors: {
custom: {
50: '#edab96',
500: '#df886c',
950: '#000000',
},
}SCSS
$custom: #df886c; $custom-light: #edab96; $custom-dark: #000000;
JSON
{
"hex": "#df886c",
"rgb": {
"r": 223,
"g": 136,
"b": 108
},
"hsl": {
"h": 14.609,
"s": 64.246,
"l": 64.902
},
"oklch": {
"l": 0.712,
"c": 0.11445,
"h": 38.6
},
"luminance": 0.34379
}Semantic roles & 50–950 ramp
primary
#DF886C
secondary
#C0DDE7
accent
#A1CC19
background
#FFFAF9
surface
#FEF4F2
border
#D6CECC
text
#17100D
muted
#857F7E