#AA63E4#AA63E4
#AA63E4 is a light, vivid violet. Relative luminance 0.231; OKLCH L 63.5% C 0.193 H 307.2°. Best body text is #000000 at 5.61:1 contrast (WCAG AA passes).
Color values
| HEX | #AA63E4 |
|---|---|
| RGB | rgb(170, 99, 228) |
| HSL | hsl(273, 70%, 64%) |
| HSV | hsv(273, 57%, 89%) |
| CMYK | cmyk(25.4%, 56.6%, 0%, 10.6%) |
| CIE-LAB | lab(55.15, 51.86, -54.74) |
| CIE-LCH | lch(55.15, 75.40, 313.45°) |
| OKLab | oklab(63.53% 0.1168 -0.1542) |
| OKLCH | oklch(63.53% 0.193 307.2) |
| XYZ | xyz(35.0401, 23.0716, 75.9911) |
| Luminance | 0.2307 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Lighter Purple
#A55AF4
ΔE00 3.34
Lightish Purple
#A552E6
ΔE00 4.15
Light Urple
#B36FF6
ΔE00 4.18
Mediumorchid
#BA55D3
ΔE00 5.23
Mediumpurple
#9370DB
ΔE00 5.53
Bright Lavender
#C760FF
ΔE00 5.57
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#AA63E4 #9DE463
analogous
#6A63E4 #AA63E4 #E463DE
triadic
#AA63E4 #E4AA63 #63E4AA
tetradic
#AA63E4 #E46A63 #9DE463 #63DEE4
square
#AA63E4 #E46A63 #9DE463 #63DEE4
split-complementary
#AA63E4 #DEE463 #63E46A
monochromatic
#6E1EAE #8E2FDB #AA63E4 #C697ED #E3CBF6
Accessibility & contrast
On white
3.74
#AA63E4 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.61
#AA63E4 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #AA63E4
5.61:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##AA63E4 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##AA63E4 | 1.00 | 3.74 | 5.61 | 5.61 |
| #FFFFFF | 3.74 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.61 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.61 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3381E8
Deuteranopia (green-blind)
#4F85E1
Tritanopia (blue-blind)
#A17B9A
Achromatopsia (no color)
#848484
Design tokens & code
CSS
--color: #aa63e4; /* rgb */ color: rgb(170, 99, 228); /* oklch */ color: oklch(63.5% 0.193 307.2);
Tailwind
colors: {
custom: {
50: '#c792ed',
500: '#aa63e4',
950: '#000000',
},
}SCSS
$custom: #aa63e4; $custom-light: #c792ed; $custom-dark: #000000;
JSON
{
"hex": "#aa63e4",
"rgb": {
"r": 170,
"g": 99,
"b": 228
},
"hsl": {
"h": 273.023,
"s": 70.492,
"l": 64.118
},
"oklch": {
"l": 0.63532,
"c": 0.19342,
"h": 307.2
},
"luminance": 0.23071
}Semantic roles & 50–950 ramp
primary
#AA63E4
secondary
#CFE8BB
accent
#D31369
background
#FCF9FE
surface
#F8F1FD
border
#D1CBD5
text
#130D16
muted
#827E84