Back to palettes

Palette

Charcoal Depths

Deep, mysterious greys and muted blues combine for an elegant and sophisticated feel.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Charcoal Depths reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Charcoal Depths.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#2C3E50#34495E#7F8C8D#95A5A6#1C2833

Palette guide

How to use Charcoal Depths

Overview

The Charcoal Depths palette offers a profound and elegant selection of deep greys and muted blues, perfect for projects requiring a sophisticated, modern, or industrial aesthetic. Dominated by rich, dark tones like #1C2833 and #2C3E50, it subtly incorporates a softer blue-grey #34495E, and lighter, airy greys such as #7F8C8D and #95A5A6. This collection is ideal for creating interfaces, branding, or digital art that exudes mystery and professionalism. Developers and designers will find it highly effective for establishing a calm, authoritative presence, with enough variation to provide visual hierarchy and interest without overwhelming the user.

Best used for

  • High-tech company websites and applications
  • Modern architectural portfolios
  • Luxury automotive branding
  • Industrial design concepts
  • Professional services marketing materials
  • Dark mode UI themes

Suggested color roles

primary

Designate #1C2833 as the foundational color for main backgrounds, navigation bars, and primary brand elements.

secondary

Employ #2C3E50 for major content blocks, prominent headers, or as a secondary brand color.

accent

Use #7F8C8D for subtle highlights, interactive elements, or icons to provide gentle contrast on darker tones.

background

Apply #1C2833 or #2C3E50 for a deep, sophisticated background, or #95A5A6 for lighter section breaks.

text

For optimal readability on dark backgrounds, use #95A5A6 or #7F8C8D. For light backgrounds, use #1C2833.

Accessibility notes

  • Ensure #95A5A6 text on #1C2833 background meets WCAG contrast requirements for body text.
  • Avoid using #7F8C8D on #95A5A6 for small text to prevent low contrast issues.
  • Consider using a slightly lighter color like white for essential text on #1C2833 if #95A5A6 doesn't pass contrast checks for all text sizes.
  • Use #2C3E50 for headings on #95A5A6 backgrounds to provide strong visual hierarchy and readability.

Recommended combinations

Deep Authority

Perfect for primary content sections: dark background, light text, and a slightly lighter dark for subheadings.

#1C2833 · #95A5A6 · #2C3E50

Subtle Layers

Create depth in UI elements or data visualizations with these closely related tones.

#2C3E50 · #34495E · #7F8C8D

Modern Contrast

Use #1C2833 for bold text on a #95A5A6 background, with #7F8C8D for secondary elements or links.

#95A5A6 · #1C2833 · #7F8C8D

CSS variables

:root {
  --charcoal-depths-1: #2C3E50;
  --charcoal-depths-2: #34495E;
  --charcoal-depths-3: #7F8C8D;
  --charcoal-depths-4: #95A5A6;
  --charcoal-depths-5: #1C2833;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "charcoal-depths": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#7F8C8D",
        4: "#95A5A6",
        5: "#1C2833",
      }
    }
  }
}

Related searches

dark blue grey palettesophisticated charcoal colorsmodern industrial color schemeelegant dark UI colorsminimalist professional palette

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#34495E
·
Color 3#7F8C8D
·
Color 4#95A5A6
·
Color 5#1C2833
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
3.2:1AA18
4.3:1AA18
1.4:1Fail
2
1.2:1Fail
2.7:1Fail
3.6:1AA18
1.6:1Fail
3
3.2:1AA18
2.7:1Fail
1.4:1Fail
4.3:1AA18
4
4.3:1AA18
3.6:1AA18
1.4:1Fail
5.9:1AA
5
1.4:1Fail
1.6:1Fail
4.3:1AA18
5.9:1AA

Similar palettes

More like Charcoal Depths

View all dark
Industrial Noir Canvas
Asteroid Belt Shadow
Basalt Edge
Black Shard Reflection
Cosmic Void Depths
Deep Volcanic Glass