#896FD3#896FD3
#896FD3 is a mid, vivid violet. Relative luminance 0.214; OKLCH L 61.1% C 0.148 H 293.5°. Best body text is #000000 at 5.28:1 contrast (WCAG AA passes).
Color values
| HEX | #896FD3 |
|---|---|
| RGB | rgb(137, 111, 211) |
| HSL | hsl(256, 53%, 63%) |
| HSV | hsv(256, 47%, 83%) |
| CMYK | cmyk(35.1%, 47.4%, 0%, 17.3%) |
| CIE-LAB | lab(53.37, 32.70, -48.17) |
| CIE-LCH | lch(53.37, 58.22, 304.17°) |
| OKLab | oklab(61.13% 0.0591 -0.1359) |
| OKLCH | oklch(61.13% 0.148 293.5) |
| XYZ | xyz(27.7558, 21.3898, 64.2817) |
| Luminance | 0.2139 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Mediumpurple
#9370DB
ΔE00 2.22
Mediumslateblue
#7B68EE
ΔE00 5.49
Deep Lilac
#966EBD
ΔE00 5.87
Deep Lavender
#8D5EB7
ΔE00 7.45
Purpley
#8756E4
ΔE00 7.48
Amethyst
#9B5FC0
ΔE00 7.55
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#896FD3 #B9D36F
analogous
#6F87D3 #896FD3 #BB6FD3
triadic
#896FD3 #D3896F #6FD389
tetradic
#896FD3 #D36F87 #B9D36F #6FD3BB
square
#896FD3 #D36F87 #B9D36F #6FD3BB
split-complementary
#896FD3 #D3BB6F #87D36F
monochromatic
#4A2F99 #6340C5 #896FD3 #AF9EE1 #D6CDF0
Accessibility & contrast
On white
3.98
#896FD3 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.28
#896FD3 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #896FD3
5.28:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##896FD3 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##896FD3 | 1.00 | 3.98 | 5.28 | 5.28 |
| #FFFFFF | 3.98 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.28 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.28 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#4C81D7
Deuteranopia (green-blind)
#507ED1
Tritanopia (blue-blind)
#778297
Achromatopsia (no color)
#7F7F7F
Design tokens & code
CSS
--color: #896fd3; /* rgb */ color: rgb(137, 111, 211); /* oklch */ color: oklch(61.1% 0.148 293.5);
Tailwind
colors: {
custom: {
50: '#af99e1',
500: '#896fd3',
950: '#000000',
},
}SCSS
$custom: #896fd3; $custom-light: #af99e1; $custom-dark: #000000;
JSON
{
"hex": "#896fd3",
"rgb": {
"r": 137,
"g": 111,
"b": 211
},
"hsl": {
"h": 255.6,
"s": 53.191,
"l": 63.137
},
"oklch": {
"l": 0.6113,
"c": 0.14816,
"h": 293.5
},
"luminance": 0.2139
}Semantic roles & 50–950 ramp
primary
#896FD3
secondary
#D7E1BD
accent
#C12598
background
#FBF9FD
surface
#F6F2FB
border
#D0CCD4
text
#110E15
muted
#807E83