Back to palettes

Palette

Smoked Glass Hues

Sophisticated, understated tones resembling the subtle, shifting shades of smoked glass.

neutralminimal5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1F2B37#44505B#6D7983#A1ABAE#CDD4D7

Palette guide

How to use Smoked Glass Hues

Overview

The Smoked Glass Hues palette offers a sophisticated and understated range of cool grays with subtle blue undertones, mirroring the sleekness of smoked glass. From the deep, grounding #1F2B37 to the lighter, ethereal #CDD4D7, including versatile mid-tones like #44505B and #6D7983, this collection is perfect for projects seeking a modern, minimalist, or industrial aesthetic. Designers can use these shades to create clean, professional interfaces or elegant, calming environments. Developers will find them highly adaptable for UI design, ensuring a contemporary and cohesive look across various digital platforms, particularly for dark mode adaptations or corporate branding.

Best used for

  • Modern corporate websites
  • Tech and software interfaces
  • Industrial design presentations
  • Minimalist branding
  • Automotive or luxury product sites
  • Data visualization dashboards

Suggested color roles

primary

#1F2B37 - A strong, deep blue-gray, excellent for main headers, navigation, or as a sophisticated background for dark themes.

secondary

#44505B - Use for subheadings, sidebars, or content panels to add depth while maintaining a sleek, professional look.

accent

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

background

#CDD4D7 - A very light, crisp background, ideal for main content areas, providing clarity and an airy feel.

text

#1F2B37 - Provides excellent contrast on lighter backgrounds like #CDD4D7, ensuring readability for body text and titles.

Accessibility notes

  • Ensure #6D7983 text has sufficient contrast against lighter backgrounds like #A1ABAE or #CDD4D7.
  • The darkest shades, #1F2B37 and #44505B, provide excellent contrast for white or very light text.
  • Avoid using #A1ABAE for small text on #CDD4D7 as contrast will be insufficient.
  • Test interactive elements to ensure their color states meet WCAG contrast guidelines for usability.

Recommended combinations

Modern Foundation

A classic dark header/text on light background with a mid-tone for secondary elements.

#1F2B37 · #CDD4D7 · #44505B

UI Clarity

Ideal for clean user interfaces, providing clear separation and a professional appearance.

#CDD4D7 · #1F2B37 · #6D7983

Industrial Edge

Creates a layered, sleek look for dashboards or technical documentation.

#44505B · #A1ABAE · #1F2B37

CSS variables

:root {
  --smoked-glass-hues-1: #1F2B37;
  --smoked-glass-hues-2: #44505B;
  --smoked-glass-hues-3: #6D7983;
  --smoked-glass-hues-4: #A1ABAE;
  --smoked-glass-hues-5: #CDD4D7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoked-glass-hues": {
        1: "#1F2B37",
        2: "#44505B",
        3: "#6D7983",
        4: "#A1ABAE",
        5: "#CDD4D7",
      }
    }
  }
}

Related searches

cool grey color schememodern minimalist paletteindustrial web design colorssophisticated UI themesmoked glass aesthetic

Palette colors

Hex values

Color 1#1F2B37
·
Color 2#44505B
·
Color 3#6D7983
·
Color 4#A1ABAE
·
Color 5#CDD4D7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.2:1AA18
6.1:1AA
9.6:1AAA
2
1.7:1Fail
1.9:1Fail
3.5:1AA18
5.5:1AA
3
3.2:1AA18
1.9:1Fail
1.9:1Fail
3:1Fail
4
6.1:1AA
3.5:1AA18
1.9:1Fail
1.6:1Fail
5
9.6:1AAA
5.5:1AA
3:1Fail
1.6:1Fail

Similar palettes

More like Smoked Glass Hues

View all neutral
Concrete Grid Lines
Concrete Loft Living
Industrial Loft Concrete
Industrial Loft Edge
Urban Concrete Grays
Urban Loft Echo