#545178#545178
#545178 is a mid, moderate blue. Relative luminance 0.091; OKLCH L 45.4% C 0.063 H 287.1°. Best body text is #FFFFFF at 7.43:1 contrast (WCAG AA passes).
Color values
| HEX | #545178 |
|---|---|
| RGB | rgb(84, 81, 120) |
| HSL | hsl(245, 19%, 39%) |
| HSV | hsv(245, 33%, 47%) |
| CMYK | cmyk(30%, 32.5%, 0%, 52.9%) |
| CIE-LAB | lab(36.22, 10.84, -21.72) |
| CIE-LCH | lch(36.22, 24.28, 296.52°) |
| OKLab | oklab(45.43% 0.0186 -0.0603) |
| OKLCH | oklch(45.43% 0.063 287.1) |
| XYZ | xyz(9.9879, 9.1255, 19.0008) |
| Luminance | 0.0913 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Dusk
#4E5481
ΔE00 3.60
Twilight
#4E518B
ΔE00 5.48
Dusky Blue
#475F94
ΔE00 9.78
Darkslateblue
#483D8B
ΔE00 9.88
Blueberry
#464196
ΔE00 10.48
Denim Blue
#3B5B92
ΔE00 10.92
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#545178 #757851
analogous
#516278 #545178 #685178
triadic
#545178 #785451 #517854
tetradic
#545178 #785162 #757851 #517868
square
#545178 #785162 #757851 #517868
split-complementary
#545178 #786851 #627851
monochromatic
#21202F #3A3853 #545178 #6F6B9B #9290B4
Accessibility & contrast
On white
7.43
#545178 on #FFFFFF
AA ✓AA large ✓AAA ✓
On black
2.83
#545178 on #000000
AA ✗AA large ✗AAA ✗
Best text color
#FFFFFF on #545178
7.43:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##545178 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##545178 | 1.00 | 7.43 | 2.83 | 7.43 |
| #FFFFFF | 7.43 | 1.00 | 21.00 | 1.00 |
| #000000 | 2.83 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 7.43 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#46567A
Deuteranopia (green-blind)
#465477
Tritanopia (blue-blind)
#4C585F
Achromatopsia (no color)
#555555
Design tokens & code
CSS
--color: #545178; /* rgb */ color: rgb(84, 81, 120); /* oklch */ color: oklch(45.4% 0.063 287.1);
Tailwind
colors: {
custom: {
50: '#85819f',
500: '#545178',
950: '#000000',
},
}SCSS
$custom: #545178; $custom-light: #85819f; $custom-dark: #000000;
JSON
{
"hex": "#545178",
"rgb": {
"r": 84,
"g": 81,
"b": 120
},
"hsl": {
"h": 244.615,
"s": 19.403,
"l": 39.412
},
"oklch": {
"l": 0.45435,
"c": 0.06308,
"h": 287.1
},
"luminance": 0.09126
}Semantic roles & 50–950 ramp
primary
#545178
secondary
#9FA184
accent
#BC6CB6
background
#F8F7F9
surface
#EFEEF2
border
#CAC9CC
text
#0B0A0E
muted
#7C7C7E