#A3ABC2#A3ABC2
#A3ABC2 is a light, muted blue. Relative luminance 0.408; OKLCH L 74.2% C 0.034 H 270.3°. Best body text is #000000 at 9.16:1 contrast (WCAG AA passes).
Color values
| HEX | #A3ABC2 |
|---|---|
| RGB | rgb(163, 171, 194) |
| HSL | hsl(225, 20%, 70%) |
| HSV | hsv(225, 16%, 76%) |
| CMYK | cmyk(16%, 11.9%, 0%, 23.9%) |
| CIE-LAB | lab(70.04, 1.96, -12.68) |
| CIE-LCH | lch(70.04, 12.83, 278.77°) |
| OKLab | oklab(74.24% 0.0002 -0.0343) |
| OKLCH | oklch(74.24% 0.034 270.3) |
| XYZ | xyz(39.4025, 40.8068, 56.8290) |
| Luminance | 0.4081 (WCAG relative) |
| Temperature | cool |
| Family | blue |
Closest named colors
Lightsteelblue
#B0C4DE
ΔE00 7.70
Cool Gray
#9AA7B0
ΔE00 7.72
Cloudy Blue
#ACC2D9
ΔE00 7.99
Dove Gray
#B6B8BD
ΔE00 8.34
Light Blue Grey
#B7C9E2
ΔE00 8.49
Bluey Grey
#89A0B0
ΔE00 9.01
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#A3ABC2 #C2BAA3
analogous
#A3BAC2 #A3ABC2 #ABA3C2
triadic
#A3ABC2 #C2A3AB #ABC2A3
tetradic
#A3ABC2 #C2A3BA #C2BAA3 #A3C2AB
square
#A3ABC2 #C2A3BA #C2BAA3 #A3C2AB
split-complementary
#A3ABC2 #C2ABA3 #BAC2A3
monochromatic
#5E6A8D #7E89AA #A3ABC2 #C8CDDA #EDEEF3
Accessibility & contrast
On white
2.29
#A3ABC2 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.16
#A3ABC2 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #A3ABC2
9.16:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##A3ABC2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##A3ABC2 | 1.00 | 2.29 | 9.16 | 9.16 |
| #FFFFFF | 2.29 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.16 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.16 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#A5ADC3
Deuteranopia (green-blind)
#A2AAC1
Tritanopia (blue-blind)
#9CAFB2
Achromatopsia (no color)
#ABABAB
Design tokens & code
CSS
--color: #a3abc2; /* rgb */ color: rgb(163, 171, 194); /* oklch */ color: oklch(74.2% 0.034 270.3);
Tailwind
colors: {
custom: {
50: '#bec4d4',
500: '#a3abc2',
950: '#000000',
},
}SCSS
$custom: #a3abc2; $custom-light: #bec4d4; $custom-dark: #000000;
JSON
{
"hex": "#a3abc2",
"rgb": {
"r": 163,
"g": 171,
"b": 194
},
"hsl": {
"h": 224.516,
"s": 20.261,
"l": 70
},
"oklch": {
"l": 0.74238,
"c": 0.03434,
"h": 270.3
},
"luminance": 0.40807
}Semantic roles & 50–950 ramp
primary
#A3ABC2
secondary
#E5E2DC
accent
#88479F
background
#FBFCFD
surface
#F6F8FA
border
#D0D1D3
text
#121214
muted
#818183