Palette

Arctic Serenity

Evoking the tranquil stillness of icy landscapes and a clear, frosty sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Arctic Serenity 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 Arctic Serenity.

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

Data visualization

#E0FFFF#ADD8E6#87CEEB#4682B4#191970

Palette guide

How to use Arctic Serenity

Overview

The Arctic Serenity palette masterfully evokes the tranquil stillness of icy landscapes and a clear, frosty sky, offering a beautiful gradient of cool blues and pristine whites. It transitions from the bright #E0FFFF and gentle #ADD8E6, through the classic sky blue #87CEEB, to the robust steel blue #4682B4. The palette is anchored by a profound, almost black #191970, providing crucial depth. This versatile collection is perfect for designers and developers seeking to create sophisticated, calming, and highly readable experiences. Its strong contrast capabilities ensure adaptability for a wide range of digital and print applications, from branding to user interfaces.

Best used for

Corporate and professional websites
High-tech product showcases
Luxury goods branding
Environmental conservation initiatives
Winter-themed digital content
Educational and scientific platforms

Suggested color roles

primary

The deep #191970 is ideal for primary branding, navigation, and dominant text, providing strong visual anchors.

secondary

Use #4682B4 for subheadings, secondary calls-to-action, or important informational blocks, offering excellent readability.

accent

The clear #87CEEB or #ADD8E6 can serve as refreshing accents for interactive elements, highlights, or illustrative details.

background

Employ the brilliant #E0FFFF as a clean, expansive background, creating an open, airy, and inviting canvas.

text

For optimal readability, use #191970 or a dark charcoal for primary text on light backgrounds. For dark backgrounds, #E0FFFF works best.

Accessibility notes

Ensure high contrast between #191970 and lighter shades like #E0FFFF or #ADD8E6 for all text and interactive elements.
Avoid using #ADD8E6 or #87CEEB for text against each other due to potentially insufficient contrast.
Verify that all color combinations for text and background meet WCAG AA or AAA guidelines, especially for smaller fonts.
Provide clear visual indicators for interactive states, as some blues are close in lightness.

Recommended combinations

Deep Frost

Perfect for strong headers, brand logos, or prominent calls-to-action, leveraging high contrast.

#191970 · #4682B4 · #E0FFFF

Sky Gradient

Ideal for backgrounds, hero images, or graphical elements that require a smooth, cool transition.

#ADD8E6 · #87CEEB · #4682B4

Icy Clarity

Effective for clean data visualizations or infographics, using light blues for data and deep blue for labels.

#87CEEB · #E0FFFF · #191970

CSS variables

:root {
  --arctic-serenity-1: #E0FFFF;
  --arctic-serenity-2: #ADD8E6;
  --arctic-serenity-3: #87CEEB;
  --arctic-serenity-4: #4682B4;
  --arctic-serenity-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "arctic-serenity": {
        1: "#E0FFFF",
        2: "#ADD8E6",
        3: "#87CEEB",
        4: "#4682B4",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#E0FFFF

Color 2#ADD8E6

Color 3#87CEEB

Color 4#4682B4

Color 5#191970

Accessibility

Contrast checker

1.4:1Fail

1.7:1Fail

3.9:1AA18

14.1:1AAA

1.4:1Fail

1.1:1Fail

2.7:1Fail

9.7:1AAA

1.7:1Fail

1.1:1Fail

2.4:1Fail

8.5:1AAA

3.9:1AA18

2.7:1Fail

2.4:1Fail

3.6:1AA18

14.1:1AAA

9.7:1AAA

8.5:1AAA

3.6:1AA18

Similar palettes

More like Arctic Serenity

View all cool

Alpine Frost Serenity