Back to palettes

Palette

Winter Sky

Muted blues and soft grays capture the serene, crisp atmosphere of a tranquil winter's day sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0E0E6#ADD8E6#87CEFA#778899#6A5ACD

Palette guide

How to use Winter Sky

Overview

The Winter Sky palette captures the serene, crisp atmosphere of a tranquil winter's day sky with its blend of muted blues and soft grays. Featuring classic light blues like #B0E0E6, #ADD8E6, and the more prominent #87CEFA, alongside grounding grays such as #778899 and a unique dark slate blue #6A5ACD, this palette is highly versatile for designers and developers. It’s perfect for creating clean, calming digital interfaces, approachable branding, or refreshing marketing materials. This collection promotes a sense of clarity, reliability, and a balanced, professional aesthetic, evoking open skies and peaceful moments.

Best used for

  • Educational institution websites
  • Weather-related applications or services
  • Corporate communication platforms
  • Travel agency branding for serene destinations
  • Modern art gallery digital presence
  • Children's book illustrations with a calm theme

Suggested color roles

primary

Provides a strong, distinctive anchor for main headings, navigation, or key brand elements using #6A5ACD.

secondary

Offers a brighter, more expansive feel for supporting content or prominent UI sections with #87CEFA.

accent

A sophisticated, muted accent for interactive elements, borders, or subtle highlights with #778899.

background

A soft, light canvas that creates an open, calming backdrop for content, utilizing #B0E0E6.

text

Optimal for body text against lighter backgrounds, ensuring excellent readability and a harmonious feel with #6A5ACD.

Accessibility notes

  • Ensure strong contrast for text using #6A5ACD or #778899 against #B0E0E6, #ADD8E6, or #87CEFA.
  • Avoid using #B0E0E6 or #ADD8E6 for small text against similarly light backgrounds due to potential low contrast.
  • When using #778899 for text, ensure its background offers sufficient contrast to meet WCAG AA guidelines.
  • Verify all interactive elements provide clear visual feedback with adequate contrast against their surroundings.

Recommended combinations

Clear Horizon

Creates a balanced, professional look for headers, primary calls-to-action, or brand logos.

#6A5ACD · #B0E0E6 · #87CEFA

Muted Cloud

Ideal for layered backgrounds, card designs, or subtle data visualizations that need gentle transitions.

#ADD8E6 · #778899 · #87CEFA

Sky Depth

Perfect for clean, airy layouts where a light background is grounded by a distinctive and readable dark text.

#B0E0E6 · #ADD8E6 · #6A5ACD

CSS variables

:root {
  --winter-sky-1: #B0E0E6;
  --winter-sky-2: #ADD8E6;
  --winter-sky-3: #87CEFA;
  --winter-sky-4: #778899;
  --winter-sky-5: #6A5ACD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-sky": {
        1: "#B0E0E6",
        2: "#ADD8E6",
        3: "#87CEFA",
        4: "#778899",
        5: "#6A5ACD",
      }
    }
  }
}

Related searches

tranquil blue gray palettewinter atmospheric colorsserene professional web designsky inspired brandingcalm cool UI colors

Palette colors

Hex values

Color 1#B0E0E6
·
Color 2#ADD8E6
·
Color 3#87CEFA
·
Color 4#778899
·
Color 5#6A5ACD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.2:1Fail
2.5:1Fail
3.7:1AA18
2
1.1:1Fail
1.1:1Fail
2.4:1Fail
3.5:1AA18
3
1.2:1Fail
1.1:1Fail
2.1:1Fail
3.1:1AA18
4
2.5:1Fail
2.4:1Fail
2.1:1Fail
1.5:1Fail
5
3.7:1AA18
3.5:1AA18
3.1:1AA18
1.5:1Fail

Similar palettes

More like Winter Sky

View all cool