Back to palettes

Palette

Morning Fog Wetland

Soft, muted tones reflecting the peaceful, hazy atmosphere of a wetland at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Morning Fog Wetland 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 Morning Fog Wetland.

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

Data visualization

#36454F#4F626E#6A7C89#91A3B0#C1D1DC

Palette guide

How to use Morning Fog Wetland

Overview

The Morning Fog Wetland palette offers a serene collection of cool, muted tones perfect for creating calm and sophisticated digital experiences. Inspired by the peaceful haze of a wetland at dawn, this palette features a gradient from deep charcoal like #36454F to a soft, airy light gray such as #C1D1DC. Its subtle variations, including the versatile mid-tone #91A3B0, provide a robust foundation for user interfaces seeking a subdued yet elegant aesthetic. Designers can leverage these colors to evoke tranquility in branding, web applications, or editorial layouts. Developers will find the inherent harmony of these shades simplifies implementation for consistent visual hierarchies, ensuring a cohesive and professional look across various platforms. This palette excels in projects where understated elegance and a sense of calm are paramount.

Best used for

  • Nature-inspired branding and logos
  • Wellness and meditation application interfaces
  • Editorial design for books or magazines
  • Corporate websites requiring a subtle, professional feel
  • Backgrounds for photography or art portfolios
  • Minimalist web design and user interfaces

Suggested color roles

primary

#36454F - Use this deep charcoal for main headings, navigation bars, or primary calls-to-action to establish a strong, grounding presence.

secondary

#6A7C89 - Apply this mid-tone gray for subheadings, secondary buttons, or as a background for content blocks to provide structure without overpowering.

accent

#91A3B0 - Introduce this lighter, subtle gray for interactive elements, hover states, or gentle highlights that need to stand out without sharp contrast.

background

#C1D1DC - Ideal for large background areas, cards, or containers, offering a clean, airy canvas that enhances readability and a sense of spaciousness.

text

#36454F - Excellent for body text and paragraphs against lighter backgrounds like #C1D1DC, ensuring high readability. For darker backgrounds, consider #C1D1DC for optimal contrast.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter shades like #91A3B0 for text against #C1D1DC backgrounds; aim for WCAG AA for body text.
  • The darkest color, #36454F, provides excellent contrast against #C1D1DC, making it suitable for primary text and important UI elements.
  • For interactive elements, ensure hover and focus states provide clear visual feedback, ideally with a minimum WCAG AA contrast ratio of 3:1 against adjacent colors.
  • Avoid using #91A3B0 for small text on #6A7C89 backgrounds, as contrast may be insufficient for optimal readability, especially for users with visual impairments.

Recommended combinations

Classic Contrast

Ideal for establishing strong visual hierarchy with dark text on a light background, accented by a solid mid-tone for emphasis or secondary content.

#36454F · #C1D1DC · #4F626E

Misty Layers

Excellent for creating subtle depth and dimension in UI elements, card designs, or sequential steps where a soft, atmospheric gradient is desired.

#4F626E · #6A7C89 · #91A3B0

Subtle Highlight

Use for clean layouts where #C1D1DC forms the base, #36454F provides strong textual contrast, and #91A3B0 offers gentle, unobtrusive highlights for interactive elements.

#C1D1DC · #36454F · #91A3B0

CSS variables

:root {
  --morning-fog-wetland-1: #36454F;
  --morning-fog-wetland-2: #4F626E;
  --morning-fog-wetland-3: #6A7C89;
  --morning-fog-wetland-4: #91A3B0;
  --morning-fog-wetland-5: #C1D1DC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-wetland": {
        1: "#36454F",
        2: "#4F626E",
        3: "#6A7C89",
        4: "#91A3B0",
        5: "#C1D1DC",
      }
    }
  }
}

Related searches

cool gray color paletteserene ui colorsmuted wetland tonessubtle branding palettecalm web design colors

Palette colors

Hex values

Color 1#36454F
·
Color 2#4F626E
·
Color 3#6A7C89
·
Color 4#91A3B0
·
Color 5#C1D1DC
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.3:1Fail
3.8:1AA18
6.3:1AA
2
1.6:1Fail
1.5:1Fail
2.4:1Fail
4.1:1AA18
3
2.3:1Fail
1.5:1Fail
1.7:1Fail
2.8:1Fail
4
3.8:1AA18
2.4:1Fail
1.7:1Fail
1.7:1Fail
5
6.3:1AA
4.1:1AA18
2.8:1Fail
1.7:1Fail

Similar palettes

More like Morning Fog Wetland

View all cool
Cool Mist Dawn
Misty Morning Haze
Nordic Winter Calm
Alpine Lake Reflection
Alpine Mist
Aqua Stillness Mood