Back to palettes

Palette

Cloud Forest Mist

Soft, muted blues and greys inspired by the atmospheric, misty depths of a cloud forest.

coolcalm5 colors
More cool 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

#6A8EAD#9CBECD#C7D8E2#4F6E8A#7F9CB3

Palette guide

How to use Cloud Forest Mist

Overview

The Cloud Forest Mist palette offers soft, muted blues and greys, directly inspired by the atmospheric, misty depths of a cloud forest. With its deep anchor #4F6E8A, versatile mid-tones like #6A8EAD and #7F9CB3, and airy lighter shades #9CBECD and #C7D8E2, this collection is perfect for evoking serenity and an ethereal calm. Designers and developers can leverage these sophisticated hues to create immersive digital experiences, elegant branding, or tranquil physical spaces. The palette's cool, understated nature is ideal for projects seeking a refined, peaceful, and subtly natural aesthetic, ensuring a harmonious and inviting visual presence.

Best used for

  • Spa and wellness brand identity
  • Ethereal wedding stationery
  • Luxury resort marketing
  • Mindfulness app interfaces
  • Art gallery websites
  • Interior design mood boards

Suggested color roles

primary

Use #4F6E8A as the dominant, grounding color for main headers, navigation, or strong brand elements. It provides a rich, stable foundation.

secondary

Employ #6A8EAD for supporting sections, subheadings, or secondary content. It offers substantial presence while being softer than the primary.

accent

Apply #9CBECD for subtle highlights, interactive states, or decorative elements. Its lighter, cool tone provides gentle contrast and a refreshing touch.

background

Utilize #C7D8E2 for clean, expansive backgrounds. This very light blue-grey creates an airy, serene canvas for content.

text

For body text on light backgrounds like #C7D8E2, #4F6E8A or #6A8EAD provide excellent readability. For darker backgrounds, a crisp white is recommended.

Accessibility notes

  • Ensure #4F6E8A or #6A8EAD text on #C7D8E2 backgrounds meets WCAG contrast standards.
  • Avoid using #9CBECD text on #C7D8E2 as the contrast will be too low for good legibility.
  • Always use a contrast checker to verify all text and interactive element color combinations for accessibility compliance.
  • For critical text elements, consider using a very dark charcoal or black if palette colors don't provide enough contrast on the lightest shades.

Recommended combinations

Deep Tranquility

Ideal for a sophisticated, calming theme. #4F6E8A for primary, #6A8EAD for secondary, and #C7D8E2 for a serene background.

#4F6E8A · #6A8EAD · #C7D8E2

Misty Lagoon

Excellent for lighter sections or subtle gradients, evoking openness. #7F9CB3 as a base with #9CBECD for highlights.

#7F9CB3 · #9CBECD · #C7D8E2

Ethereal Sky

Creates an airy, expansive feel. #6A8EAD for grounding, #9CBECD for main content, and #C7D8E2 as a soft background.

#6A8EAD · #9CBECD · #C7D8E2

CSS variables

:root {
  --cloud-forest-mist-1: #6A8EAD;
  --cloud-forest-mist-2: #9CBECD;
  --cloud-forest-mist-3: #C7D8E2;
  --cloud-forest-mist-4: #4F6E8A;
  --cloud-forest-mist-5: #7F9CB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-forest-mist": {
        1: "#6A8EAD",
        2: "#9CBECD",
        3: "#C7D8E2",
        4: "#4F6E8A",
        5: "#7F9CB3",
      }
    }
  }
}

Related searches

muted blue grey paletteethereal nature color schemecalm misty web designblue fog UI colorsserene nature branding

Palette colors

Hex values

Color 1#6A8EAD
·
Color 2#9CBECD
·
Color 3#C7D8E2
·
Color 4#4F6E8A
·
Color 5#7F9CB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.4:1Fail
1.5:1Fail
1.2:1Fail
2
1.8:1Fail
1.3:1Fail
2.7:1Fail
1.5:1Fail
3
2.4:1Fail
1.3:1Fail
3.7:1AA18
2:1Fail
4
1.5:1Fail
2.7:1Fail
3.7:1AA18
1.9:1Fail
5
1.2:1Fail
1.5:1Fail
2:1Fail
1.9:1Fail

Similar palettes

More like Cloud Forest Mist

View all cool
Agate Grotto
Coastal Morning Fog
Misty Mountain
Misty Mountain Trail
Mountain Fog Blanket
Mystic Forest Fog