#5A42D2#5A42D2
#5A42D2 is a mid, highly saturated violet. Relative luminance 0.107; OKLCH L 49.6% C 0.209 H 283.3°. Best body text is #FFFFFF at 6.68:1 contrast (WCAG AA passes).
Color values
| HEX | #5A42D2 |
|---|---|
| RGB | rgb(90, 66, 210) |
| HSL | hsl(250, 62%, 54%) |
| HSV | hsv(250, 69%, 82%) |
| CMYK | cmyk(57.1%, 68.6%, 0%, 17.6%) |
| CIE-LAB | lab(39.11, 48.50, -70.84) |
| CIE-LCH | lch(39.11, 85.85, 304.40°) |
| OKLab | oklab(49.6% 0.0481 -0.2039) |
| OKLCH | oklch(49.6% 0.21 283.3) |
| XYZ | xyz(17.7939, 10.7221, 62.0922) |
| Luminance | 0.1072 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Bluey Purple
#6241C7
ΔE00 1.96
Blurple
#5539CC
ΔE00 2.45
Blue With A Hint Of Purple
#533CC6
ΔE00 2.49
Purpley Blue
#5F34E7
ΔE00 3.59
Purpleish Blue
#6140EF
ΔE00 3.84
Burple
#6832E3
ΔE00 4.00
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5A42D2 #BAD242
analogous
#4272D2 #5A42D2 #A242D2
triadic
#5A42D2 #D25A42 #42D25A
tetradic
#5A42D2 #D24272 #BAD242 #42D2A2
square
#5A42D2 #D24272 #BAD242 #42D2A2
split-complementary
#5A42D2 #D2A242 #72D242
monochromatic
#2D1E7C #3F29AD #5A42D2 #8573DE #B0A5EA
Accessibility & contrast
On white
6.68
#5A42D2 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.14
#5A42D2 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #5A42D2
6.68:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5A42D2 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5A42D2 | 1.00 | 6.68 | 3.14 | 6.68 |
| #FFFFFF | 6.68 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.14 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 6.68 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#0061D6
Deuteranopia (green-blind)
#0057CF
Tritanopia (blue-blind)
#186885
Achromatopsia (no color)
#5C5C5C
Design tokens & code
CSS
--color: #5a42d2; /* rgb */ color: rgb(90, 66, 210); /* oklch */ color: oklch(49.6% 0.209 283.3);
Tailwind
colors: {
custom: {
50: '#9578e1',
500: '#5a42d2',
950: '#000000',
},
}SCSS
$custom: #5a42d2; $custom-light: #9578e1; $custom-dark: #000000;
JSON
{
"hex": "#5a42d2",
"rgb": {
"r": 90,
"g": 66,
"b": 210
},
"hsl": {
"h": 250,
"s": 61.538,
"l": 54.118
},
"oklch": {
"l": 0.49598,
"c": 0.2095,
"h": 283.3
},
"luminance": 0.10723
}Semantic roles & 50–950 ramp
primary
#5A42D2
secondary
#CCD799
accent
#E543CA
background
#F9F7FD
surface
#F2EDFB
border
#CCC8D4
text
#0E0915
muted
#7E7B83