Palette

Petrichor Ground Mist

Subtle, earthy greys capture the soothing essence of rain on dry ground, creating a gentle mist.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Petrichor Ground Mist 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 Petrichor Ground Mist.

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

Data visualization

#2d3b4a#5a6e7d#8c9fb0#bacade#e3eaf2

Palette guide

How to use Petrichor Ground Mist

Overview

The Petrichor Ground Mist palette offers a serene collection of subtle, earthy greys, perfectly capturing the soothing essence of rain on dry ground. Featuring deep slate tones like #2d3b4a, balanced mid-greys such as #8c9fb0, and airy, almost-white hues like #e3eaf2, this palette is ideal for creating a calm and sophisticated atmosphere. Designers and developers will find its neutral yet rich character versatile for projects requiring understated elegance. The gentle progression of shades ensures harmonious transitions, making it easy to establish visual hierarchy without stark contrasts. It conveys a sense of tranquility and natural beauty, lending itself well to environments that prioritize peace and subtle refinement.

Best used for

Minimalist website design
Spa and wellness branding
Interior design concepts
Nature-inspired photography backdrops
Sophisticated user interfaces (UI)
Calm corporate communications

Suggested color roles

primary

Use #2d3b4a as a dominant anchor for bold headings or primary navigation elements, providing depth and stability.

secondary

Employ #5a6e7d for subheadings, secondary buttons, or large content blocks, offering a gentler contrast.

accent

Apply #bacade for subtle highlights, interactive states, or decorative lines, adding a touch of lightness without overpowering.

background

Utilize #e3eaf2 as a clean, expansive background color, ensuring readability and a sense of openness.

text

For body text, #2d3b4a provides excellent readability, or consider a dark charcoal for general use.

Accessibility notes

Ensure sufficient contrast between #2d3b4a text and lighter backgrounds like #e3eaf2 for WCAG AA compliance.
Verify that #5a6e7d and #8c9fb0 offer adequate contrast when used as text colors on #e3eaf2.
Avoid using #bacade for small text on very light backgrounds as it may lack sufficient contrast.
Use a contrast checker for all foreground/background pairings, especially for interactive elements.

Recommended combinations

Deep Mist

Ideal for a strong header, body text, and a clean background.

#2D3B4A · #5A6E7D · #E3EAF2

Gentle Gradient

Excellent for subtle gradients, layered UI elements, or section dividers.

#8C9FB0 · #BACADE · #E3EAF2

Grounding Calm

Creates a balanced, grounded feel for hero sections or brand accents.

#2D3B4A · #8C9FB0 · #BACADE

CSS variables

:root {
  --petrichor-ground-mist-1: #2d3b4a;
  --petrichor-ground-mist-2: #5a6e7d;
  --petrichor-ground-mist-3: #8c9fb0;
  --petrichor-ground-mist-4: #bacade;
  --petrichor-ground-mist-5: #e3eaf2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "petrichor-ground-mist": {
        1: "#2d3b4a",
        2: "#5a6e7d",
        3: "#8c9fb0",
        4: "#bacade",
        5: "#e3eaf2",
      }
    }
  }
}

Hex values

Color 1#2d3b4a

Color 2#5a6e7d

Color 3#8c9fb0

Color 4#bacade

Color 5#e3eaf2

Accessibility

Contrast checker

2.2:1Fail

4.2:1AA18

6.9:1AA

9.4:1AAA

2.2:1Fail

1.9:1Fail

3.2:1AA18

4.4:1AA18

4.2:1AA18

1.9:1Fail

1.6:1Fail

2.2:1Fail

6.9:1AA

3.2:1AA18

1.6:1Fail

1.4:1Fail

9.4:1AAA

4.4:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Petrichor Ground Mist

Petrichor Ground Mist

See it in context.

Ready when you are.

Built with Petrichor Ground Mist.

How to use Petrichor Ground Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Mist

Gentle Gradient

Grounding Calm

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Petrichor Ground Mist