A grayish medium blue, black text passes AA
What color is slategray?
The CSS named color slategray is #708090, or rgb(112 128 144): a grayish medium blue in plain words. Black text on it reaches 5.18:1, passing WCAG AA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | slategray, also slategrey |
| Hex | #708090 |
| RGB | rgb(112 128 144) |
| HSL | hsl(210 13% 50%) |
| OKLCH | oklch(59.3% 0.031 248.3) |
| Nearest Tailwind color | mist-500 #67787c, 0.037 away in OKLab |
| White text | 4.05:1: AA fails, AAA fails, large text passes |
| Black text | 5.18:1: AA passes, AAA fails, large text passes |
About slategray
A grayish medium blue is the plain description of slategray: OKLCH lightness 59.3%, chroma 0.031, hue 248.3 degrees. Its other spelling, slategrey, is the same color: the named color table of CSS lists both.
Its lightness is 50% in HSL and 59.3% in OKLCH, 9 points apart; only the second tracks how light it looks. The closest CSS named color is lightslategray (#778899), 0.027 away in OKLab: near, and still a visible step from it side by side.
Black text on slategray reaches 5.18:1, enough for WCAG AA body text but short of AAA's 7:1; white text gets 4.05:1. Its neighbors in the hue-sorted list of names are lightslategray and steelblue.
The closest Tailwind 4.3.3 color is mist-500, 0.037 away in OKLab, so bg-mist-500 comes near; bg-[#708090] gives the color itself.
Tints and shades
- #e6e9ec
- #cdd3d9
- #b5bec6
- #9da9b4
- #8694a2
- #708090
- #566370
- #3e4851
- #272e34
- #12161a
- #020304
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #708090
- #ffedcd
- #834500
- #85c5d9
- #232345
Recolor's generator, with slategray locked as swatch 1 and the seed taken from its hex, drew a split-complementary palette, built on the two hues beside its opposite: #ffedcd, #834500, #85c5d9, #232345. Open it in Recolor.
Using slategray
As a text color, slategray on a black page gives the same 5.18:1.
.notice {
background-color: slategray; /* #708090 */
color: black; /* 5.18:1 */
}Common questions
Does white text pass WCAG AA on slategray?
No. White text measures 4.05:1 on slategray, under AA's 4.5:1; black text measures 5.18:1 and passes.
Can slategray be written in OKLCH?
Yes: oklch(59.3% 0.031 248.3), computed from #708090. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to slategray?
Yes: lightslategray (#778899) is the nearest, 0.027 away in OKLab, then gray at 0.032.