Palette

Nordic Winter Glaze

A serene and crisp collection reminiscent of icy landscapes and clear winter skies.

coolminimal5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#B0C4DE#F0F8FF#A9A9A9#2F4F4F#C0C0C0

Palette guide

How to use Nordic Winter Glaze

Overview

The Nordic Winter Glaze palette offers a serene and crisp collection reminiscent of icy landscapes and clear winter skies. This palette is a designer's dream for creating clean, minimalist, and refreshing aesthetics. It features a spectrum from the dark, sophisticated #2F4F4F to the bright, ethereal #F0F8FF, complemented by the soft blue-gray #B0C4DE and versatile grays like #A9A9A9 and #C0C0C0. This combination provides a strong foundation for projects that require clarity, professionalism, and a cool, calm demeanor. It's particularly effective for digital interfaces, branding, and content that benefits from a pristine and uncluttered visual presence.

Best used for

Clean and professional corporate websites
Educational materials and platforms
Winter-themed product marketing and packaging
Health and wellness app interfaces
Photography portfolios with a focus on cool tones
Architectural design presentations

Suggested color roles

primary

Utilize #B0C4DE as a soft, inviting primary color for headers, large buttons, or background sections, providing a gentle blue hue.

secondary

Employ #A9A9A9 for secondary text, borders, or subtle dividing lines, offering a neutral and balanced supporting role.

accent

Reserve #2F4F4F for strong accents, critical information, or primary calls to action, leveraging its depth for maximum impact.

background

Use #F0F8FF as the main background color to establish a pristine, airy, and expansive canvas that enhances content readability.

text

For optimal legibility, use #2F4F4F for all body text and headings on light backgrounds. For lighter text on dark elements, a clean white is recommended.

Accessibility notes

Ensure #2F4F4F on #F0F8FF provides excellent contrast for all text, easily meeting WCAG AAA standards.
Verify that #A9A9A9 or #C0C0C0 on #F0F8FF is used for secondary text only when contrast is sufficient, typically for larger font sizes.
Avoid using #B0C4DE for small text on #F0F8FF, as the contrast may not be adequate for readability.
Interactive elements should have clearly defined hover and focus states, perhaps using #2F4F4F for strong visual cues.

Recommended combinations

Crisp Contrast

A powerful combination for headings (#2F4F4F) on a clean background (#F0F8FF), with #B0C4DE providing a soft visual break or accent.

#2F4F4F · #F0F8FF · #B0C4DE

Glazed Serenity

Ideal for card backgrounds (#B0C4DE) with subtle text or icons (#A9A9A9), all resting on the light #F0F8FF canvas.

#B0C4DE · #A9A9A9 · #F0F8FF

Steel Ice

Use #C0C0C0 for subtle borders or inactive states, with #2F4F4F for active elements, and #B0C4DE as a background highlight.

#C0C0C0 · #2F4F4F · #B0C4DE

CSS variables

:root {
  --nordic-winter-glaze-1: #B0C4DE;
  --nordic-winter-glaze-2: #F0F8FF;
  --nordic-winter-glaze-3: #A9A9A9;
  --nordic-winter-glaze-4: #2F4F4F;
  --nordic-winter-glaze-5: #C0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-winter-glaze": {
        1: "#B0C4DE",
        2: "#F0F8FF",
        3: "#A9A9A9",
        4: "#2F4F4F",
        5: "#C0C0C0",
      }
    }
  }
}

Hex values

Color 1#B0C4DE

Color 2#F0F8FF

Color 3#A9A9A9

Color 4#2F4F4F

Color 5#C0C0C0

Accessibility

Contrast checker

1.7:1Fail

1.3:1Fail

5:1AA

1:1Fail

1.7:1Fail

2.2:1Fail

8.3:1AAA

1.7:1Fail

1.3:1Fail

2.2:1Fail

3.8:1AA18

1.3:1Fail

5:1AA

8.3:1AAA

3.8:1AA18

4.9:1AA

1:1Fail

1.7:1Fail

1.3:1Fail

4.9:1AA

Similar palettes

More like Nordic Winter Glaze

Nordic Winter Glaze

See it in context.

Ready when you are.

Built with Nordic Winter Glaze.

How to use Nordic Winter Glaze

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Crisp Contrast

Glazed Serenity

Steel Ice

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Nordic Winter Glaze