#7963CC#7963CC
#7963CC is a mid, vivid violet. Relative luminance 0.173; OKLCH L 57.2% C 0.156 H 290.2°. Best body text is #FFFFFF at 4.70:1 contrast (WCAG AA passes).
Color values
| HEX | #7963CC |
|---|---|
| RGB | rgb(121, 99, 204) |
| HSL | hsl(253, 51%, 59%) |
| HSV | hsv(253, 51%, 80%) |
| CMYK | cmyk(40.7%, 51.5%, 0%, 20%) |
| CIE-LAB | lab(48.69, 33.81, -51.73) |
| CIE-LCH | lch(48.69, 61.80, 303.17°) |
| OKLab | oklab(57.15% 0.054 -0.1467) |
| OKLCH | oklch(57.15% 0.156 290.2) |
| XYZ | xyz(23.2431, 17.3475, 59.2388) |
| Luminance | 0.1735 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Light Indigo
#6D5ACF
ΔE00 3.55
Slate Blue
#6A5ACD
ΔE00 3.88
Dark Periwinkle
#665FD1
ΔE00 3.95
Mediumslateblue
#7B68EE
ΔE00 5.34
Iris
#6258C4
ΔE00 5.39
Purpley
#8756E4
ΔE00 5.39
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#7963CC #B6CC63
analogous
#6382CC #7963CC #AD63CC
triadic
#7963CC #CC7963 #63CC79
tetradic
#7963CC #CC6382 #B6CC63 #63CCAD
square
#7963CC #CC6382 #B6CC63 #63CCAD
split-complementary
#7963CC #CCAD63 #82CC63
monochromatic
#402C88 #553CB6 #7963CC #A191DB #C8BFEA
Accessibility & contrast
On white
4.70
#7963CC on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.47
#7963CC on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #7963CC
4.70:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##7963CC | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##7963CC | 1.00 | 4.70 | 4.47 | 4.70 |
| #FFFFFF | 4.70 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.47 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.70 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3676D0
Deuteranopia (green-blind)
#3871CA
Tritanopia (blue-blind)
#62798E
Achromatopsia (no color)
#747474
Design tokens & code
CSS
--color: #7963cc; /* rgb */ color: rgb(121, 99, 204); /* oklch */ color: oklch(57.2% 0.156 290.2);
Tailwind
colors: {
custom: {
50: '#a490dc',
500: '#7963cc',
950: '#000000',
},
}SCSS
$custom: #7963cc; $custom-light: #a490dc; $custom-dark: #000000;
JSON
{
"hex": "#7963cc",
"rgb": {
"r": 121,
"g": 99,
"b": 204
},
"hsl": {
"h": 252.571,
"s": 50.725,
"l": 59.412
},
"oklch": {
"l": 0.57152,
"c": 0.15636,
"h": 290.2
},
"luminance": 0.17348
}Semantic roles & 50–950 ramp
primary
#7963CC
secondary
#D1DAB1
accent
#DA4EBD
background
#FAF8FD
surface
#F4F0FB
border
#CECBD4
text
#100C15
muted
#7F7D83