#8A8A8E#8A8A8E
#8A8A8E is a light, near-neutral grey. Relative luminance 0.255; OKLCH L 63.5% C 0.006 H 286.2°. Best body text is #000000 at 6.11:1 contrast (WCAG AA passes).
Color values
| HEX | #8A8A8E |
|---|---|
| RGB | rgb(138, 138, 142) |
| HSL | hsl(240, 2%, 55%) |
| HSV | hsv(240, 3%, 56%) |
| CMYK | cmyk(2.8%, 2.8%, 0%, 44.3%) |
| CIE-LAB | lab(57.59, 0.79, -2.13) |
| CIE-LCH | lch(57.59, 2.27, 290.44°) |
| OKLab | oklab(63.47% 0.0017 -0.0057) |
| OKLCH | oklch(63.47% 0.006 286.2) |
| XYZ | xyz(24.4513, 25.5332, 29.2262) |
| Luminance | 0.2553 (WCAG relative) |
| Temperature | neutral |
| Family | grey |
Closest named colors
Gray
#808080
ΔE00 4.42
Pewter
#899397
ΔE00 5.56
Grey
#929591
ΔE00 6.18
Medium Grey
#7D7F7C
ΔE00 6.29
Warm Grey
#978A84
ΔE00 7.37
Lightslategray
#778899
ΔE00 8.18
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#8A8A8E #8E8E8A
analogous
#8A8C8E #8A8A8E #8C8A8E
triadic
#8A8A8E #8E8A8A #8A8E8A
tetradic
#8A8A8E #8E8A8C #8E8E8A #8A8E8C
square
#8A8A8E #8E8A8C #8E8E8A #8A8E8C
split-complementary
#8A8A8E #8E8C8A #8C8E8A
monochromatic
#4D4D50 #6B6B6F #8A8A8E #A9A9AC #C8C8CA
Accessibility & contrast
On white
3.44
#8A8A8E on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
6.11
#8A8A8E on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #8A8A8E
6.11:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##8A8A8E | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##8A8A8E | 1.00 | 3.44 | 6.11 | 6.11 |
| #FFFFFF | 3.44 | 1.00 | 21.00 | 21.00 |
| #000000 | 6.11 | 21.00 | 1.00 | 1.00 |
| ##000000 | 6.11 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#898A8E
Deuteranopia (green-blind)
#898A8E
Tritanopia (blue-blind)
#898B8B
Achromatopsia (no color)
#8A8A8A
Design tokens & code
CSS
--color: #8a8a8e; /* rgb */ color: rgb(138, 138, 142); /* oklch */ color: oklch(63.5% 0.006 286.2);
Tailwind
colors: {
custom: {
50: '#acacaf',
500: '#8a8a8e',
950: '#000000',
},
}SCSS
$custom: #8a8a8e; $custom-light: #acacaf; $custom-dark: #000000;
JSON
{
"hex": "#8a8a8e",
"rgb": {
"r": 138,
"g": 138,
"b": 142
},
"hsl": {
"h": 240,
"s": 1.739,
"l": 54.902
},
"oklch": {
"l": 0.6347,
"c": 0.00591,
"h": 286.2
},
"luminance": 0.25533
}Semantic roles & 50–950 ramp
primary
#8A8A8E
secondary
#BBBBB9
accent
#AB7DAB
background
#FAFAFA
surface
#F4F4F4
border
#CECECE
text
#101010
muted
#7F7F7F