#5F37D6#5F37D6
#5F37D6 is a mid, highly saturated violet. Relative luminance 0.100; OKLCH L 48.9% C 0.225 H 286.2°. Best body text is #FFFFFF at 6.99:1 contrast (WCAG AA passes).
Color values
| HEX | #5F37D6 |
|---|---|
| RGB | rgb(95, 55, 214) |
| HSL | hsl(255, 66%, 53%) |
| HSV | hsv(255, 74%, 84%) |
| CMYK | cmyk(55.6%, 74.3%, 0%, 16.1%) |
| CIE-LAB | lab(37.88, 56.07, -75.15) |
| CIE-LCH | lch(37.88, 93.76, 306.73°) |
| OKLab | oklab(48.94% 0.0628 -0.2163) |
| OKLCH | oklch(48.94% 0.225 286.2) |
| XYZ | xyz(18.2195, 10.0193, 64.5792) |
| Luminance | 0.1002 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Blurple
#5539CC
ΔE00 1.95
Purpley Blue
#5F34E7
ΔE00 2.05
Burple
#6832E3
ΔE00 2.10
Bluey Purple
#6241C7
ΔE00 2.77
Blue With A Hint Of Purple
#533CC6
ΔE00 2.86
Bluish Purple
#703BE7
ΔE00 3.66
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5F37D6 #AED637
analogous
#375FD6 #5F37D6 #AE37D6
triadic
#5F37D6 #D65F37 #37D65F
tetradic
#5F37D6 #D6375F #AED637 #37D6AE
square
#5F37D6 #D6375F #AED637 #37D6AE
split-complementary
#5F37D6 #D6AE37 #5FD637
monochromatic
#31197A #4623AC #5F37D6 #886AE0 #B09DEB
Accessibility & contrast
On white
6.99
#5F37D6 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.00
#5F37D6 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #5F37D6
6.99:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5F37D6 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5F37D6 | 1.00 | 6.99 | 3.00 | 6.99 |
| #FFFFFF | 6.99 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.00 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.99 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#005DDB
Deuteranopia (green-blind)
#0054D3
Tritanopia (blue-blind)
#276384
Achromatopsia (no color)
#595959
Design tokens & code
CSS
--color: #5f37d6; /* rgb */ color: rgb(95, 55, 214); /* oklch */ color: oklch(48.9% 0.225 286.2);
Tailwind
colors: {
custom: {
50: '#9972e4',
500: '#5f37d6',
950: '#000000',
},
}SCSS
$custom: #5f37d6; $custom-light: #9972e4; $custom-dark: #000000;
JSON
{
"hex": "#5f37d6",
"rgb": {
"r": 95,
"g": 55,
"b": 214
},
"hsl": {
"h": 255.094,
"s": 65.975,
"l": 52.745
},
"oklch": {
"l": 0.48942,
"c": 0.22524,
"h": 286.2
},
"luminance": 0.1002
}Semantic roles & 50–950 ramp
primary
#5F37D6
secondary
#C6D792
accent
#E93FBE
background
#FAF7FE
surface
#F4EDFC
border
#CEC8D5
text
#0F0816
muted
#7F7B84