Skip to content

Slate #708090

Stone that learned to be a design system.

RGB
112, 128, 144
HSL
210°, 13%, 50%
CMYK
22, 11, 0, 44
Luminance
0.2090

About Slate

Slate, #708090, is gray with a drop of blue — named for the fine-grained roofing stone. In modern interface design “slate” outgrew the rock: it is the name of the most-used neutral scale on the web, the blue-grays that most dark modes and dashboards are built from.

History

Slate roofed Europe, floored billiard tables and carried a century of schoolwork — the blank slate and the chalkboard are the same rock. Tailwind’s slate scale then made the word a developer default: this hub’s dark canvases are slate through and through.

Psychology

Slate reads precise, modern and unemotional in the best way — gray with intellect. Its blue undertone keeps interfaces cool and technical where warm grays go cozy.

In design

Slate is the professional’s neutral scale: #0f172a for canvases, #334155 for surfaces, #64748b for muted text, #94a3b8 for placeholders. CSS slategray #708090 itself passes AA only for large text — body slate wants #475569. Every accent color reads clean against it.

In culture

Clean slates, slated for release, slate roofs outliving their houses: the rock means both permanence and fresh starts — a paradox designers exploit daily.

Brands that own slate

Shades of slate

Every format

HEX#708090
RGBrgb(112, 128, 144)
HSLhsl(210, 13%, 50%)
CMYKcmyk(22%, 11%, 0%, 44%)
LABlab(52.8 -2.1 -10.6)
LCHlch(52.8 10.8 258.6)
OKLCHoklch(0.593 0.031 248.3)

Copy-ready code

/* CSS */
color: #708090;
background-color: #708090;
/* Tailwind (arbitrary) */
class="text-[#708090] bg-[#708090]"
/* SCSS */
$brand: #708090;
/* SwiftUI */
Color(red: 0.439, green: 0.502, blue: 0.565)
/* Android */
Color.parseColor("#708090")

Accessibility — WCAG contrast

Aa
#708090 on white: 4.05:1
AA ✗ fail · AA-large · AAA
Aa
#708090 on black: 5.18:1
AA ✓ pass · AA-large · AAA
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red43.9%
Green50.2%
Blue56.5%

CMYK percentages

Cyan22.2%
Magenta11.1%
Yellow0.0%
Key (black)43.5%

Color previews

#708090 text on a black background

contrast 5.18:1

Card sample

#708090 text on a white background

contrast 4.05:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #708090;
Background color
Panel with #708090 background
background-color: #708090;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #708090;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(112, 128, 144, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(112, 128, 144, 0.45);
Border & gradient
Gradient panel
border: 3px solid #708090;
background: linear-gradient(135deg, #708090, #757090);

Monochromatic scale

Palettes built from #708090

Shades — darker

Tints — lighter

Hue & tone neighbors

Color harmonies

Nearest named colors

Slate, answered

What is the hex code for slate?

CSS slategray is #708090. The ubiquitous Tailwind slate scale runs #f8fafc → #0f172a, with #64748b as its midpoint.

Slate vs gray vs charcoal?

Slate is gray cooled with blue; pure gray is neutral; charcoal is gray darkened toward black. Interface “slate” usually means the whole blue-gray scale.

Which slate values are text-safe?

On white: #475569 (7.5:1) and darker pass comfortably; #708090 only clears large-text AA. On dark canvases, #94a3b8 and lighter carry muted copy.

Work with #708090 in the Color Lab