#616497#616497
#616497 is a mid, moderate blue. Relative luminance 0.139; OKLCH L 52.2% C 0.080 H 280.6°. Best body text is #FFFFFF at 5.56:1 contrast (WCAG AA passes).
Color values
| HEX | #616497 |
|---|---|
| RGB | rgb(97, 100, 151) |
| HSL | hsl(237, 22%, 49%) |
| HSV | hsv(237, 36%, 59%) |
| CMYK | cmyk(35.8%, 33.8%, 0%, 40.8%) |
| CIE-LAB | lab(44.07, 11.69, -28.22) |
| CIE-LCH | lch(44.07, 30.55, 292.50°) |
| OKLab | oklab(52.23% 0.0148 -0.0788) |
| OKLCH | oklch(52.23% 0.08 280.6) |
| XYZ | xyz(15.0713, 13.8896, 31.1590) |
| Luminance | 0.1389 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Dusk
#4E5481
ΔE00 6.35
Dusky Blue
#475F94
ΔE00 6.44
Twilight
#4E518B
ΔE00 6.79
Denim Blue
#3B5B92
ΔE00 8.79
Iris
#6258C4
ΔE00 9.53
French Blue
#436BAD
ΔE00 9.59
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#616497 #979461
analogous
#617F97 #616497 #796197
triadic
#616497 #976164 #649761
tetradic
#616497 #97617F #979461 #619779
square
#616497 #97617F #979461 #619779
split-complementary
#616497 #977961 #7F9761
monochromatic
#31334C #494B72 #616497 #8587B0 #AAACC8
Accessibility & contrast
On white
5.56
#616497 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
3.78
#616497 on #000000
AA ✗AA large ✓AAA ✗
Best text color
#FFFFFF on #616497
5.56:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##616497 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##616497 | 1.00 | 5.56 | 3.78 | 5.56 |
| #FFFFFF | 5.56 | 1.00 | 21.00 | 1.00 |
| #000000 | 3.78 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 5.56 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#546A99
Deuteranopia (green-blind)
#516696
Tritanopia (blue-blind)
#526E76
Achromatopsia (no color)
#686868
Design tokens & code
CSS
--color: #616497; /* rgb */ color: rgb(97, 100, 151); /* oklch */ color: oklch(52.2% 0.080 280.6);
Tailwind
colors: {
custom: {
50: '#9090b6',
500: '#616497',
950: '#000000',
},
}SCSS
$custom: #616497; $custom-light: #9090b6; $custom-dark: #000000;
JSON
{
"hex": "#616497",
"rgb": {
"r": 97,
"g": 100,
"b": 151
},
"hsl": {
"h": 236.667,
"s": 21.774,
"l": 48.627
},
"oklch": {
"l": 0.52227,
"c": 0.08014,
"h": 280.6
},
"luminance": 0.1389
}Semantic roles & 50–950 ramp
primary
#616497
secondary
#B7B59D
accent
#BA69BE
background
#F8F8FB
surface
#F0F0F6
border
#CBCBD0
text
#0D0C11
muted
#7D7D80