#97ABB5#97ABB5
#97ABB5 is a light, muted cyan. Relative luminance 0.390; OKLCH L 72.9% C 0.027 H 229.3°. Best body text is #000000 at 8.81:1 contrast (WCAG AA passes).
Color values
| HEX | #97ABB5 |
|---|---|
| RGB | rgb(151, 171, 181) |
| HSL | hsl(200, 17%, 65%) |
| HSV | hsv(200, 17%, 71%) |
| CMYK | cmyk(16.6%, 5.5%, 0%, 29%) |
| CIE-LAB | lab(68.78, -4.80, -7.47) |
| CIE-LCH | lch(68.78, 8.88, 237.28°) |
| OKLab | oklab(72.9% -0.0174 -0.0202) |
| OKLCH | oklch(72.9% 0.027 229.3) |
| XYZ | xyz(35.6638, 39.0405, 49.3637) |
| Luminance | 0.3904 (WCAG relative) |
| Temperature | cool |
| Family | cyan |
Closest named colors
Cool Gray
#9AA7B0
ΔE00 2.64
Cool Grey
#95A3A6
ΔE00 4.01
Bluegrey
#85A3B2
ΔE00 4.15
Bluey Grey
#89A0B0
ΔE00 4.21
Light Grey Blue
#9DBCD4
ΔE00 6.93
Greyblue
#77A1B5
ΔE00 7.03
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#97ABB5 #B5A197
analogous
#97B5B0 #97ABB5 #979CB5
triadic
#97ABB5 #B597AB #ABB597
tetradic
#97ABB5 #B097B5 #B5A197 #9CB597
square
#97ABB5 #B097B5 #B5A197 #9CB597
split-complementary
#97ABB5 #B5979C #B5B097
monochromatic
#576F7A #738E9C #97ABB5 #BBC8CE #DFE5E8
Accessibility & contrast
On white
2.38
#97ABB5 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.81
#97ABB5 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #97ABB5
8.81:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##97ABB5 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##97ABB5 | 1.00 | 2.38 | 8.81 | 8.81 |
| #FFFFFF | 2.38 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.81 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.81 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A6AAB6
Deuteranopia (green-blind)
#A1A6B5
Tritanopia (blue-blind)
#8FAEAE
Achromatopsia (no color)
#A8A8A8
Design tokens & code
CSS
--color: #97abb5; /* rgb */ color: rgb(151, 171, 181); /* oklch */ color: oklch(72.9% 0.027 229.3);
Tailwind
colors: {
custom: {
50: '#b6c4cb',
500: '#97abb5',
950: '#000000',
},
}SCSS
$custom: #97abb5; $custom-light: #b6c4cb; $custom-dark: #000000;
JSON
{
"hex": "#97abb5",
"rgb": {
"r": 151,
"g": 171,
"b": 181
},
"hsl": {
"h": 200,
"s": 16.854,
"l": 65.098
},
"oklch": {
"l": 0.72899,
"c": 0.02664,
"h": 229.3
},
"luminance": 0.39041
}Semantic roles & 50–950 ramp
primary
#97ABB5
secondary
#D9D2CF
accent
#654A9B
background
#FBFCFC
surface
#F6F8F8
border
#D0D1D1
text
#111213
muted
#808182