#661699#661699
#661699 is a dark, vivid violet. Relative luminance 0.057; OKLCH L 41.0% C 0.192 H 306.8°. Best body text is #FFFFFF at 9.81:1 contrast (WCAG AA passes).
Color values
| HEX | #661699 |
|---|---|
| RGB | rgb(102, 22, 153) |
| HSL | hsl(277, 75%, 34%) |
| HSV | hsv(277, 86%, 60%) |
| CMYK | cmyk(33.3%, 85.6%, 0%, 40%) |
| CIE-LAB | lab(28.64, 55.00, -54.07) |
| CIE-LCH | lch(28.64, 77.13, 315.48°) |
| OKLab | oklab(41.02% 0.1152 -0.154) |
| OKLCH | oklch(41.02% 0.192 306.8) |
| XYZ | xyz(11.5149, 5.6986, 30.6241) |
| Luminance | 0.0570 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Purple (survey)
#7E1E9C
ΔE00 4.88
Rebeccapurple
#663399
ΔE00 4.96
Indigo
#4B0082
ΔE00 6.04
Violet Blue
#510AC9
ΔE00 7.55
Indigo Blue
#3A18B1
ΔE00 7.72
Purple
#800080
ΔE00 7.84
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#661699 #499916
analogous
#241699 #661699 #99168B
triadic
#661699 #996616 #169966
tetradic
#661699 #992416 #499916 #168B99
square
#661699 #992416 #499916 #168B99
split-complementary
#661699 #8B9916 #169924
monochromatic
#1F072E #420E63 #661699 #8A1ECF #A645E4
Accessibility & contrast
On white
9.81
#661699 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.14
#661699 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #661699
9.81:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##661699 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##661699 | 1.00 | 9.81 | 2.14 | 9.81 |
| #FFFFFF | 9.81 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.14 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.81 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#00419C
Deuteranopia (green-blind)
#004497
Tritanopia (blue-blind)
#5D3B5A
Achromatopsia (no color)
#444444
Design tokens & code
CSS
--color: #661699; /* rgb */ color: rgb(102, 22, 153); /* oklch */ color: oklch(41.0% 0.192 306.8);
Tailwind
colors: {
custom: {
50: '#9760b8',
500: '#661699',
950: '#000000',
},
}SCSS
$custom: #661699; $custom-light: #9760b8; $custom-dark: #000000;
JSON
{
"hex": "#661699",
"rgb": {
"r": 102,
"g": 22,
"b": 153
},
"hsl": {
"h": 276.641,
"s": 74.857,
"l": 34.314
},
"oklch": {
"l": 0.41015,
"c": 0.19237,
"h": 306.8
},
"luminance": 0.05699
}Semantic roles & 50–950 ramp
primary
#661699
secondary
#77C546
accent
#F1367F
background
#F9F6FB
surface
#F2EBF6
border
#CCC6D0
text
#0E0511
muted
#7E7A80