Back to palettes

Palette

Winter Garden Serene

Delicate, frosty blues and greens capturing the quiet beauty of a winter garden at dawn.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Garden Serene 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 Winter Garden Serene.

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

Data visualization

#A3BBCD#CEDFEF#EDF7FA#E6F3EA#B7CCD7

Palette guide

How to use Winter Garden Serene

Overview

The "Winter Garden Serene" palette captures the quiet beauty of a winter garden at dawn, with delicate, frosty blues and greens. It ranges from the almost white #EDF7FA and #E6F3EA to the soft, cool #A3BBCD and #B7CCD7, with a mid-tone #CEDFEF. This palette is perfect for developers building interfaces that require a gentle, calming, and elegant aesthetic. Designers can leverage these serene hues for projects like wellness platforms, sophisticated personal brands, or editorial content that aims for a soft, natural feel, ensuring a visually harmonious and inviting user experience across all elements.

Best used for

  • Wellness and self-care app interfaces
  • Sophisticated personal branding and blogs
  • Editorial design for lifestyle or health content
  • Eco-friendly product packaging
  • Calm and inviting website hero sections
  • Digital art or illustrations with a soft, natural theme

Suggested color roles

primary

A soft, muted blue, #A3BBCD, ideal for foundational elements, subtle headers, or important interactive components.

secondary

A slightly lighter blue-gray, #B7CCD7, excellent for secondary actions, subtle borders, or background textures.

accent

A very light, delicate blue, #CEDFEF, perfect for hover states, subtle highlights, or decorative flourishes.

background

An almost white, ethereal blue, #EDF7FA, providing an expansive, clean, and airy canvas.

text

A dark charcoal or deep navy for optimal readability against these very light background colors, ensuring strong contrast for body text.

Accessibility notes

  • Due to the overall lightness, using a dark text color (e.g., black or charcoal) is crucial for readability on any of these backgrounds.
  • Avoid using the lighter shades for small text or critical information, as contrast will be low.
  • Ensure interactive elements have clear visual feedback for states, maintaining adequate contrast.
  • Strictly adhere to WCAG AA guidelines for text color contrast, as the palette's internal contrast is very subtle.

Recommended combinations

Garden Mist

Ideal for very clean, spacious backgrounds, soft gradients, or ethereal visual effects.

#EDF7FA · #E6F3EA · #CEDFEF

Frosted Bloom

For creating subtle depth in light-themed sections, soft UI elements, or illustrative patterns.

#A3BBCD · #B7CCD7 · #CEDFEF

Serene Dawn

Best for visual transitions, gentle infographics, or elements that require a soft, cool progression.

#E6F3EA · #CEDFEF · #A3BBCD

CSS variables

:root {
  --winter-garden-serene-1: #A3BBCD;
  --winter-garden-serene-2: #CEDFEF;
  --winter-garden-serene-3: #EDF7FA;
  --winter-garden-serene-4: #E6F3EA;
  --winter-garden-serene-5: #B7CCD7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-garden-serene": {
        1: "#A3BBCD",
        2: "#CEDFEF",
        3: "#EDF7FA",
        4: "#E6F3EA",
        5: "#B7CCD7",
      }
    }
  }
}

Related searches

pale blue green palettecalm winter garden colorsserene soft UI designethereal cool toneslight natural branding

Palette colors

Hex values

Color 1#A3BBCD
·
Color 2#CEDFEF
·
Color 3#EDF7FA
·
Color 4#E6F3EA
·
Color 5#B7CCD7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
1.7:1Fail
1.2:1Fail
2
1.5:1Fail
1.3:1Fail
1.2:1Fail
1.2:1Fail
3
1.8:1Fail
1.3:1Fail
1:1Fail
1.5:1Fail
4
1.7:1Fail
1.2:1Fail
1:1Fail
1.5:1Fail
5
1.2:1Fail
1.2:1Fail
1.5:1Fail
1.5:1Fail

Similar palettes

More like Winter Garden Serene

View all cool
Frosted Woodland Serene
Alpine Forest Chill
Alpine Frost Serenity
Arctic Aurora Glow
Arctic Bloom Whisper
Arctic Dusk Glow