Slate Gray color guide
A mid grey with visible blue in it, which keeps it from looking muddy at medium sizes.
- Best for
- Secondary text and inactive states.
- Also known as
- Slate Grey
Accessibility
Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.
Colors that go with slate gray
Combinations that hold up in a real layout rather than only on the colour wheel.
Slate Gray color harmonies
Slate Gray shades and tints
The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.
Slate Gray FAQ
What is the hex code for slate gray?
Slate Gray is #708090. In other formats that is rgb(112, 128, 144), hsl(210, 13%, 50%), and approximately cmyk(22%, 11%, 0%, 44%) for print.
What colors go with slate gray?
White, Navy Blue, Amber all pair well with slate gray. Secondary text and inactive states.
Is slate gray accessible for text?
Not on white: slate gray reaches only 4.05:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.
Should text on slate gray be black or white?
Use black text. It gives the higher contrast ratio of the two against #708090.