#67218D#67218D
#67218D is a dark, vivid violet. Relative luminance 0.059; OKLCH L 41.1% C 0.171 H 310.5°. Best body text is #FFFFFF at 9.64:1 contrast (WCAG AA passes).
Color values
| HEX | #67218D |
|---|---|
| RGB | rgb(103, 33, 141) |
| HSL | hsl(279, 62%, 34%) |
| HSV | hsv(279, 77%, 55%) |
| CMYK | cmyk(27%, 76.6%, 0%, 44.7%) |
| CIE-LAB | lab(29.14, 48.66, -45.85) |
| CIE-LCH | lch(29.14, 66.86, 316.70°) |
| OKLab | oklab(41.1% 0.1108 -0.1299) |
| OKLCH | oklch(41.1% 0.171 310.5) |
| XYZ | xyz(10.9442, 5.8946, 25.7554) |
| Luminance | 0.0589 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Rebeccapurple
#663399
ΔE00 4.07
Purple (survey)
#7E1E9C
ΔE00 4.38
Purple
#800080
ΔE00 6.56
Indigo
#4B0082
ΔE00 6.81
Darkish Purple
#751973
ΔE00 6.92
Darkmagenta
#8B008B
ΔE00 7.29
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#67218D #478D21
analogous
#31218D #67218D #8D217D
triadic
#67218D #8D6721 #218D67
tetradic
#67218D #8D3121 #478D21 #217D8D
square
#67218D #8D3121 #478D21 #217D8D
split-complementary
#67218D #7D8D21 #218D31
monochromatic
#1F0A2A #43155B #67218D #8B2DBF #A852D6
Accessibility & contrast
On white
9.64
#67218D on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.18
#67218D on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #67218D
9.64:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##67218D | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##67218D | 1.00 | 9.64 | 2.18 | 9.64 |
| #FFFFFF | 9.64 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.18 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 9.64 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#004290
Deuteranopia (green-blind)
#07468B
Tritanopia (blue-blind)
#623A56
Achromatopsia (no color)
#454545
Design tokens & code
CSS
--color: #67218d; /* rgb */ color: rgb(103, 33, 141); /* oklch */ color: oklch(41.1% 0.171 310.5);
Tailwind
colors: {
custom: {
50: '#9764af',
500: '#67218d',
950: '#000000',
},
}SCSS
$custom: #67218d; $custom-light: #9764af; $custom-dark: #000000;
JSON
{
"hex": "#67218d",
"rgb": {
"r": 103,
"g": 33,
"b": 141
},
"hsl": {
"h": 278.889,
"s": 62.069,
"l": 34.118
},
"oklch": {
"l": 0.41096,
"c": 0.17076,
"h": 310.5
},
"luminance": 0.05894
}Semantic roles & 50–950 ramp
primary
#67218D
secondary
#75BA50
accent
#E5437C
background
#F9F6FA
surface
#F2EBF5
border
#CCC6CF
text
#0E0610
muted
#7E7A7F