Back to palettes

Palette

Smoked Slate

A sophisticated blend of dark grays with subtle blue undertones, like aged slate touched by smoky mist.

darkminimal5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoked Slate 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 Smoked Slate.

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

Data visualization

#36454F#4F606A#667980#7F929A#A5B7BE

Palette guide

How to use Smoked Slate

Overview

The Smoked Slate palette offers a sophisticated blend of dark grays with subtle cool, blue undertones, reminiscent of aged slate touched by smoky mist. This collection ranges from the deep, grounding #36454F and #4F606A, through the versatile #667980 and #7F929A, to the lighter, ethereal #A5B7BE. It's perfectly suited for projects demanding a professional, minimalist, or contemporary aesthetic with a touch of understated elegance. Designers can use these shades to create refined digital interfaces, corporate branding, or sophisticated physical spaces. Developers will find these colors highly adaptable for UI design, particularly for dark mode applications or themes that require a cool, composed, and modern feel.

Best used for

  • High-tech company websites
  • Professional service branding
  • Modern architecture portfolios
  • Dark mode application themes
  • Luxury automotive marketing
  • Minimalist e-commerce platforms

Suggested color roles

primary

#36454F - A strong, deep blue-gray, ideal for main headers, navigation bars, or as a sophisticated background for dark themes.

secondary

#4F606A - Use for subheadings, footer sections, or large content blocks to add depth while maintaining a sleek appearance.

accent

#667980 - A versatile mid-tone for subtle highlights, borders, or interactive elements that require a muted accent.

background

#A5B7BE - A light, cool blue-gray, providing a clean and airy canvas for main content, ensuring good readability.

text

#36454F - Provides excellent contrast on lighter backgrounds like #A5B7BE, ensuring readability for body text and titles.

Accessibility notes

  • Ensure #667980 text has sufficient contrast against lighter backgrounds like #7F929A or #A5B7BE.
  • The darkest shades, #36454F and #4F606A, provide excellent contrast for white or very light text.
  • Avoid using #7F929A for small text on #A5B7BE as contrast will be insufficient.
  • Test interactive elements to ensure their color states meet WCAG contrast guidelines for usability.

Recommended combinations

Cool Foundation

A solid dark primary with a light background and a strong secondary for a professional look.

#36454F · #A5B7BE · #4F606A

UI Elegance

Creates a clean, elegant user interface with clear hierarchy and subtle accents.

#A5B7BE · #36454F · #667980

Layered Depth

Ideal for dashboards or complex layouts needing visual separation and depth.

#4F606A · #7F929A · #36454F

CSS variables

:root {
  --smoked-slate-1: #36454F;
  --smoked-slate-2: #4F606A;
  --smoked-slate-3: #667980;
  --smoked-slate-4: #7F929A;
  --smoked-slate-5: #A5B7BE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoked-slate": {
        1: "#36454F",
        2: "#4F606A",
        3: "#667980",
        4: "#7F929A",
        5: "#A5B7BE",
      }
    }
  }
}

Related searches

cool grey blue palettesophisticated dark thememodern slate colorsminimalist UI designprofessional web colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#4F606A
·
Color 3#667980
·
Color 4#7F929A
·
Color 5#A5B7BE
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3.1:1AA18
4.8:1AA
2
1.5:1Fail
1.4:1Fail
2:1Fail
3.1:1AA18
3
2.2:1Fail
1.4:1Fail
1.4:1Fail
2.2:1Fail
4
3.1:1AA18
2:1Fail
1.4:1Fail
1.6:1Fail
5
4.8:1AA
3.1:1AA18
2.2:1Fail
1.6:1Fail

Similar palettes

More like Smoked Slate

View all dark
Anthracite Edge
Stellar Dust Motes
Volcanic Ash Fields
Volcanic Ash Fields
Volcanic Basalt Texture
Brutalist Concrete Form