#F08870#F08870
#F08870 is a light, vivid red. Relative luminance 0.373; OKLCH L 73.4% C 0.132 H 34.0°. Best body text is #000000 at 8.46:1 contrast (WCAG AA passes).
Color values
| HEX | #F08870 |
|---|---|
| RGB | rgb(240, 136, 112) |
| HSL | hsl(11, 81%, 69%) |
| HSV | hsv(11, 53%, 94%) |
| CMYK | cmyk(0%, 43.3%, 53.3%, 5.9%) |
| CIE-LAB | lab(67.51, 37.30, 30.26) |
| CIE-LCH | lch(67.51, 48.03, 39.05°) |
| OKLab | oklab(73.4% 0.1098 0.074) |
| OKLCH | oklch(73.4% 0.132 34) |
| XYZ | xyz(47.6673, 37.3082, 20.0169) |
| Luminance | 0.3730 (WCAG relative) |
| Temperature | warm |
| Family | red |
Closest named colors
Salmon
#FA8072
ΔE00 3.97
Darksalmon
#E9967A
ΔE00 4.46
Salmon (survey)
#FF796C
ΔE00 5.15
Dark Peach
#DE7E5D
ΔE00 5.16
Melon
#FF7855
ΔE00 5.28
Peachy Pink
#FF9A8A
ΔE00 5.56
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F08870 #70D8F0
analogous
#F07098 #F08870 #F0C870
triadic
#F08870 #70F088 #8870F0
tetradic
#F08870 #98F070 #70D8F0 #C870F0
square
#F08870 #98F070 #70D8F0 #C870F0
split-complementary
#F08870 #70F0C8 #7098F0
monochromatic
#D03916 #EA5A39 #F08870 #F6B6A7 #FCE4DF
Accessibility & contrast
On white
2.48
#F08870 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.46
#F08870 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F08870
8.46:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F08870 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F08870 | 1.00 | 2.48 | 8.46 | 8.46 |
| #FFFFFF | 2.48 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.46 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.46 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A1976E
Deuteranopia (green-blind)
#BBAD6E
Tritanopia (blue-blind)
#FF7782
Achromatopsia (no color)
#A4A4A4
Design tokens & code
CSS
--color: #f08870; /* rgb */ color: rgb(240, 136, 112); /* oklch */ color: oklch(73.4% 0.132 34.0);
Tailwind
colors: {
custom: {
50: '#f9ac99',
500: '#f08870',
950: '#000000',
},
}SCSS
$custom: #f08870; $custom-light: #f9ac99; $custom-dark: #000000;
JSON
{
"hex": "#f08870",
"rgb": {
"r": 240,
"g": 136,
"b": 112
},
"hsl": {
"h": 11.25,
"s": 81.013,
"l": 69.02
},
"oklch": {
"l": 0.73399,
"c": 0.13242,
"h": 34
},
"luminance": 0.37303
}Semantic roles & 50–950 ramp
primary
#F08870
secondary
#CBEAF1
accent
#B5DD08
background
#FFFAF9
surface
#FFF4F2
border
#D7CECC
text
#18100E
muted
#867F7E