Back to palettes

Palette

Winter Chill Vista

Captures the serene, crisp air and muted blues of a vast winter landscape under a clear sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0DDE5#8BBFE0#66A2CE#3D7EB0#E0FFFF

Palette guide

How to use Winter Chill Vista

Overview

The Winter Chill Vista palette captures the serene and expansive beauty of a winter landscape with its range of cool blues and icy tones. From the light cyan #B0DDE5 to the deeper, more saturated #3D7EB0, and the pristine #E0FFFF, these colors evoke clarity, vastness, and a crisp atmosphere. Designers and developers will find this palette ideal for projects that aim to convey professionalism, tranquility, and a connection to nature, suitable for creating clean and sophisticated digital experiences.

Best used for

  • Travel and tourism websites (especially winter destinations)
  • Environmental and conservation organizations
  • Technology company branding
  • Water-related product or service brands
  • Clean energy initiatives
  • Winter sports and outdoor adventure companies

Suggested color roles

primary

Utilize #66A2CE as the main brand color for key visual elements and headings, offering a balanced and engaging medium blue.

secondary

Employ #8BBFE0 for supporting information, subheadings, or secondary navigation, providing a lighter, complementary blue.

accent

Apply #3D7EB0 for strong accents, calls to action, and important icons, ensuring crucial elements have high visibility.

background

Choose #E0FFFF as the primary background color to create an expansive, clean, and icy backdrop that enhances the overall serene mood.

text

For optimal readability, use #3D7EB0 for body text and primary content. A standard black or very dark grey also provides excellent contrast.

Accessibility notes

  • Text in #3D7EB0 on #E0FFFF provides good contrast, ensuring readability for body text and headings.
  • Use #66A2CE for larger headings on #E0FFFF, checking contrast to ensure it meets accessibility standards.
  • Avoid placing #B0DDE5 or #8BBFE0 text directly on #E0FFFF due to insufficient contrast for most users.
  • Ensure interactive elements, such as buttons, use colors like #3D7EB0 to provide clear visual cues and sufficient contrast.

Recommended combinations

Icy Depths

Combines a dark accent with a bright background and a strong primary for impactful headings and interactive elements.

#3D7EB0 · #E0FFFF · #66A2CE

Skyline

Creates a layered effect with light blues, ideal for background gradients or subtle graphical elements.

#8BBFE0 · #B0DDE5 · #E0FFFF

Vista Contrast

Pairs the primary blue with a light background and a darker accent, perfect for clean and balanced layouts.

#66A2CE · #E0FFFF · #3D7EB0

CSS variables

:root {
  --winter-chill-vista-1: #B0DDE5;
  --winter-chill-vista-2: #8BBFE0;
  --winter-chill-vista-3: #66A2CE;
  --winter-chill-vista-4: #3D7EB0;
  --winter-chill-vista-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "winter-chill-vista": {
        1: "#B0DDE5",
        2: "#8BBFE0",
        3: "#66A2CE",
        4: "#3D7EB0",
        5: "#E0FFFF",
      }
    }
  }
}

Related searches

icy blue color paletteserene winter bluesvast landscape colorscool tech brandingclean blue scheme

Palette colors

Hex values

Color 1#B0DDE5
·
Color 2#8BBFE0
·
Color 3#66A2CE
·
Color 4#3D7EB0
·
Color 5#E0FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
3:1Fail
1.4:1Fail
2
1.3:1Fail
1.4:1Fail
2.2:1Fail
1.9:1Fail
3
1.9:1Fail
1.4:1Fail
1.6:1Fail
2.6:1Fail
4
3:1Fail
2.2:1Fail
1.6:1Fail
4.1:1AA18
5
1.4:1Fail
1.9:1Fail
2.6:1Fail
4.1:1AA18

Similar palettes

More like Winter Chill Vista

View all cool