#F8668C#F8668C
#F8668C is a light, vivid pink. Relative luminance 0.314; OKLCH L 70.3% C 0.181 H 6.9°. Best body text is #000000 at 7.27:1 contrast (WCAG AA passes).
Color values
| HEX | #F8668C |
|---|---|
| RGB | rgb(248, 102, 140) |
| HSL | hsl(344, 91%, 69%) |
| HSV | hsv(344, 59%, 97%) |
| CMYK | cmyk(0%, 58.9%, 43.5%, 2.7%) |
| CIE-LAB | lab(62.81, 59.03, 8.21) |
| CIE-LCH | lch(62.81, 59.60, 7.92°) |
| OKLab | oklab(70.26% 0.1796 0.0217) |
| OKLCH | oklch(70.26% 0.181 6.9) |
| XYZ | xyz(48.1997, 31.3582, 28.3203) |
| Luminance | 0.3135 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Rosy Pink
#F6688E
ΔE00 0.60
Strawberry
#FC5A8D
ΔE00 2.34
Warm Pink
#FB5581
ΔE00 2.95
Watermelon
#FC6C85
ΔE00 3.45
Medium Pink
#F36196
ΔE00 3.88
Carnation
#FD798F
ΔE00 4.68
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F8668C #66F8D2
analogous
#F866D5 #F8668C #F88966
triadic
#F8668C #8CF866 #668CF8
tetradic
#F8668C #D5F866 #66F8D2 #8966F8
square
#F8668C #D5F866 #66F8D2 #8966F8
split-complementary
#F8668C #66F889 #66D5F8
monochromatic
#DA0A40 #F52B60 #F8668C #FBA1B8 #FDDBE4
Accessibility & contrast
On white
2.89
#F8668C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
7.27
#F8668C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F8668C
7.27:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F8668C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F8668C | 1.00 | 2.89 | 7.27 | 7.27 |
| #FFFFFF | 2.89 | 1.00 | 21.00 | 21.00 |
| #000000 | 7.27 | 21.00 | 1.00 | 1.00 |
| ##000000 | 7.27 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#84868D
Deuteranopia (green-blind)
#AAA389
Tritanopia (blue-blind)
#FF5474
Achromatopsia (no color)
#989898
Design tokens & code
CSS
--color: #f8668c; /* rgb */ color: rgb(248, 102, 140); /* oklch */ color: oklch(70.3% 0.181 6.9);
Tailwind
colors: {
custom: {
50: '#ff97ad',
500: '#f8668c',
950: '#000000',
},
}SCSS
$custom: #f8668c; $custom-light: #ff97ad; $custom-dark: #000000;
JSON
{
"hex": "#f8668c",
"rgb": {
"r": 248,
"g": 102,
"b": 140
},
"hsl": {
"h": 344.384,
"s": 91.25,
"l": 68.627
},
"oklch": {
"l": 0.70256,
"c": 0.18092,
"h": 6.9
},
"luminance": 0.31353
}Semantic roles & 50–950 ramp
primary
#F8668C
secondary
#C7F3E7
accent
#E6AA00
background
#FFF9FA
surface
#FFF2F4
border
#D7CCCE
text
#190E10
muted
#877E7F