#89307A#89307A
#89307A is a mid, vivid pink. Relative luminance 0.088; OKLCH L 46.5% C 0.150 H 335.0°. Best body text is #FFFFFF at 7.59:1 contrast (WCAG AA passes).
Color values
| HEX | #89307A |
|---|---|
| RGB | rgb(137, 48, 122) |
| HSL | hsl(310, 48%, 36%) |
| HSV | hsv(310, 65%, 54%) |
| CMYK | cmyk(0%, 65%, 10.9%, 46.3%) |
| CIE-LAB | lab(35.67, 46.80, -23.32) |
| CIE-LCH | lch(35.67, 52.28, 333.51°) |
| OKLab | oklab(46.5% 0.1361 -0.0635) |
| OKLCH | oklch(46.5% 0.15 335) |
| XYZ | xyz(14.8865, 8.8386, 19.3306) |
| Luminance | 0.0884 (WCAG relative) |
| Temperature | neutral |
| Family | pink |
Closest named colors
Warm Purple
#952E8F
ΔE00 4.20
Light Eggplant
#894585
ΔE00 4.84
Bruise
#7E4071
ΔE00 4.91
Darkish Purple
#751973
ΔE00 6.21
Darkmagenta
#8B008B
ΔE00 6.63
Barney Purple
#A00498
ΔE00 6.90
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#89307A #30893F
analogous
#6C3089 #89307A #89304E
triadic
#89307A #7A8930 #307A89
tetradic
#89307A #896C30 #30893F #304E89
square
#89307A #896C30 #30893F #304E89
split-complementary
#89307A #4E8930 #30896C
monochromatic
#2E1029 #5C2052 #89307A #B640A2 #CA69BA
Accessibility & contrast
On white
7.59
#89307A on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.77
#89307A on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #89307A
7.59:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##89307A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##89307A | 1.00 | 7.59 | 2.77 | 7.59 |
| #FFFFFF | 7.59 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.77 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.59 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#304B7C
Deuteranopia (green-blind)
#4C5978
Tritanopia (blue-blind)
#903650
Achromatopsia (no color)
#545454
Design tokens & code
CSS
--color: #89307a; /* rgb */ color: rgb(137, 48, 122); /* oklch */ color: oklch(46.5% 0.150 335.0);
Tailwind
colors: {
custom: {
50: '#ae6fa0',
500: '#89307a',
950: '#000000',
},
}SCSS
$custom: #89307a; $custom-light: #ae6fa0; $custom-dark: #000000;
JSON
{
"hex": "#89307a",
"rgb": {
"r": 137,
"g": 48,
"b": 122
},
"hsl": {
"h": 310.112,
"s": 48.108,
"l": 36.275
},
"oklch": {
"l": 0.46504,
"c": 0.15014,
"h": 335
},
"luminance": 0.08837
}Semantic roles & 50–950 ramp
primary
#89307A
secondary
#63B270
accent
#D86750
background
#FBF6F9
surface
#F6ECF2
border
#D0C7CC
text
#11080F
muted
#807B7E