Palette

Cloud Forest Mist

Soft, cool greys and muted blues reflecting the tranquil, misty atmosphere of a high-altitude cloud forest.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cloud Forest 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 Cloud Forest Mist.

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

Data visualization

#5E6A78#8A9AA5#B9C6CD#E2ECF0#4C5862

Palette guide

How to use Cloud Forest Mist

Overview

The Cloud Forest Mist palette (version 2) offers a serene blend of cool greys and muted blues, perfectly reflecting the tranquil, misty atmosphere of a high-altitude cloud forest. With deep anchor #4C5862 and versatile mid-tones like #5E6A78 and #8A9AA5, transitioning to the airy #B9C6CD and #E2ECF0, this collection is designed for sophisticated simplicity. It's ideal for designers and developers seeking to create calm, professional, and elegant digital or physical environments. These muted hues provide an excellent foundation for minimalist designs, corporate branding, or any project aiming for an understated, natural, and soothing aesthetic, ensuring a refined visual experience.

Best used for

Minimalist website designs
Professional corporate branding
High-end stationery and print
Photography portfolio backgrounds
Calm office interior concepts
Tech product interfaces

Suggested color roles

primary

Use #4C5862 as the dominant, anchoring color for main headers, navigation, or strong brand elements. It provides significant depth.

secondary

Employ #5E6A78 for supporting sections, subheadings, or secondary interactive elements. It offers a softer yet substantial presence.

accent

Apply #B9C6CD for subtle highlights, interactive states, or decorative elements. Its light, cool tone offers gentle contrast.

background

Utilize #E2ECF0 for clean, spacious backgrounds. This very light, almost white shade ensures a fresh, airy feel and excellent readability.

text

For body text on light backgrounds like #E2ECF0, #4C5862 or #5E6A78 offer superior readability. Consider near-black (#111111) for maximum clarity if needed.

Accessibility notes

Ensure #4C5862 or #5E6A78 text on #E2ECF0 or #B9C6CD backgrounds meets WCAG contrast guidelines.
Avoid using #B9C6CD text on #E2ECF0, as the contrast will be insufficient for legibility.
Always use a contrast checker for all text and interactive element color combinations to confirm accessibility.
For critical information, consider using a true black or very dark charcoal for text if the palette's darkest shades don't provide sufficient contrast on the lightest backgrounds.

Recommended combinations

Misty Foundation

Ideal for a strong, professional base. #4C5862 for primary, #5E6A78 for secondary, and #E2ECF0 for a clean background.

#4C5862 · #5E6A78 · #E2ECF0

Silvered Horizon

Great for subtle gradients or layered elements, creating depth without harshness. #8A9AA5 as a mid-tone with #B9C6CD for highlights.

#8A9AA5 · #B9C6CD · #E2ECF0

Calm Interface

Perfect for UI elements where clarity and calm are key. #5E6A78 for text, #B9C6CD for interactive components, and #E2ECF0 for backgrounds.

#5E6A78 · #B9C6CD · #E2ECF0

CSS variables

:root {
  --cloud-forest-mist-2-1: #5E6A78;
  --cloud-forest-mist-2-2: #8A9AA5;
  --cloud-forest-mist-2-3: #B9C6CD;
  --cloud-forest-mist-2-4: #E2ECF0;
  --cloud-forest-mist-2-5: #4C5862;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-forest-mist-2": {
        1: "#5E6A78",
        2: "#8A9AA5",
        3: "#B9C6CD",
        4: "#E2ECF0",
        5: "#4C5862",
      }
    }
  }
}

Hex values

Color 1#5E6A78

Color 2#8A9AA5

Color 3#B9C6CD

Color 4#E2ECF0

Color 5#4C5862

Accessibility

Contrast checker

1.9:1Fail

3.2:1AA18

4.6:1AA

1.3:1Fail

1.9:1Fail

1.7:1Fail

2.4:1Fail

2.5:1Fail

3.2:1AA18

1.7:1Fail

1.5:1Fail

4.2:1AA18

4.6:1AA

2.4:1Fail

1.5:1Fail

6.1:1AA

1.3:1Fail

2.5:1Fail

4.2:1AA18

6.1:1AA

Similar palettes

More like Cloud Forest Mist

View all neutral

Ancient Grove Hush

Coastal Driftwood Grey

Coastal Fog Drift

Coastal Fog Mornings

Coastal Pebble Beach

Coastal Seagrass Sway