Back to palettes

Palette

Winter Bloom Hues

Soft blues and frosted greens capturing the delicate resilience of blooms peeking through winter's embrace.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Winter Bloom Hues 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 Bloom Hues.

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

Data visualization

#4A6E7D#6B9EA4#A1CCD7#BCCBD9#D9E3E8

Palette guide

How to use Winter Bloom Hues

Overview

The "Winter Bloom Hues" palette is a refreshing collection of cool blues and muted teal-greens, evoking the delicate resilience of blooms peeking through winter's embrace. This palette transitions gracefully from the deep, grounding teal of #4A6E7D to the serene mid-tone #6B9EA4, then lightens to the soft, airy blues of #A1CCD7, #BCCBD9, and finally the crisp, almost white #D9E3E8. It's ideal for designs seeking a calm, sophisticated, and subtly natural aesthetic. Designers can utilize this harmonious range for creating depth and visual interest without overwhelming the user, while developers will find these hues highly adaptable for clean interfaces, responsive web design, and branding that communicates tranquility and trustworthiness.

Best used for

  • Healthcare or wellness platforms
  • Environmental organizations
  • Tech startups with a clean aesthetic
  • Educational resources
  • Interior design inspiration
  • Photography website backgrounds

Suggested color roles

primary

A balanced, calming teal-blue #6B9EA4 for main content areas, prominent headings, or brand elements that convey trust and serenity.

secondary

A deep, grounding teal #4A6E7D for important sub-sections, strong navigation, or to add visual weight and sophistication.

accent

A soft, light blue accent #A1CCD7, perfect for subtle highlights, interactive states, or to add a touch of airy freshness.

background

The lightest shade #D9E3E8, providing a clean, open, and highly readable canvas for content, enhancing the overall calm mood.

text

For primary body text, use the deep #4A6E7D or a dark charcoal for optimal readability against lighter backgrounds.

Accessibility notes

  • Ensure #4A6E7D text has sufficient contrast against #D9E3E8 and #BCCBD9 backgrounds.
  • Avoid using #D9E3E8 text on #BCCBD9 or #A1CCD7 backgrounds due to very low contrast.
  • White text may be necessary for readability on the darkest shade, #4A6E7D.
  • Check WCAG AA compliance for all text and interactive elements, particularly for links and buttons.

Recommended combinations

Calm Waters

Light background, soft content block, and deep, readable text/accents.

#D9E3E8 · #A1CCD7 · #4A6E7D

Serene Layers

Mid-tone background, primary element, and a deeper accent for emphasis.

#BCCBD9 · #6B9EA4 · #4A6E7D

Airy Contrast

Dark background, light text, and a soft blue for subtle highlights.

#4A6E7D · #D9E3E8 · #A1CCD7

CSS variables

:root {
  --winter-bloom-hues-1: #4A6E7D;
  --winter-bloom-hues-2: #6B9EA4;
  --winter-bloom-hues-3: #A1CCD7;
  --winter-bloom-hues-4: #BCCBD9;
  --winter-bloom-hues-5: #D9E3E8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-bloom-hues": {
        1: "#4A6E7D",
        2: "#6B9EA4",
        3: "#A1CCD7",
        4: "#BCCBD9",
        5: "#D9E3E8",
      }
    }
  }
}

Related searches

cool blue green palettewinter bloom colorsserene teal designsubtle blue grey schemecalm ui colors

Palette colors

Hex values

Color 1#4A6E7D
·
Color 2#6B9EA4
·
Color 3#A1CCD7
·
Color 4#BCCBD9
·
Color 5#D9E3E8
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.2:1AA18
3.3:1AA18
4.2:1AA18
2
1.8:1Fail
1.7:1Fail
1.8:1Fail
2.3:1Fail
3
3.2:1AA18
1.7:1Fail
1:1Fail
1.3:1Fail
4
3.3:1AA18
1.8:1Fail
1:1Fail
1.3:1Fail
5
4.2:1AA18
2.3:1Fail
1.3:1Fail
1.3:1Fail

Similar palettes

More like Winter Bloom Hues

View all cool