#5A172E#5A172E
#5A172E is a dark, moderate pink. Relative luminance 0.030; OKLCH L 32.3% C 0.099 H 3.7°. Best body text is #FFFFFF at 13.15:1 contrast (WCAG AA passes).
Color values
| HEX | #5A172E |
|---|---|
| RGB | rgb(90, 23, 46) |
| HSL | hsl(339, 59%, 22%) |
| HSV | hsv(339, 74%, 35%) |
| CMYK | cmyk(0%, 74.4%, 48.9%, 64.7%) |
| CIE-LAB | lab(19.98, 32.46, 2.34) |
| CIE-LCH | lch(19.98, 32.55, 4.11°) |
| OKLab | oklab(32.31% 0.0993 0.0064) |
| OKLCH | oklch(32.31% 0.099 3.7) |
| XYZ | xyz(5.0164, 2.9843, 2.8961) |
| Luminance | 0.0298 (WCAG relative) |
| Temperature | warm |
| Family | pink |
Closest named colors
Burgundy (survey)
#610023
ΔE00 4.64
Maroon (survey)
#650021
ΔE00 5.91
Merlot
#730039
ΔE00 5.98
Bordeaux
#7B002C
ΔE00 7.97
Wine (survey)
#80013F
ΔE00 8.01
Plum (survey)
#580F41
ΔE00 8.19
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#5A172E #175A43
analogous
#5A1750 #5A172E #5A2217
triadic
#5A172E #2E5A17 #172E5A
tetradic
#5A172E #505A17 #175A43 #22175A
square
#5A172E #505A17 #175A43 #22175A
split-complementary
#5A172E #175A22 #17505A
monochromatic
#18060C #290B15 #5A172E #8B2347 #BB3060
Accessibility & contrast
On white
13.15
#5A172E on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
1.60
#5A172E on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #5A172E
13.15:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##5A172E | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##5A172E | 1.00 | 13.15 | 1.60 | 13.15 |
| #FFFFFF | 13.15 | 1.00 | 21.00 | 1.00 |
| #000000 | 1.60 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 13.15 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#26282F
Deuteranopia (green-blind)
#37352C
Tritanopia (blue-blind)
#620D20
Achromatopsia (no color)
#303030
Design tokens & code
CSS
--color: #5a172e; /* rgb */ color: rgb(90, 23, 46); /* oklch */ color: oklch(32.3% 0.099 3.7);
Tailwind
colors: {
custom: {
50: '#8c5a66',
500: '#5a172e',
950: '#000000',
},
}SCSS
$custom: #5a172e; $custom-light: #8c5a66; $custom-dark: #000000;
JSON
{
"hex": "#5a172e",
"rgb": {
"r": 90,
"g": 23,
"b": 46
},
"hsl": {
"h": 339.403,
"s": 59.292,
"l": 22.157
},
"oklch": {
"l": 0.32309,
"c": 0.09945,
"h": 3.7
},
"luminance": 0.02984
}Semantic roles & 50–950 ramp
primary
#5A172E
secondary
#3C9174
accent
#E2AD45
background
#F8F5F6
surface
#F0E9EB
border
#CBC5C6
text
#0D0405
muted
#7D797A