Palette

Mystic Woodland Fog

Muted blues and grays capture the enchanting mystery of a deep forest shrouded in a gentle, early morning fog.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mystic Woodland Fog 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 Mystic Woodland Fog.

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

Data visualization

#2C3E4C#5E6F7D#8E9EA8#BFC8CD#E4E7E8

Palette guide

How to use Mystic Woodland Fog

Overview

The Mystic Woodland Fog palette captures the enchanting mystery of a deep forest shrouded in gentle, early morning fog with its muted blues and grays. Featuring a sophisticated range from the deep blue-gray of #2C3E4C to the almost white #E4E7E8, this palette is excellent for creating calm, modern, and minimalist designs. The mid-tones like #5E6F7D and #8E9EA8 offer versatile options for layering and depth. Designers and developers can use this collection of #2C3E4C, #5E6F7D, #8E9EA8, #BFC8CD, and #E4E7E8 to build interfaces that convey tranquility, professionalism, and a subtle sense of intrigue. It's particularly effective for projects requiring a sophisticated, understated aesthetic.

Best used for

Corporate websites (tech, finance, consulting)
Modern architecture and interior design portfolios
Desktop application interfaces and dashboards
Branding for luxury goods and high-end services
Photography websites showcasing serene landscapes
Serene home decor or lifestyle themes

Suggested color roles

primary

Utilize #2C3E4C as the deep, anchoring blue-gray for headers, primary buttons, or strong brand elements.

secondary

Employ #5E6F7D as a versatile mid-tone gray-blue for subheadings, secondary UI elements, or subtle accents.

accent

Apply #8E9EA8 for soft, subtle highlights, background textures, or hover states that add gentle depth.

background

Designate #E4E7E8 as the light, airy base for main content areas, providing a clean and spacious feel.

text

Use #2C3E4C for body text and important labels on lighter backgrounds like #E4E7E8 for excellent readability.

Accessibility notes

The contrast between #2C3E4C and #E4E7E8 is excellent for body text, ensuring high readability.
Ensure #5E6F7D on #E4E7E8 meets WCAG AA standards for larger text or interactive UI elements.
Avoid using #BFC8CD or #8E9EA8 for small text on #E4E7E8 due to insufficient contrast for readability.
For critical, small text on #E4E7E8, consider a slightly darker shade than #2C3E4C if enhanced contrast is required.

Recommended combinations

Foggy Depths

Creates strong contrast and depth for main sections and clear text on light backgrounds.

#2C3E4C · #5E6F7D · #E4E7E8

Misty Horizon

Ideal for soft, ethereal backgrounds and subtle UI elements, evoking a gentle atmosphere.

#E4E7E8 · #BFC8CD · #8E9EA8

Cool Shadows

Provides balanced elements with subtle highlights, suitable for layered designs.

#5E6F7D · #2C3E4C · #BFC8CD

CSS variables

:root {
  --mystic-woodland-fog-1: #2C3E4C;
  --mystic-woodland-fog-2: #5E6F7D;
  --mystic-woodland-fog-3: #8E9EA8;
  --mystic-woodland-fog-4: #BFC8CD;
  --mystic-woodland-fog-5: #E4E7E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mystic-woodland-fog": {
        1: "#2C3E4C",
        2: "#5E6F7D",
        3: "#8E9EA8",
        4: "#BFC8CD",
        5: "#E4E7E8",
      }
    }
  }
}

Hex values

Color 1#2C3E4C

Color 2#5E6F7D

Color 3#8E9EA8

Color 4#BFC8CD

Color 5#E4E7E8

Accessibility

Contrast checker

2.1:1Fail

4:1AA18

6.5:1AA

8.9:1AAA

2.1:1Fail

1.9:1Fail

3.1:1AA18

4.2:1AA18

4:1AA18

1.9:1Fail

1.6:1Fail

2.2:1Fail

6.5:1AA

3.1:1AA18

1.6:1Fail

1.4:1Fail

8.9:1AAA

4.2:1AA18

2.2:1Fail

1.4:1Fail

Similar palettes

More like Mystic Woodland Fog