#57466D#57466D
#57466D is a dark, moderate violet. Relative luminance 0.075; OKLCH L 42.8% C 0.066 H 303.7°. Best body text is #FFFFFF at 8.39:1 contrast (WCAG AA passes).
Color values
| HEX | #57466D |
|---|---|
| RGB | rgb(87, 70, 109) |
| HSL | hsl(266, 22%, 35%) |
| HSV | hsv(266, 36%, 43%) |
| CMYK | cmyk(20.2%, 35.8%, 0%, 57.3%) |
| CIE-LAB | lab(32.94, 15.92, -19.93) |
| CIE-LCH | lch(32.94, 25.51, 308.63°) |
| OKLab | oklab(42.82% 0.0368 -0.055) |
| OKLCH | oklch(42.82% 0.066 303.7) |
| XYZ | xyz(8.8804, 7.5107, 15.4469) |
| Luminance | 0.0751 (WCAG relative) |
| Temperature | cool |
| Family | violet |
Closest named colors
Dusk
#4E5481
ΔE00 8.50
Twilight
#4E518B
ΔE00 9.11
Dirty Purple
#734A65
ΔE00 9.53
Grape
#6C3461
ΔE00 9.90
Darkslateblue
#483D8B
ΔE00 10.30
Muted Purple
#805B87
ΔE00 10.72
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#57466D #5C6D46
analogous
#46486D #57466D #6B466D
triadic
#57466D #6D5746 #466D57
tetradic
#57466D #6D4648 #5C6D46 #466D6B
square
#57466D #6D4648 #5C6D46 #466D6B
split-complementary
#57466D #6D6B46 #486D46
monochromatic
#1C1622 #392E48 #57466D #755E92 #9480AD
Accessibility & contrast
On white
8.39
#57466D on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.50
#57466D on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #57466D
8.39:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##57466D | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##57466D | 1.00 | 8.39 | 2.50 | 8.39 |
| #FFFFFF | 8.39 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.50 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 8.39 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#3E4D6F
Deuteranopia (green-blind)
#414D6C
Tritanopia (blue-blind)
#544C54
Achromatopsia (no color)
#4D4D4D
Design tokens & code
CSS
--color: #57466d; /* rgb */ color: rgb(87, 70, 109); /* oklch */ color: oklch(42.8% 0.066 303.7);
Tailwind
colors: {
custom: {
50: '#877997',
500: '#57466d',
950: '#000000',
},
}SCSS
$custom: #57466d; $custom-light: #877997; $custom-dark: #000000;
JSON
{
"hex": "#57466d",
"rgb": {
"r": 87,
"g": 70,
"b": 109
},
"hsl": {
"h": 266.154,
"s": 21.788,
"l": 35.098
},
"oklch": {
"l": 0.4282,
"c": 0.06618,
"h": 303.7
},
"luminance": 0.07511
}Semantic roles & 50–950 ramp
primary
#57466D
secondary
#8A9A75
accent
#BE6999
background
#F8F7F9
surface
#EFEDF2
border
#CAC8CC
text
#0B090D
muted
#7C7B7E