Palette

Misty Cypress Grove

A serene and hazy blend of blues and greys, reminiscent of a silent cypress grove shrouded in mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Misty Cypress Grove 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 Misty Cypress Grove.

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

Data visualization

#36454F#5A6B7C#8B9DA8#BCCCDC#EAEFF2

Palette guide

How to use Misty Cypress Grove

Overview

The Misty Cypress Grove palette offers a serene and contemplative blend of cool greys and subtle blue-greys, reminiscent of a silent cypress grove shrouded in mist. Ranging from the deep, anchoring #36454F (Charcoal) to the airy #EAEFF2 (Near White), this collection provides a sophisticated and calming foundation for any design project. The versatile mid-tones like #5A6B7C and #8B9DA8 are perfect for establishing visual hierarchy and adding depth without introducing strong color. This palette is ideal for creating clean, minimalist, and professional interfaces that evoke a sense of tranquility and understated elegance.

Best used for

Minimalist website designs
Corporate branding
Nature-inspired photography portfolios
Serene mobile application themes
Professional documentation and reports
Architectural visualization

Suggested color roles

primary

#36454F - A deep charcoal, ideal for main headings, primary UI elements, or strong brand statements.

secondary

#5A6B7C - A medium blue-grey, suitable for sub-headings, secondary buttons, or accent panels.

accent

#8B9DA8 - A lighter, soft blue-grey, perfect for subtle highlights, borders, or active states.

background

#EAEFF2 - A very light, near-white shade that provides a clean, airy, and expansive canvas.

text

#36454F - The darkest color, ensuring excellent readability for all body text against lighter backgrounds.

Accessibility notes

Ensure #36454F text on #EAEFF2 background meets WCAG AA or AAA contrast standards.
Avoid using #BCCCDC for body text, especially on #EAEFF2, due to insufficient contrast.
Use #36454F or #5A6B7C for critical text elements to maintain readability.
For interactive elements, ensure distinct visual feedback using a darker shade or a clear border.

Recommended combinations

Clean Header

Strong, dark text on a crisp, light background for clear headers.

#36454F · #EAEFF2 · #5A6B7C

Subtle Card

Light card background with a slightly darker border or shadow for depth.

#EAEFF2 · #BCCCDC · #5A6B7C

Active State

Button in default state with a lighter, subtle hover or pressed effect.

#5A6B7C · #8B9DA8 · #BCCCDC

CSS variables

:root {
  --misty-cypress-grove-1: #36454F;
  --misty-cypress-grove-2: #5A6B7C;
  --misty-cypress-grove-3: #8B9DA8;
  --misty-cypress-grove-4: #BCCCDC;
  --misty-cypress-grove-5: #EAEFF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "misty-cypress-grove": {
        1: "#36454F",
        2: "#5A6B7C",
        3: "#8B9DA8",
        4: "#BCCCDC",
        5: "#EAEFF2",
      }
    }
  }
}

Hex values

Color 1#36454F

Color 2#5A6B7C

Color 3#8B9DA8

Color 4#BCCCDC

Color 5#EAEFF2

Accessibility

Contrast checker

1.8:1Fail

3.5:1AA18

6:1AA

8.5:1AAA

1.8:1Fail

2:1Fail

3.3:1AA18

4.7:1AA

3.5:1AA18

2:1Fail

1.7:1Fail

2.4:1Fail

6:1AA

3.3:1AA18

1.7:1Fail

1.4:1Fail

8.5:1AAA

4.7:1AA

2.4:1Fail

1.4:1Fail

Similar palettes

More like Misty Cypress Grove

Nordic Spruce Silhouette

Riverside Willow Dream