#84336A#84336A
#84336A is a mid, vivid pink. Relative luminance 0.083; OKLCH L 45.3% C 0.130 H 342.1°. Best body text is #FFFFFF at 7.89:1 contrast (WCAG AA passes).
Color values
| HEX | #84336A |
|---|---|
| RGB | rgb(132, 51, 106) |
| HSL | hsl(319, 44%, 36%) |
| HSV | hsv(319, 61%, 52%) |
| CMYK | cmyk(0%, 61.4%, 19.7%, 48.2%) |
| CIE-LAB | lab(34.63, 41.36, -14.93) |
| CIE-LCH | lch(34.63, 43.97, 340.15°) |
| OKLab | oklab(45.34% 0.1232 -0.0399) |
| OKLCH | oklch(45.34% 0.13 342.1) |
| XYZ | xyz(13.3014, 8.3150, 14.5373) |
| Luminance | 0.0831 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Bruise
#7E4071
ΔE00 3.60
Grape
#6C3461
ΔE00 5.12
Red Violet
#9E0168
ΔE00 6.45
Light Eggplant
#894585
ΔE00 6.53
Velvet
#750851
ΔE00 7.67
Dark Magenta
#960056
ΔE00 7.72
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#84336A #33844D
analogous
#753384 #84336A #843341
triadic
#84336A #6A8433 #336A84
tetradic
#84336A #847533 #33844D #334184
square
#84336A #847533 #33844D #334184
split-complementary
#84336A #418433 #338475
monochromatic
#2C1123 #582247 #84336A #B0448D #C66BA9
Accessibility & contrast
On white
7.89
#84336A on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.66
#84336A on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #84336A
7.89:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##84336A | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##84336A | 1.00 | 7.89 | 2.66 | 7.89 |
| #FFFFFF | 7.89 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.66 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.89 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#39496C
Deuteranopia (green-blind)
#505668
Tritanopia (blue-blind)
#8C344A
Achromatopsia (no color)
#515151
Design tokens & code
CSS
--color: #84336a; /* rgb */ color: rgb(132, 51, 106); /* oklch */ color: oklch(45.3% 0.130 342.1);
Tailwind
colors: {
custom: {
50: '#aa6f94',
500: '#84336a',
950: '#000000',
},
}SCSS
$custom: #84336a; $custom-light: #aa6f94; $custom-dark: #000000;
JSON
{
"hex": "#84336a",
"rgb": {
"r": 132,
"g": 51,
"b": 106
},
"hsl": {
"h": 319.259,
"s": 44.262,
"l": 35.882
},
"oklch": {
"l": 0.45341,
"c": 0.12953,
"h": 342.1
},
"luminance": 0.08314
}Semantic roles & 50–950 ramp
primary
#84336A
secondary
#65AE7C
accent
#D47D54
background
#FAF6F9
surface
#F4ECF1
border
#CEC7CB
text
#10080D
muted
#7F7B7E