#502CAC#502CAC
#502CAC is a dark, vivid violet. Relative luminance 0.065; OKLCH L 42.3% C 0.189 H 288.4°. Best body text is #FFFFFF at 9.14:1 contrast (WCAG AA passes).
Color values
| HEX | #502CAC |
|---|---|
| RGB | rgb(80, 44, 172) |
| HSL | hsl(257, 59%, 42%) |
| HSV | hsv(257, 74%, 67%) |
| CMYK | cmyk(53.5%, 74.4%, 0%, 32.5%) |
| CIE-LAB | lab(30.60, 47.51, -62.48) |
| CIE-LCH | lch(30.60, 78.49, 307.25°) |
| OKLab | oklab(42.29% 0.0596 -0.1796) |
| OKLCH | oklch(42.29% 0.189 288.4) |
| XYZ | xyz(11.6532, 6.4848, 39.6594) |
| Luminance | 0.0649 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Indigo Blue
#3A18B1
ΔE00 4.50
Purple Blue
#5D21D0
ΔE00 5.13
Violet Blue
#510AC9
ΔE00 5.17
Blue With A Hint Of Purple
#533CC6
ΔE00 5.30
Blurple
#5539CC
ΔE00 5.48
Ocean Blue
#4F42B5
ΔE00 5.66
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#502CAC #88AC2C
analogous
#2C48AC #502CAC #902CAC
triadic
#502CAC #AC502C #2CAC50
tetradic
#502CAC #AC2C48 #88AC2C #2CAC90
square
#502CAC #AC2C48 #88AC2C #2CAC90
split-complementary
#502CAC #AC902C #48AC2C
monochromatic
#23134B #39207B #502CAC #6C46D0 #9376DC
Accessibility & contrast
On white
9.14
#502CAC on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.30
#502CAC on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #502CAC
9.14:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##502CAC | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##502CAC | 1.00 | 9.14 | 2.30 | 9.14 |
| #FFFFFF | 9.14 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.30 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.14 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004BB0
Deuteranopia (green-blind)
#0045AA
Tritanopia (blue-blind)
#2C4F6A
Achromatopsia (no color)
#484848
Design tokens & code
CSS
--color: #502cac; /* rgb */ color: rgb(80, 44, 172); /* oklch */ color: oklch(42.3% 0.189 288.4);
Tailwind
colors: {
custom: {
50: '#8b69c6',
500: '#502cac',
950: '#000000',
},
}SCSS
$custom: #502cac; $custom-light: #8b69c6; $custom-dark: #000000;
JSON
{
"hex": "#502cac",
"rgb": {
"r": 80,
"g": 44,
"b": 172
},
"hsl": {
"h": 256.875,
"s": 59.259,
"l": 42.353
},
"oklch": {
"l": 0.42291,
"c": 0.18926,
"h": 288.4
},
"luminance": 0.06485
}Semantic roles & 50–950 ramp
primary
#502CAC
secondary
#ACC470
accent
#E245B6
background
#F9F6FC
surface
#F1EBF8
border
#CBC6D1
text
#0D0613
muted
#7E7A82