Home /Compare /Slate Gray vs Charcoal

Slate Gray vs Charcoal: What's the Difference?

The main difference between Slate Gray and Charcoal is brightness and saturation: both are blue shades, but Slate Gray is lighter and Charcoal is more saturated. Slate Gray (#708090) has an HSL of 210°, 13%, 50%, whereas Charcoal (#36454F) sits at 204°, 19%, 26%.

Slate Gray#708090
Charcoal#36454F
#708090Blended: #536370#36454F
ShareSave to PinterestTweet

Slate Gray vs Charcoal: Key Differences at a Glance

Aspect Slate Gray Charcoal
BrightnessMedium (L=50%) — balanced, versatileDark (L=26%) — rich, serious, substantial
SaturationNear-neutral (S=13%) — desaturated and restrainedMuted (S=19%) — subdued, sophisticated
Hue familyBlueBlue
TemperatureCoolCool
Hex code#708090#36454F
RGB112, 128, 14454, 69, 79

Can you use Slate Gray and Charcoal together?

Charcoal text on Slate Gray
Slate Gray text on Charcoal
Contrast Ratio:2.44:1Insufficient Contrast

How to Tell Slate Gray and Charcoal Apart

  • ●Look at lightness first: Slate Gray is noticeably lighter.
  • ●Compare them on a white background to see true saturation, and on black to see true lightness.

Slate Gray or Charcoal: Which to Use and Where

Four real design scenarios, with the recommended pick based on hue, saturation, and WCAG contrast.

◆Branding & logos
PickCharcoal

Charcoal is more saturated (19% HSL vs 13%) so it reads as bolder and more memorable at logo scale, while Slate Gray can feel washed out when printed small.

▢Web UI & body text backgrounds
PickCharcoal

Charcoal hits a 9.90:1 WCAG contrast against white — safer for text-heavy interfaces — where Slate Gray only reaches 4.05:1 and risks failing AA at small body sizes.

⬡Fashion & apparel
PickSlate Gray

Slate Gray is a cool-leaning tone that flatters spring/summer collections and warmer skin undertones, while Charcoal leans cooler and is better suited to autumn/winter layering.

▣Interior design & walls
PickSlate Gray

Slate Gray is the more muted of the two (13% saturation) and sits more calmly on large wall surfaces, while Charcoal's higher chroma can overwhelm a room when used beyond accent pieces.

When to Use Slate Gray vs Charcoal in Design

Use Slate Gray for:
●Tech and corporate trust
●Finance and banking brands
●Links and primary buttons
●Medical and professional UI
●Calm dependable visuals
Use Charcoal for:
●Tech and corporate trust
●Finance and banking brands
●Links and primary buttons
●Medical and professional UI
●Calm dependable visuals

Slate Gray and Charcoal Hex Codes, RGB & HSL

Slate Gray#708090

Slate Gray (#708090) is a medium, near-neutral blue with a cool undertone — it feels balanced, versatile and desaturated and restrained.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints
Charcoal#36454F

Charcoal (#36454F) is a dark, muted blue with a cool undertone — it feels rich, serious, substantial and subdued, sophisticated.

HEX
RGB
HSL
HSV
CMYK
PANTONE
Shades
Tints

Slate Gray and Charcoal WCAG Contrast Ratios

Text legibility depends on the contrast ratio between foreground and background. WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1. Use these numbers to choose accessible combinations for your design.

Sample text preview
Slate Gray text on white
4.05:1AA Large
Sample text preview
Slate Gray text on black
5.18:1AA
Sample text preview
Charcoal text on white
9.9:1AAA
Sample text preview
Charcoal text on black
2.12:1Fail
Sample text preview
Slate Gray text on Charcoal
2.44:1Fail
Sample text preview
Charcoal text on Slate Gray
2.44:1Fail

Explore Slate Gray and Charcoal individually

Each color has a dedicated page with shades, tints, CSS name, pairings, and color psychology.

Charcoal color page#36454F · shades, tints, pairings

More Slate Gray and Charcoal Comparisons

GreyvsCharcoalSlate GrayvsSlate GreyGrayvsCharcoalCharcoalvsNavyCharcoalvsTealNavyvsCharcoalCharcoalvsGoldCharcoalvsSageCharcoalvsBlackBlackvsCharcoalCharcoalvsSlateCharcoalvsCoral

Slate Gray vs Charcoal FAQ

What is the difference between slate gray and charcoal?+
The main difference between Slate Gray and Charcoal is brightness and saturation: both are blue shades, but Slate Gray is lighter and Charcoal is more saturated. Slate Gray (#708090) has an HSL of 210°, 13%, 50%, whereas Charcoal (#36454F) sits at 204°, 19%, 26%.
Is slate gray darker than charcoal?+
No. Charcoal is the darker of the two at 26% lightness, while Slate Gray sits higher at 50%.
Are slate gray and charcoal the same color?+
No. Slate Gray is #708090 and Charcoal is #36454F. They differ by 6° in hue, 24% in lightness, and 6% in saturation.
Which is more saturated, slate gray or charcoal?+
Charcoal is more saturated. In HSL, Slate Gray has 13% saturation and Charcoal has 19% — Charcoal is the more vivid of the two, while Slate Gray reads as more muted.
Is slate gray warm or cool?+
Slate Gray (#708090) is a cool blue. Its hue sits at 210° on the color wheel, which places it in the cool range.
Is charcoal warm or cool?+
Charcoal (#36454F) is a cool blue. Its hue sits at 204° on the color wheel, which places it in the cool range.
Can you use slate gray and charcoal together?+
Yes. Both slate gray and charcoal are blue shades, so they pair naturally in a monochromatic palette. Use charcoal as the dominant color and slate gray as the accent or highlight.
What color family does slate gray belong to?+
Slate Gray belongs to the blue family. Its HSL is 210°, 13%, 50% — a cool tone within the broader blue group.
What is the hex code for slate gray?+
The hex code for Slate Gray is #708090. In RGB, that's rgb(112, 128, 144), and in HSL it's hsl(210, 13%, 50%).
What is the hex code for charcoal?+
The hex code for Charcoal is #36454F. In RGB, that's rgb(54, 69, 79), and in HSL it's hsl(204, 19%, 26%).