#F089E2#F089E2
#F089E2 is a light, vivid purple. Relative luminance 0.419; OKLCH L 76.9% C 0.165 H 332.2°. Best body text is #000000 at 9.38:1 contrast (WCAG AA passes).
Color values
| HEX | #F089E2 |
|---|---|
| RGB | rgb(240, 137, 226) |
| HSL | hsl(308, 77%, 74%) |
| HSV | hsv(308, 43%, 94%) |
| CMYK | cmyk(0%, 42.9%, 5.8%, 5.9%) |
| CIE-LAB | lab(70.81, 51.40, -28.47) |
| CIE-LCH | lch(70.81, 58.75, 331.02°) |
| OKLab | oklab(76.92% 0.1464 -0.0771) |
| OKLCH | oklch(76.92% 0.165 332.2) |
| XYZ | xyz(58.6079, 41.9108, 76.9393) |
| Luminance | 0.4191 (WCAG relative) |
| Temperature | neutral |
| Family | purple |
Closest named colors
Violet (CSS)
#EE82EE
ΔE00 3.20
Lavender Pink
#DD85D7
ΔE00 3.30
Purply Pink
#F075E6
ΔE00 4.35
Bubblegum Pink
#FE83CC
ΔE00 5.70
Plum
#DDA0DD
ΔE00 6.74
Candy Pink
#FF63E9
ΔE00 6.80
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F089E2 #89F097
analogous
#CB89F0 #F089E2 #F089AF
triadic
#F089E2 #E2F089 #89E2F0
tetradic
#F089E2 #F0CB89 #89F097 #89AFF0
square
#F089E2 #F0CB89 #89F097 #89AFF0
split-complementary
#F089E2 #AFF089 #89F0CB
monochromatic
#E21DC7 #E953D5 #F089E2 #F7BFEF #FCE4F8
Accessibility & contrast
On white
2.24
#F089E2 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.38
#F089E2 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F089E2
9.38:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F089E2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F089E2 | 1.00 | 2.24 | 9.38 | 9.38 |
| #FFFFFF | 2.24 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.38 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.38 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#86A4E5
Deuteranopia (green-blind)
#A2B3DF
Tritanopia (blue-blind)
#F88FAB
Achromatopsia (no color)
#ADADAD
Design tokens & code
CSS
--color: #f089e2; /* rgb */ color: rgb(240, 137, 226); /* oklch */ color: oklch(76.9% 0.165 332.2);
Tailwind
colors: {
custom: {
50: '#f7aeeb',
500: '#f089e2',
950: '#000000',
},
}SCSS
$custom: #f089e2; $custom-light: #f7aeeb; $custom-dark: #000000;
JSON
{
"hex": "#f089e2",
"rgb": {
"r": 240,
"g": 137,
"b": 226
},
"hsl": {
"h": 308.155,
"s": 77.444,
"l": 73.922
},
"oklch": {
"l": 0.76916,
"c": 0.16548,
"h": 332.2
},
"luminance": 0.41908
}Semantic roles & 50–950 ramp
primary
#F089E2
secondary
#D8F3DB
accent
#DA280C
background
#FFFAFE
surface
#FFF5FD
border
#D7CFD5
text
#171016
muted
#857F84