Home /Compare /Charcoal vs Slate Grey

Charcoal vs Slate Grey: What's the Difference?

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

Charcoal#36454F
Slate Grey#708090
#36454FBlended: #536370#708090
ShareSave to PinterestTweet

Charcoal vs Slate Grey: Key Differences at a Glance

Aspect Charcoal Slate Grey
BrightnessDark (L=26%) — rich, serious, substantialMedium (L=50%) — balanced, versatile
SaturationMuted (S=19%) — subdued, sophisticatedNear-neutral (S=13%) — desaturated and restrained
Hue familyBlueBlue
TemperatureCoolCool
Hex code#36454F#708090
RGB54, 69, 79112, 128, 144

Can you use Charcoal and Slate Grey together?

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

How to Tell Charcoal and Slate Grey Apart

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

Charcoal or Slate Grey: 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 Grey 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 Grey only reaches 4.05:1 and risks failing AA at small body sizes.

⬡Fashion & apparel
PickSlate Grey

Slate Grey 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 Grey

Slate Grey 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 Charcoal vs Slate Grey in Design

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

Charcoal and Slate Grey Hex Codes, RGB & HSL

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 Grey#708090

Slate Grey (#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 and Slate Grey 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
Charcoal text on white
9.9:1AAA
Sample text preview
Charcoal text on black
2.12:1Fail
Sample text preview
Slate Grey text on white
4.05:1AA Large
Sample text preview
Slate Grey text on black
5.18:1AA
Sample text preview
Charcoal text on Slate Grey
2.44:1Fail
Sample text preview
Slate Grey text on Charcoal
2.44:1Fail

Explore Charcoal and Slate Grey individually

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

Charcoal color page#36454F · shades, tints, pairingsSlate Grey color page#708090 · shades, tints, pairings

More Charcoal and Slate Grey Comparisons

GreyvsCharcoalSlate GreyvsPewterGrayvsCharcoalCharcoalvsNavySlate GreyvsGunmetalCharcoalvsTealSlate GreyvsSky BlueNavyvsCharcoalBaby BluevsSlate GreyCharcoalvsGoldNavy BluevsSlate GreyCharcoalvsSage

Charcoal vs Slate Grey FAQ

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