#7863CE#7863CE
#7863CE is a mid, vivid violet. Relative luminance 0.174; OKLCH L 57.2% C 0.159 H 289.4°. Best body text is #FFFFFF at 4.69:1 contrast (WCAG AA passes).
Color values
| HEX | #7863CE |
|---|---|
| RGB | rgb(120, 99, 206) |
| HSL | hsl(252, 52%, 60%) |
| HSV | hsv(252, 52%, 81%) |
| CMYK | cmyk(41.7%, 51.9%, 0%, 19.2%) |
| CIE-LAB | lab(48.73, 34.14, -52.83) |
| CIE-LCH | lch(48.73, 62.90, 302.87°) |
| OKLab | oklab(57.19% 0.0529 -0.15) |
| OKLCH | oklch(57.19% 0.159 289.4) |
| XYZ | xyz(23.3451, 17.3722, 60.5037) |
| Luminance | 0.1737 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Light Indigo
#6D5ACF
ΔE00 3.37
Dark Periwinkle
#665FD1
ΔE00 3.66
Slate Blue
#6A5ACD
ΔE00 3.71
Mediumslateblue
#7B68EE
ΔE00 5.02
Iris
#6258C4
ΔE00 5.28
Purpley
#8756E4
ΔE00 5.31
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#7863CE #B9CE63
analogous
#6383CE #7863CE #AE63CE
triadic
#7863CE #CE7863 #63CE78
tetradic
#7863CE #CE6383 #B9CE63 #63CEAE
square
#7863CE #CE6383 #B9CE63 #63CEAE
split-complementary
#7863CE #CEAE63 #83CE63
monochromatic
#3E2C8B #533ABA #7863CE #A092DD #C9C0EB
Accessibility & contrast
On white
4.69
#7863CE on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.47
#7863CE on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #7863CE
4.69:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##7863CE | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##7863CE | 1.00 | 4.69 | 4.47 | 4.69 |
| #FFFFFF | 4.69 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.47 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.69 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3376D2
Deuteranopia (green-blind)
#3571CC
Tritanopia (blue-blind)
#60798F
Achromatopsia (no color)
#747474
Design tokens & code
CSS
--color: #7863ce; /* rgb */ color: rgb(120, 99, 206); /* oklch */ color: oklch(57.2% 0.159 289.4);
Tailwind
colors: {
custom: {
50: '#a490dd',
500: '#7863ce',
950: '#000000',
},
}SCSS
$custom: #7863ce; $custom-light: #a490dd; $custom-dark: #000000;
JSON
{
"hex": "#7863ce",
"rgb": {
"r": 120,
"g": 99,
"b": 206
},
"hsl": {
"h": 251.776,
"s": 52.195,
"l": 59.804
},
"oklch": {
"l": 0.57192,
"c": 0.15905,
"h": 289.4
},
"luminance": 0.17373
}Semantic roles & 50–950 ramp
primary
#7863CE
secondary
#D3DBB2
accent
#DC4CBF
background
#FAF8FD
surface
#F4F0FB
border
#CECBD4
text
#100C15
muted
#7F7D83