Palette

Cloud Forest Haze

The ethereal, muted blues and greys of a high-altitude cloud forest shrouded in mist.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#87CEEB#6A819F#4A5B6F#2F3E4C

Palette guide

How to use Cloud Forest Haze

Overview

The Cloud Forest Haze palette captures the ethereal, muted blues and greys of a high-altitude cloud forest shrouded in mist, offering a calm and sophisticated aesthetic. From the deep, grounding #2F3E4C to the airy #B0C4DE and refreshing #87CEEB, this collection provides a versatile range for designers and developers. The mid-tones like #4A5B6F and #6A819F create a seamless transition, perfect for evoking a sense of calm, depth, and professionalism. Utilize these cool, subtle hues to build immersive digital experiences, create elegant branding, or design spaces that feel both serene and modern, reflecting the tranquil yet mysterious mountain landscape.

Best used for

Corporate branding with a serene touch
Luxury travel websites
Architectural visualization
High-end product packaging
Meditative app designs
Winter fashion collections

Suggested color roles

primary

Employ #2F3E4C for strong foundational elements like headers, footers, or main navigation. It provides a deep, anchoring presence.

secondary

Use #4A5B6F for supporting content areas, subheadings, or secondary interactive elements. It offers a solid yet softer contrast to the primary.

accent

Apply #87CEEB for drawing attention to calls-to-action, key data points, or subtle highlights. Its brighter blue provides a refreshing pop.

background

Utilize #B0C4DE for clean, expansive backgrounds. Its light, airy quality creates a sense of openness and tranquility.

text

For body text on light backgrounds, #2F3E4C or #4A5B6F provide excellent readability. On darker backgrounds like #2F3E4C, use a crisp white text.

Accessibility notes

Ensure #2F3E4C or #4A5B6F text on #B0C4DE background meets WCAG contrast standards.
Avoid using #87CEEB text on #B0C4DE as the contrast might be insufficient.
Use a contrast checker to verify all color pairings, especially for small text or interactive elements.
Consider using a pure white (#FFFFFF) for text on the darkest colors like #2F3E4C to maximize readability.

Recommended combinations

Deep Mist

Ideal for a sophisticated, deep theme. #2F3E4C as primary, #4A5B6F for secondary, and #B0C4DE for background.

#2F3E4C · #4A5B6F · #B0C4DE

Sky Peak

Excellent for lighter sections or accents. #6A819F as a base with #87CEEB for highlights or interactive elements.

#6A819F · #87CEEB · #4A5B6F

Hazy Horizon

Creates an airy, expansive feel. #4A5B6F for grounding, #B0C4DE as main background, with #87CEEB for subtle accents.

#4A5B6F · #B0C4DE · #87CEEB

CSS variables

:root {
  --cloud-forest-haze-1: #B0C4DE;
  --cloud-forest-haze-2: #87CEEB;
  --cloud-forest-haze-3: #6A819F;
  --cloud-forest-haze-4: #4A5B6F;
  --cloud-forest-haze-5: #2F3E4C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cloud-forest-haze": {
        1: "#B0C4DE",
        2: "#87CEEB",
        3: "#6A819F",
        4: "#4A5B6F",
        5: "#2F3E4C",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#87CEEB

Color 3#6A819F

Color 4#4A5B6F

Color 5#2F3E4C

Accessibility

Contrast checker

1:1Fail

2.2:1Fail

3.9:1AA18

6.2:1AA

1:1Fail

2.3:1Fail

4:1AA18

6.3:1AA

2.2:1Fail

2.3:1Fail

1.7:1Fail

2.7:1Fail

3.9:1AA18

4:1AA18

1.7:1Fail

1.6:1Fail

6.2:1AA

6.3:1AA

2.7:1Fail

1.6:1Fail

Similar palettes

More like Cloud Forest Haze