#502C93#502C93
#502C93 is a dark, vivid violet. Relative luminance 0.056; OKLCH L 40.1% C 0.159 H 294.0°. Best body text is #FFFFFF at 9.89:1 contrast (WCAG AA passes).
Color values
| HEX | #502C93 |
|---|---|
| RGB | rgb(80, 44, 147) |
| HSL | hsl(261, 54%, 37%) |
| HSV | hsv(261, 70%, 58%) |
| CMYK | cmyk(45.6%, 70.1%, 0%, 42.4%) |
| CIE-LAB | lab(28.41, 40.39, -50.88) |
| CIE-LCH | lch(28.41, 64.96, 308.44°) |
| OKLab | oklab(40.06% 0.0649 -0.1456) |
| OKLCH | oklch(40.06% 0.159 294) |
| XYZ | xyz(9.4740, 5.6132, 28.1824) |
| Luminance | 0.0561 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Rebeccapurple
#663399
ΔE00 4.38
Darkslateblue
#483D8B
ΔE00 5.72
Indigo Blue
#3A18B1
ΔE00 6.48
Blueberry
#464196
ΔE00 6.71
Indigo
#4B0082
ΔE00 7.16
Ocean Blue
#4F42B5
ΔE00 7.67
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#502C93 #6F932C
analogous
#2C3B93 #502C93 #842C93
triadic
#502C93 #93502C #2C9350
tetradic
#502C93 #932C3B #6F932C #2C9384
square
#502C93 #932C3B #6F932C #2C9384
split-complementary
#502C93 #93842C #3B932C
monochromatic
#1D1035 #361E64 #502C93 #6A3AC2 #8D68D2
Accessibility & contrast
On white
9.89
#502C93 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.12
#502C93 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #502C93
9.89:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##502C93 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##502C93 | 1.00 | 9.89 | 2.12 | 9.89 |
| #FFFFFF | 9.89 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.12 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.89 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004496
Deuteranopia (green-blind)
#004191
Tritanopia (blue-blind)
#3D455C
Achromatopsia (no color)
#434343
Design tokens & code
CSS
--color: #502c93; /* rgb */ color: rgb(80, 44, 147); /* oklch */ color: oklch(40.1% 0.159 294.0);
Tailwind
colors: {
custom: {
50: '#8768b4',
500: '#502c93',
950: '#000000',
},
}SCSS
$custom: #502c93; $custom-light: #8768b4; $custom-dark: #000000;
JSON
{
"hex": "#502c93",
"rgb": {
"r": 80,
"g": 44,
"b": 147
},
"hsl": {
"h": 260.971,
"s": 53.927,
"l": 37.451
},
"oklch": {
"l": 0.40061,
"c": 0.1594,
"h": 294
},
"luminance": 0.05613
}Semantic roles & 50–950 ramp
primary
#502C93
secondary
#9AB863
accent
#DD4AAA
background
#F8F6FB
surface
#F0EBF6
border
#CBC6D0
text
#0C0611
muted
#7D7A80