Back to palettes

Palette

Smoky Twilight Haze

Subtle shades of grey that mimic the soft, mysterious haze of a smoky evening twilight.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Smoky Twilight Haze 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 Smoky Twilight Haze.

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

Data visualization

#3D3E42#5A5C61#7B7D82#9EA0A5#2B2C2E

Palette guide

How to use Smoky Twilight Haze

Overview

The Smoky Twilight Haze palette offers a sophisticated range of cool greys, perfect for creating calm and mysterious digital experiences. With deep tones like #2B2C2E and #3D3E42, transitioning through mid-greys like #5A5C61 and #7B7D82, to the lighter #9EA0A5, this monochrome collection provides immense versatility for designers and developers. It evokes the soft, atmospheric quality of a hazy evening, making it ideal for backgrounds, UI elements, and typography. Its understated elegance ensures content remains the focal point while maintaining a cohesive, professional aesthetic across web and print.

Best used for

  • Sophisticated corporate branding and websites
  • Dark mode UI/UX designs for apps
  • Photography portfolios and art galleries
  • Architectural visualization and interior design concepts
  • Minimalist product packaging
  • High-end tech or luxury brand interfaces

Suggested color roles

primary

Use #2B2C2E as a deep foundational color for backgrounds or primary textual elements, providing a strong, elegant base.

secondary

Apply #3D3E42 for main content areas, section dividers, or secondary navigation, offering a slightly softer depth.

accent

Incorporate #5A5C61 for subtle interactive elements, hover states, or delicate outlines to add dimension without distraction.

background

Utilize #9EA0A5 for light, airy backgrounds or card surfaces, ensuring good contrast with darker text.

text

Pair dark backgrounds with white or a very light grey for readability, or use #2B2C2E for headlines on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #2B2C2E text and lighter backgrounds like #9EA0A5 (WCAG AA compliant).
  • Avoid pairing mid-tone greys like #5A5C61 and #7B7D82 for text/background unless contrast ratios meet minimums.
  • Use #9EA0A5 as a background with a dark text color (e.g., #2B2C2E) for optimal readability.
  • Consider larger font sizes or bolder weights for text set in lower-contrast mid-tones.

Recommended combinations

Deep Contrast

Ideal for main content blocks, with #2B2C2E as background, #9EA0A5 for text, and #3D3E42 for accents or secondary information.

#2B2C2E · #9EA0A5 · #3D3E42

Subtle Layers

Great for subtle UI gradients, layered cards, or background patterns where visual depth is desired without strong contrast.

#9EA0A5 · #7B7D82 · #5A5C61

Moody Interface

Effective for dark mode interfaces, using #3D3E42 as the base, #5A5C61 for interactive elements, and #2B2C2E for borders or strong emphasis.

#3D3E42 · #5A5C61 · #2B2C2E

CSS variables

:root {
  --smoky-twilight-haze-1: #3D3E42;
  --smoky-twilight-haze-2: #5A5C61;
  --smoky-twilight-haze-3: #7B7D82;
  --smoky-twilight-haze-4: #9EA0A5;
  --smoky-twilight-haze-5: #2B2C2E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "smoky-twilight-haze": {
        1: "#3D3E42",
        2: "#5A5C61",
        3: "#7B7D82",
        4: "#9EA0A5",
        5: "#2B2C2E",
      }
    }
  }
}

Related searches

cool grey color schememonochrome design palettedark mode grey colorsminimalist UI greysophisticated neutral palette

Palette colors

Hex values

Color 1#3D3E42
·
Color 2#5A5C61
·
Color 3#7B7D82
·
Color 4#9EA0A5
·
Color 5#2B2C2E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
4.1:1AA18
1.3:1Fail
2
1.6:1Fail
1.6:1Fail
2.6:1Fail
2.1:1Fail
3
2.6:1Fail
1.6:1Fail
1.6:1Fail
3.4:1AA18
4
4.1:1AA18
2.6:1Fail
1.6:1Fail
5.3:1AA
5
1.3:1Fail
2.1:1Fail
3.4:1AA18
5.3:1AA

Similar palettes

More like Smoky Twilight Haze

View all monochrome
Contemplative Stone Flow
Grey Cloud Cascade
Ink Wash Serenity
Misty Greyscale Vista
Misty Moor Haze
Morning Fog