Palette

Morning Fog Meadow

Soft, muted greens and creamy whites evoke the tranquil peace of a foggy meadow 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 Meadow 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 Meadow.

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

Data visualization

#CEDCBB#E0E9D8#F1F5EB#B2C59D#A3B791

Palette guide

How to use Morning Fog Meadow

Overview

The Morning Fog Meadow color palette evokes the serene beauty of nature's quiet moments, blending soft, muted greens with creamy off-whites. Centered around a gentle sage green like #CEDCBB, this scheme offers tranquility and understated elegance. The lightest shade, #F1F5EB, provides a luminous base, while #E0E9D8 offers a subtle warmth. Deeper tones such as #B2C59D and the rich #A3B791 add necessary depth and grounding without sacrificing the palette's inherent softness. Ideal for designs seeking a natural, calming, and sophisticated aesthetic, it promotes a sense of peace and organic harmony.

Best used for

Wellness and mindfulness apps or websites
Eco-friendly and sustainable brand identities
Home decor and interior design mood boards
Nature-themed educational content and blogs
Skincare and organic product packaging
Calm and inviting user interfaces

Suggested color roles

primary

A versatile, calming mid-tone green (#CEDCBB), perfect for main content areas, large UI elements, or primary brand identity. It's soft yet distinct.

secondary

A lighter, creamy green (#E0E9D8) that pairs beautifully with the primary. Use it for secondary sections, background accents, or subtle gradients to add softness.

accent

The deepest green in the palette (#A3B791), excellent for adding grounding contrast. Ideal for calls to action, important headings, or graphical elements requiring more emphasis.

background

The lightest, almost off-white shade (#F1F5EB). Best used as a clean, expansive background to allow other colors to breathe, maintaining the palette's airy feel.

text

Use a dark charcoal or near-black for body text against #F1F5EB or #E0E9D8 to ensure maximum readability. For headings on lighter backgrounds, #A3B791 or #B2C59D works well.

Accessibility notes

Ensure sufficient contrast when using #F1F5EB as a background with lighter text colors; opt for dark text like charcoal or #A3B791.
The contrast between #E0E9D8 and #CEDCBB might be too low for critical text or interactive elements, reserve for decorative uses.
For interactive elements or links, use #A3B791 or #B2C59D against lighter backgrounds to meet WCAG contrast guidelines.
Avoid placing #F1F5EB text directly on #E0E9D8 or #CEDCBB backgrounds, as readability will be severely compromised.

Recommended combinations

Gentle Gradient

Ideal for creating soft, atmospheric backgrounds, subtle layering in web interfaces, or tranquil branding elements where a seamless transition is desired.

#F1F5EB · #E0E9D8 · #CEDCBB

Deep Forest Accent

Excellent for adding depth and emphasis. Use #A3B791 for key actions or headlines, supported by #B2C59D and #CEDCBB for surrounding content, providing a grounded feel.

#CEDCBB · #B2C59D · #A3B791

Airy Contrast

A balanced combination for general UI design. #F1F5EB as background, #CEDCBB for main elements, and #A3B791 for critical text or calls to action, ensuring good readability.

#F1F5EB · #CEDCBB · #A3B791

CSS variables

:root {
  --morning-fog-meadow-1: #CEDCBB;
  --morning-fog-meadow-2: #E0E9D8;
  --morning-fog-meadow-3: #F1F5EB;
  --morning-fog-meadow-4: #B2C59D;
  --morning-fog-meadow-5: #A3B791;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "morning-fog-meadow": {
        1: "#CEDCBB",
        2: "#E0E9D8",
        3: "#F1F5EB",
        4: "#B2C59D",
        5: "#A3B791",
      }
    }
  }
}

Hex values

Color 1#CEDCBB

Color 2#E0E9D8

Color 3#F1F5EB

Color 4#B2C59D

Color 5#A3B791

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

1.7:1Fail

1.3:1Fail

1.1:1Fail

1.7:1Fail

2:1Fail

1.3:1Fail

1.5:1Fail

1.7:1Fail

1.2:1Fail

1.5:1Fail

1.7:1Fail

2:1Fail

1.2:1Fail

Similar palettes

More like Morning Fog Meadow

Morning Fog Meadow

See it in context.

Ready when you are.

Built with Morning Fog Meadow.

How to use Morning Fog Meadow

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Gentle Gradient

Deep Forest Accent

Airy Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Morning Fog Meadow