#B2A8B0#B2A8B0
#B2A8B0 is a light, near-neutral grey. Relative luminance 0.406; OKLCH L 74.2% C 0.016 H 332.3°. Best body text is #000000 at 9.12:1 contrast (WCAG AA passes).
Color values
| HEX | #B2A8B0 |
|---|---|
| RGB | rgb(178, 168, 176) |
| HSL | hsl(312, 6%, 68%) |
| HSV | hsv(312, 6%, 70%) |
| CMYK | cmyk(0%, 5.6%, 1.1%, 30.2%) |
| CIE-LAB | lab(69.90, 5.06, -2.82) |
| CIE-LCH | lch(69.90, 5.79, 330.87°) |
| OKLab | oklab(74.24% 0.0142 -0.0074) |
| OKLCH | oklch(74.24% 0.016 332.3) |
| XYZ | xyz(40.1981, 40.6051, 46.7858) |
| Luminance | 0.4061 (WCAG relative) |
| Temperature | neutral |
| Family | grey |
Closest named colors
Dark Gray
#A9A9A9
ΔE00 6.87
Dove Gray
#B6B8BD
ΔE00 7.28
Pinkish Grey
#C8ACA9
ΔE00 8.15
Silver
#C0C0C0
ΔE00 8.96
Thistle
#D8BFD8
ΔE00 11.07
Cool Gray
#9AA7B0
ΔE00 11.71
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#B2A8B0 #A8B2AA
analogous
#AFA8B2 #B2A8B0 #B2A8AB
triadic
#B2A8B0 #B0B2A8 #A8B0B2
tetradic
#B2A8B0 #B2AFA8 #A8B2AA #A8ABB2
square
#B2A8B0 #B2AFA8 #A8B2AA #A8ABB2
split-complementary
#B2A8B0 #ABB2A8 #A8B2AF
monochromatic
#776974 #958893 #B2A8B0 #CFC8CD #EBE9EB
Accessibility & contrast
On white
2.30
#B2A8B0 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.12
#B2A8B0 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #B2A8B0
9.12:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##B2A8B0 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##B2A8B0 | 1.00 | 2.30 | 9.12 | 9.12 |
| #FFFFFF | 2.30 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.12 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.12 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A8AAB0
Deuteranopia (green-blind)
#AAABB0
Tritanopia (blue-blind)
#B3A8AB
Achromatopsia (no color)
#ABABAB
Design tokens & code
CSS
--color: #b2a8b0; /* rgb */ color: rgb(178, 168, 176); /* oklch */ color: oklch(74.2% 0.016 332.3);
Tailwind
colors: {
custom: {
50: '#c9c1c7',
500: '#b2a8b0',
950: '#000000',
},
}SCSS
$custom: #b2a8b0; $custom-light: #c9c1c7; $custom-dark: #000000;
JSON
{
"hex": "#b2a8b0",
"rgb": {
"r": 178,
"g": 168,
"b": 176
},
"hsl": {
"h": 312,
"s": 6.098,
"l": 67.843
},
"oklch": {
"l": 0.74241,
"c": 0.01601,
"h": 332.3
},
"luminance": 0.40605
}Semantic roles & 50–950 ramp
primary
#B2A8B0
secondary
#D9DCDA
accent
#906156
background
#FCFBFC
surface
#F8F7F8
border
#D1D0D1
text
#131213
muted
#828182