Palette

Monochrome Dawn Haze

A smooth gradient of greys, from deep shadow to faint light, capturing the subtle unveiling of dawn.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Dawn 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 Monochrome Dawn Haze.

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

Data visualization

#303030#5C5C5C#888888#B4B4B4#E0E0E0

Palette guide

How to use Monochrome Dawn Haze

Overview

The Monochrome Dawn Haze palette offers a smooth, subtle gradient of greys, perfectly capturing the gentle unveiling of dawn. Ranging from the deep #303030 to the soft #E0E0E0, with versatile mid-tones like #5C5C5C, #888888, and #B4B4B4, this collection provides an elegant and understated foundation for minimalist designs. Designers can leverage these shades to evoke tranquility, sophistication, and a sense of calm progression. Developers will find them excellent for creating serene interfaces, soft gradients, or backgrounds that minimize visual distraction, ideal for editorial content, luxury branding, or any application seeking a refined, gentle aesthetic.

Best used for

Luxury lifestyle brand websites and apps
Editorial design for magazines or blogs
Wellness and meditation application interfaces
Photography portfolios with a serene mood
Elegant wedding stationery or event branding
Subtle corporate presentations and reports

Suggested color roles

primary

Use #303030 as a strong anchor for headers or footers, providing depth and contrast against lighter elements.

secondary

Employ #5C5C5C for subheadings, secondary information, or subtle dividers, maintaining a cohesive grey scale.

accent

Leverage #E0E0E0 for highlights, interactive states, or as a crisp background for content sections, adding brightness.

background

Utilize #B4B4B4 or #E0E0E0 for main content areas, offering a light, airy canvas that promotes readability.

text

For light backgrounds like #E0E0E0, use #303030 or #5C5C5C for optimal text legibility. For dark backgrounds, use white.

Accessibility notes

Ensure sufficient contrast when pairing mid-tones like #888888 text on #B4B4B4 backgrounds; aim for WCAG AA compliance.
#303030 provides excellent contrast against #E0E0E0 for all text sizes, ensuring high readability.
Avoid using #B4B4B4 for small text on #E0E0E0 backgrounds; consider increasing font size or weight.
Always test contrast ratios between text and background, especially with the closer shades in this palette.

Recommended combinations

Gentle Depth

Ideal for header sections, prominent call-to-actions, or feature blocks that require clear hierarchy.

#303030 · #E0E0E0 · #5C5C5C

Soft Gradient

Excellent for creating subtle transitions, layered UI elements, or background effects that mimic dawn's haze.

#5C5C5C · #888888 · #B4B4B4

Content Clarity

Apply for main content areas with a light background, ensuring dark, readable text and subtle secondary elements.

#E0E0E0 · #303030 · #888888

CSS variables

:root {
  --monochrome-dawn-haze-1: #303030;
  --monochrome-dawn-haze-2: #5C5C5C;
  --monochrome-dawn-haze-3: #888888;
  --monochrome-dawn-haze-4: #B4B4B4;
  --monochrome-dawn-haze-5: #E0E0E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-dawn-haze": {
        1: "#303030",
        2: "#5C5C5C",
        3: "#888888",
        4: "#B4B4B4",
        5: "#E0E0E0",
      }
    }
  }
}

Hex values

Color 1#303030

Color 2#5C5C5C

Color 3#888888

Color 4#B4B4B4

Color 5#E0E0E0

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

6.4:1AA

10:1AAA

2:1Fail

1.9:1Fail

3.2:1AA18

5.1:1AA

3.7:1AA18

1.9:1Fail

1.7:1Fail

2.7:1Fail

6.4:1AA

3.2:1AA18

1.7:1Fail

1.6:1Fail

10:1AAA

5.1:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Monochrome Dawn Haze

View all monochrome

Monochromatic Mist

Basalt Stream Pebble

Charcoal Sketchbook Grey

Cloud Grey Mirage

Frosty Serene

Ghostly Fog Hues