Slate Gray

Hex #708090, rgb(112 128 144). A gray or black CSS named color.

Slate Gray#708090

Slate Gray color codes

Click any value to copy it.

HEX
RGB
HSL
HSV
HWB
CMYK
OKLCH
OKLab
Lab
LCH
CSS keyword

About Slate Gray

Slate Gray is a medium neutral gray with the hex code #708090. In RGB it is made of 112 red, 128 green and 144 blue; in HSL its hue is 210°, with 13% saturation and 50% lightness. Its perceptual lightness (OKLCH L) is 59.3%.

It is a CSS named color, so you can write "slategray" or "slategrey" anywhere CSS accepts a color. Against white it has a contrast ratio of 4.05:1 and against black 5.18:1, so black text reads better on it and passes WCAG AA for normal text.

Also written as Slate Grey: CSS treats both spellings as the same color.

Tints, shades and tones

Slate Gray mixed step by step with white, black and middle gray (#808080).

Tints (with white)

Shades (with black)

Tones (with gray)

Slate Gray 50-950 scale

A Tailwind-style scale built in OKLCH; the original color sits on the step with the closest lightness.

Colors that go with Slate Gray

Color harmonies rotate the hue in OKLCH and keep the lightness and chroma. Each color links to its closest named color.

Complementary

Analogous

Triadic

Split complementary

Tetradic

Square

Monochromatic

Contrast and readability

WCAG 2 contrast of Slate Gray with white and black. The readable text color on Slate Gray is black.

Slate Gray textSmall text on white

On white4.05:1

AA fail
AA Large pass
AAA fail
UI 3:1 pass

APCA Lc 68

Slate Gray textSmall text on black

On black5.18:1

AA pass
AA Large pass
AAA fail
UI 3:1 pass

APCA Lc -34

Black text on Slate Gray (#000000)

Test any pair in the contrast checker.

Color blindness preview

How Slate Gray appears with each type of color vision deficiency (simulated with the Machado model).

Protanopia#7A8091
Deuteranopia#767D90
Tritanopia#678485
Protanomaly#778091
Deuteranomaly#757E90
Tritanomaly#6D828B
Achromatopsia#7E7E7E

Colors similar to Slate Gray

The closest named colors by perceptual difference (OKLab).

Use Slate Gray in CSS and Tailwind

CSS

.slate-gray {
  color: slategray; /* #708090 */
  background-color: rgb(112 128 144);
  border-color: oklch(59.3% 0.031 248.3);
}

Tailwind CSS

/* Tailwind CSS v4: bg-slate-gray-500, text-slate-gray-700... */
@theme {
  --color-slate-gray-50: #F9FAFB;
  --color-slate-gray-100: #ECEFF2;
  --color-slate-gray-200: #D9DEE4;
  --color-slate-gray-300: #BCC6D0;
  --color-slate-gray-400: #98A6B5;
  --color-slate-gray-500: #8192A3;
  --color-slate-gray-600: #708090;
  --color-slate-gray-700: #596673;
  --color-slate-gray-800: #46515B;
  --color-slate-gray-900: #384149;
  --color-slate-gray-950: #12171C;
}

<!-- or the exact color, no config -->
<div class="bg-[#708090] text-[#000000]">…</div>