What is the hex code for Slate Gray?

Slate Gray is #708090. In CSS the keyword slategray, the hex #708090, rgb(112, 128, 144) and hsl(210, 13%, 50%) all paint the same color. The keyword slategrey resolves to the same color.

What is the opposite of Slate Gray on the color wheel?

The opposite (complementary) color is #908070, the same saturation and lightness rotated 180° around the HSL wheel. Complementary pairs give the strongest contrast, which is why the complement should be used sparingly rather than at equal weight.

Can I use Slate Gray for text?

Slate Gray as text on white has a contrast ratio of 4.05:1, which fails WCAG AA for body text (4.5:1) but passes for large text and UI components (3:1). On black it is 5.18:1, which passes for body text. Use it as text on dark surfaces, or as a fill with dark text on top.

CSS color names · Grays

Slate Gray color: hex #708090, RGB and HSL

Slate Gray is the CSS keyword slategray (also slategrey), hex #708090, rgb(112, 128, 144), hsl(210, 13%, 50%). It is a medium, soft blue in the grays family. Below: the colors that go with it, its tints and shades, how it reads as text, and a complete interface palette built from it.

CSS name: slategray, slategrey
Hex: #708090
RGB: rgb(112, 128, 144)
HSL: hsl(210, 13%, 50%)
On white: 4.05:1 — large text and UI only (3:1)
On black: 5.18:1 — passes AA for body text

.example {
  color: slategray;          /* keyword */
  color: #708090;          /* hex */
  color: rgb(112, 128, 144); /* rgb */
  color: hsl(210, 13%, 50%); /* hsl */
}

What colors go with slate gray

Each match keeps slate gray's saturation and lightness and rotates only the hue, so the relationship is the wheel's and nothing else. Any of these can be an accent beside slate gray as the primary; the harmony guides explain which rule suits which interface.

Complementary

The opposite hue, 180° away — the strongest contrast, best kept to one accent per screen.

#908070

Split-complementary

The two neighbors of the complement, at 150° and 210° — most of the contrast with less tension, and two accents instead of one.

#907070

#909070

Triadic

Two hues at 120° and 240° — three evenly spaced signals, the scheme charts and category colors want.

#907080

#809070

Analogous

The neighbors at −30° and +30° — calm and cohesive, with emphasis coming from weight and size rather than hue.

#709090

#707090

Tints and shades of slate gray

Tints add lightness toward white; shades remove it toward black. The hue and saturation stay fixed, so every step still reads as slate gray — these are the hover, pressed, disabled and surface variants a single brand color needs.

Tints (lighter)

#8895a3

#a0aab5

#b8c0c8

#cfd5da

#e7eaed

Shades (darker)

#5d6b78

#4b5560

#384048

#252b30

#131518

A UI color palette built from slate gray

The eight semantic roles an interface actually uses, derived from slate gray as the primary with the split-complementary rule: secondary and accent rotate around the wheel, and the five neutrals take the hue at lightness steps tuned for light and dark mode. This is the same derivation the palette generator runs — open it there to change the rule, drag the anchors, or export the set as CSS variables.

Light mode

primary: #708090
secondary: #907070
accent: #909070
background: #fcfcfd
surface: #f4f5f5
text: #181a1b
muted: #6d7379
border: #e4e6e7

Dark mode

primary: #7e8c9b
secondary: #9b7e7e
accent: #9b9b7e
background: #131416
surface: #1d1f21
text: #f4f5f5
muted: #a2a6a9
border: #35383c

Open slate gray in the palette generator

Using slate gray in an interface

Grays are text, borders and disabled states. The slate grays are the useful ones: a whisper of blue keeps them from looking like dirt against a colored primary. A semantic palette tints its grays toward the brand hue for the same reason. Whichever role slate gray takes, define it once as a token rather than repeating the keyword: the semantic palette guide covers the eight roles, and the guides to complementary, triadic and the other color schemes explain how to weight the matches above.

What is the hex code for Slate Gray?: Slate Gray is #708090. In CSS the keyword slategray, the hex #708090, rgb(112, 128, 144) and hsl(210, 13%, 50%) all paint the same color. The keyword slategrey resolves to the same color.
What colors go with Slate Gray?: Its complement is #908070, the split-complementary pair is #907070 and #909070, the triadic partners are #907080 and #809070, and the analogous neighbors are #709090 and #707090. In an interface, use Slate Gray for most colored elements and one of these for a single accent, at roughly an 80/20 split.
What is the opposite of Slate Gray on the color wheel?: The opposite (complementary) color is #908070, the same saturation and lightness rotated 180° around the HSL wheel. Complementary pairs give the strongest contrast, which is why the complement should be used sparingly rather than at equal weight.
Can I use Slate Gray for text?: Slate Gray as text on white has a contrast ratio of 4.05:1, which fails WCAG AA for body text (4.5:1) but passes for large text and UI components (3:1). On black it is 5.18:1, which passes for body text. Use it as text on dark surfaces, or as a fill with dark text on top.