#8A36A6#8A36A6
#8A36A6 is a mid, vivid purple. Relative luminance 0.108; OKLCH L 49.9% C 0.182 H 316.5°. Best body text is #FFFFFF at 6.65:1 contrast (WCAG AA passes).
Color values
| HEX | #8A36A6 |
|---|---|
| RGB | rgb(138, 54, 166) |
| HSL | hsl(285, 51%, 43%) |
| HSV | hsv(285, 67%, 65%) |
| CMYK | cmyk(16.9%, 67.5%, 0%, 34.9%) |
| CIE-LAB | lab(39.23, 52.64, -44.55) |
| CIE-LCH | lch(39.23, 68.96, 319.76°) |
| OKLab | oklab(49.91% 0.1319 -0.125) |
| OKLCH | oklch(49.91% 0.182 316.5) |
| XYZ | xyz(18.6823, 10.7955, 37.1686) |
| Luminance | 0.1080 (WCAG relative) |
| Temperature | cool |
| Family | purple |
Closest named colors
Purply
#983FB2
ΔE00 3.80
Purple (survey)
#7E1E9C
ΔE00 5.00
Warm Purple
#952E8F
ΔE00 5.61
Medium Purple
#9E43A2
ΔE00 5.93
Darkorchid
#9932CC
ΔE00 5.97
Barney
#AC1DB8
ΔE00 6.03
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#8A36A6 #52A636
analogous
#5236A6 #8A36A6 #A6368A
triadic
#8A36A6 #A68A36 #36A68A
tetradic
#8A36A6 #A65236 #52A636 #368AA6
square
#8A36A6 #A65236 #52A636 #368AA6
split-complementary
#8A36A6 #8AA636 #36A652
monochromatic
#3D184A #642778 #8A36A6 #AA52C7 #C181D6
Accessibility & contrast
On white
6.65
#8A36A6 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.16
#8A36A6 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #8A36A6
6.65:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##8A36A6 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##8A36A6 | 1.00 | 6.65 | 3.16 | 6.65 |
| #FFFFFF | 6.65 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.16 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.65 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0057A9
Deuteranopia (green-blind)
#375FA3
Tritanopia (blue-blind)
#884B69
Achromatopsia (no color)
#5C5C5C
Design tokens & code
CSS
--color: #8a36a6; /* rgb */ color: rgb(138, 54, 166); /* oklch */ color: oklch(49.9% 0.182 316.5);
Tailwind
colors: {
custom: {
50: '#af74c1',
500: '#8a36a6',
950: '#000000',
},
}SCSS
$custom: #8a36a6; $custom-light: #af74c1; $custom-dark: #000000;
JSON
{
"hex": "#8a36a6",
"rgb": {
"r": 138,
"g": 54,
"b": 166
},
"hsl": {
"h": 285,
"s": 50.909,
"l": 43.137
},
"oklch": {
"l": 0.49907,
"c": 0.18174,
"h": 316.5
},
"luminance": 0.10795
}Semantic roles & 50–950 ramp
primary
#8A36A6
secondary
#8ABF79
accent
#DA4D71
background
#FBF7FB
surface
#F6EDF7
border
#D0C8D0
text
#110912
muted
#807B81