Color Directory
Slate Gray
A grey carrying enough blue to read as cool rather than neutral.
#708090
- HEX
- #708090
- RGB
- rgb(112, 128, 144)
- HSL
- hsl(210, 13%, 50%)
Check Slate Gray
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #708090 in the sRGB colour space.
About this entry
What it is
A grey carrying enough blue to read as cool rather than neutral.
Secondary text, dashboard chrome and understated interfaces.
Copy & use
How to copy and use slate gray
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Secondary text, dashboard chrome and understated interfaces.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from slate gray
Each step is mixed toward white or black from #708090 in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#C6CCD3
rgb(198, 204, 211)
Lighter 30%
#9BA6B1
rgb(155, 166, 177)
- Base
Base
#708090
rgb(112, 128, 144)
Darker 30%
#4E5A65
rgb(78, 90, 101)
Darker 60%
#2D333A
rgb(45, 51, 58)
Name & pairing
Where slate gray comes from
Named after the rock, which is grey with a blue cast from the minerals in it. That blue is the reason it reads as cool rather than neutral, and why it never looks quite like plain grey.
What to put beside it
Excellent for secondary text and interface chrome. Because it is already cool, warm accents sit on it particularly well.
Common questions
Using slate gray
What is slate gray?
A grey carrying enough blue to read as cool rather than neutral. Secondary text, dashboard chrome and understated interfaces.
What are the colour values for Slate Gray?
Slate Gray is HEX #708090, RGB rgb(112, 128, 144), HSL hsl(210, 13%, 50%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will slate gray work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise slate gray after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing