#5B38D4#5B38D4
#5B38D4 is a mid, highly saturated violet. Relative luminance 0.098; OKLCH L 48.5% C 0.222 H 284.8°. Best body text is #FFFFFF at 7.09:1 contrast (WCAG AA passes).
Color values
| HEX | #5B38D4 |
|---|---|
| RGB | rgb(91, 56, 212) |
| HSL | hsl(253, 64%, 53%) |
| HSV | hsv(253, 74%, 83%) |
| CMYK | cmyk(57.1%, 73.6%, 0%, 16.9%) |
| CIE-LAB | lab(37.49, 54.48, -74.64) |
| CIE-LCH | lch(37.49, 92.41, 306.12°) |
| OKLab | oklab(48.52% 0.0568 -0.215) |
| OKLCH | oklch(48.52% 0.222 284.8) |
| XYZ | xyz(17.6086, 9.8049, 63.2393) |
| Luminance | 0.0981 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Blurple
#5539CC
ΔE00 1.36
Blue With A Hint Of Purple
#533CC6
ΔE00 2.29
Purpley Blue
#5F34E7
ΔE00 2.42
Bluey Purple
#6241C7
ΔE00 2.66
Burple
#6832E3
ΔE00 2.68
Purple Blue
#5D21D0
ΔE00 4.04
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5B38D4 #B1D438
analogous
#3863D4 #5B38D4 #A938D4
triadic
#5B38D4 #D45B38 #38D45B
tetradic
#5B38D4 #D43863 #B1D438 #38D4A9
square
#5B38D4 #D43863 #B1D438 #38D4A9
split-complementary
#5B38D4 #D4A938 #63D438
monochromatic
#2F1A78 #4325AA #5B38D4 #846ADF #AE9DEA
Accessibility & contrast
On white
7.09
#5B38D4 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.96
#5B38D4 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #5B38D4
7.09:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5B38D4 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5B38D4 | 1.00 | 7.09 | 2.96 | 7.09 |
| #FFFFFF | 7.09 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.96 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.09 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#005DD9
Deuteranopia (green-blind)
#0053D1
Tritanopia (blue-blind)
#1A6383
Achromatopsia (no color)
#585858
Design tokens & code
CSS
--color: #5b38d4; /* rgb */ color: rgb(91, 56, 212); /* oklch */ color: oklch(48.5% 0.222 284.8);
Tailwind
colors: {
custom: {
50: '#9672e2',
500: '#5b38d4',
950: '#000000',
},
}SCSS
$custom: #5b38d4; $custom-light: #9672e2; $custom-dark: #000000;
JSON
{
"hex": "#5b38d4",
"rgb": {
"r": 91,
"g": 56,
"b": 212
},
"hsl": {
"h": 253.462,
"s": 64.463,
"l": 52.549
},
"oklch": {
"l": 0.48523,
"c": 0.22236,
"h": 284.8
},
"luminance": 0.09806
}Semantic roles & 50–950 ramp
primary
#5B38D4
secondary
#C7D692
accent
#E740C2
background
#FAF7FE
surface
#F3EDFC
border
#CDC8D5
text
#0F0816
muted
#7F7B84