Palette

Graphite Haze Gradient

A sophisticated gradient of cool greys, reminiscent of a misty morning or a graphite sketch.

monochromeminimal5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Graphite Haze Gradient 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 Graphite Haze Gradient.

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

Data visualization

#e6eaf0#c2ccd9#8fa2b2#5c7080#334757

Palette guide

How to use Graphite Haze Gradient

Overview

The Graphite Haze Gradient palette offers a sophisticated progression of cool grays, reminiscent of a misty morning or a finely rendered graphite sketch. This gradient smoothly transitions from the very light #e6eaf0 to the deep #334757, with balanced intermediate shades like #c2ccd9, #8fa2b2, and #5c7080. It's a versatile collection for designers seeking to create elegant, calming, and highly professional visuals. The subtle shifts in tone provide ample opportunity for depth and dimension, making it ideal for clean UI, corporate branding, or any project that benefits from a refined, understated aesthetic.

Best used for

Corporate web design
Sleek UI/UX interfaces
Brand guidelines and presentations
Minimalist photography backdrops
Elegant print collateral
Professional dashboard designs

Suggested color roles

primary

Use #5c7080 as a core color for major sections or strong typography, providing a stable, cool gray.

secondary

Apply #8fa2b2 for supporting text, navigation elements, or subtle background differentiation, offering a softer tone.

accent

Employ #c2ccd9 for gentle highlights, hover states, or as a light accent on darker elements, creating visual interest.

background

Utilize #e6eaf0 for clean, spacious backgrounds that allow darker elements to stand out with clarity.

text

For primary text on light backgrounds, #334757 offers excellent readability. On darker backgrounds, use #e6eaf0 or #c2ccd9.

Accessibility notes

Ensure sufficient contrast when using #c2ccd9 or #8fa2b2 for text on #e6eaf0, as they are relatively light.
The darkest color, #334757, provides excellent contrast for light text like #e6eaf0.
Avoid using adjacent light shades (e.g., #e6eaf0 and #c2ccd9) for text/background pairs.
For interactive elements, ensure clear visual feedback using contrasting shades, such as #334757 for active states on #e6eaf0.

Recommended combinations

Smooth Transition

For subtle background gradients or layered UI elements, creating depth.

#E6EAF0 · #C2CCD9 · #8FA2B2

Deep & Clear

Dark base with very light text and a mid-tone for secondary information.

#334757 · #E6EAF0 · #5C7080

Hazy Overlay

Use #8fa2b2 as a background, #5c7080 for text, and #c2ccd9 for subtle accents.

#8FA2B2 · #5C7080 · #C2CCD9

CSS variables

:root {
  --graphite-haze-gradient-1: #e6eaf0;
  --graphite-haze-gradient-2: #c2ccd9;
  --graphite-haze-gradient-3: #8fa2b2;
  --graphite-haze-gradient-4: #5c7080;
  --graphite-haze-gradient-5: #334757;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "graphite-haze-gradient": {
        1: "#e6eaf0",
        2: "#c2ccd9",
        3: "#8fa2b2",
        4: "#5c7080",
        5: "#334757",
      }
    }
  }
}

Hex values

Color 1#e6eaf0

Color 2#c2ccd9

Color 3#8fa2b2

Color 4#5c7080

Color 5#334757

Accessibility

Contrast checker

1.3:1Fail

2.2:1Fail

4.3:1AA18

8:1AAA

1.3:1Fail

1.6:1Fail

3.2:1AA18

5.9:1AA

2.2:1Fail

1.6:1Fail

2:1Fail

3.7:1AA18

4.3:1AA18

3.2:1AA18

2:1Fail

1.9:1Fail

8:1AAA

5.9:1AA

3.7:1AA18

1.9:1Fail

Similar palettes

More like Graphite Haze Gradient

View all monochrome

Lunar Dust Veil

Monochromatic Steel Gaze

Monochrome Mist Shadow

Ancient Stone Rubble

Arctic Explorer Suit

Arctic Fox Fur