#9C4CE3#9C4CE3
#9C4CE3 is a mid, highly saturated violet. Relative luminance 0.178; OKLCH L 58.9% C 0.220 H 304.8°. Best body text is #FFFFFF at 4.61:1 contrast (WCAG AA passes).
Color values
| HEX | #9C4CE3 |
|---|---|
| RGB | rgb(156, 76, 227) |
| HSL | hsl(272, 73%, 59%) |
| HSV | hsv(272, 67%, 89%) |
| CMYK | cmyk(31.3%, 66.5%, 0%, 11%) |
| CIE-LAB | lab(49.23, 59.85, -63.77) |
| CIE-LCH | lch(49.23, 87.46, 313.19°) |
| OKLab | oklab(58.86% 0.1257 -0.181) |
| OKLCH | oklch(58.86% 0.22 304.8) |
| XYZ | xyz(30.1568, 17.7830, 74.5019) |
| Luminance | 0.1778 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Lightish Purple
#A552E6
ΔE00 2.43
Purpley
#8756E4
ΔE00 4.10
Lighter Purple
#A55AF4
ΔE00 4.71
Electric Purple
#AA23FF
ΔE00 5.29
Bright Violet
#AD0AFD
ΔE00 6.23
Neon Purple
#BC13FE
ΔE00 6.30
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#9C4CE3 #93E34C
analogous
#514CE3 #9C4CE3 #E34CDF
triadic
#9C4CE3 #E39C4C #4CE39C
tetradic
#9C4CE3 #E3514C #93E34C #4CDFE3
square
#9C4CE3 #E3514C #93E34C #4CDFE3
split-complementary
#9C4CE3 #DFE34C #4CE351
monochromatic
#5E189C #7E21D1 #9C4CE3 #B981EB #D7B6F4
Accessibility & contrast
On white
4.61
#9C4CE3 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.56
#9C4CE3 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#FFFFFF on #9C4CE3
4.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##9C4CE3 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##9C4CE3 | 1.00 | 4.61 | 4.56 | 4.61 |
| #FFFFFF | 4.61 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.56 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.61 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0073E8
Deuteranopia (green-blind)
#1875E0
Tritanopia (blue-blind)
#8F6E91
Achromatopsia (no color)
#757575
Design tokens & code
CSS
--color: #9c4ce3; /* rgb */ color: rgb(156, 76, 227); /* oklch */ color: oklch(58.9% 0.220 304.8);
Tailwind
colors: {
custom: {
50: '#be83ed',
500: '#9c4ce3',
950: '#000000',
},
}SCSS
$custom: #9c4ce3; $custom-light: #be83ed; $custom-dark: #000000;
JSON
{
"hex": "#9c4ce3",
"rgb": {
"r": 156,
"g": 76,
"b": 227
},
"hsl": {
"h": 271.788,
"s": 72.947,
"l": 59.412
},
"oklch": {
"l": 0.5886,
"c": 0.2204,
"h": 304.8
},
"luminance": 0.17783
}Semantic roles & 50–950 ramp
primary
#9C4CE3
secondary
#C4E3A8
accent
#F0388E
background
#FCF8FE
surface
#F8EFFD
border
#D1CAD5
text
#130B16
muted
#827C84