#9B4CE3#9B4CE3
#9B4CE3 is a mid, highly saturated violet. Relative luminance 0.177; OKLCH L 58.7% C 0.220 H 304.4°. Best body text is #FFFFFF at 4.63:1 contrast (WCAG AA passes).
Color values
| HEX | #9B4CE3 |
|---|---|
| RGB | rgb(155, 76, 227) |
| HSL | hsl(271, 73%, 59%) |
| HSV | hsv(271, 67%, 89%) |
| CMYK | cmyk(31.7%, 66.5%, 0%, 11%) |
| CIE-LAB | lab(49.11, 59.65, -63.97) |
| CIE-LCH | lch(49.11, 87.47, 313.00°) |
| OKLab | oklab(58.75% 0.1244 -0.1816) |
| OKLCH | oklch(58.75% 0.22 304.4) |
| XYZ | xyz(29.9640, 17.6836, 74.4929) |
| Luminance | 0.1768 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Lightish Purple
#A552E6
ΔE00 2.59
Purpley
#8756E4
ΔE00 3.96
Lighter Purple
#A55AF4
ΔE00 4.80
Electric Purple
#AA23FF
ΔE00 5.30
Bright Violet
#AD0AFD
ΔE00 6.24
Darkorchid
#9932CC
ΔE00 6.35
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#9B4CE3 #94E34C
analogous
#504CE3 #9B4CE3 #E34CDF
triadic
#9B4CE3 #E39B4C #4CE39B
tetradic
#9B4CE3 #E3504C #94E34C #4CDFE3
square
#9B4CE3 #E3504C #94E34C #4CDFE3
split-complementary
#9B4CE3 #DFE34C #4CE350
monochromatic
#5D189C #7D21D1 #9B4CE3 #B981EB #D6B6F4
Accessibility & contrast
On white
4.63
#9B4CE3 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.54
#9B4CE3 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#FFFFFF on #9B4CE3
4.63:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##9B4CE3 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##9B4CE3 | 1.00 | 4.63 | 4.54 | 4.63 |
| #FFFFFF | 4.63 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.54 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.63 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0073E8
Deuteranopia (green-blind)
#1575E0
Tritanopia (blue-blind)
#8E6E91
Achromatopsia (no color)
#757575
Design tokens & code
CSS
--color: #9b4ce3; /* rgb */ color: rgb(155, 76, 227); /* oklch */ color: oklch(58.7% 0.220 304.4);
Tailwind
colors: {
custom: {
50: '#bd83ed',
500: '#9b4ce3',
950: '#000000',
},
}SCSS
$custom: #9b4ce3; $custom-light: #bd83ed; $custom-dark: #000000;
JSON
{
"hex": "#9b4ce3",
"rgb": {
"r": 155,
"g": 76,
"b": 227
},
"hsl": {
"h": 271.391,
"s": 72.947,
"l": 59.412
},
"oklch": {
"l": 0.58746,
"c": 0.22018,
"h": 304.4
},
"luminance": 0.17683
}Semantic roles & 50–950 ramp
primary
#9B4CE3
secondary
#C4E3A8
accent
#F03890
background
#FCF8FE
surface
#F8EFFD
border
#D1CAD5
text
#130B16
muted
#827C84