Palette

Nordic Frost Calm

A serene blend of cool grays and soft whites, inspired by the tranquil, clean lines of Nordic design and winter frost.

neutralminimal5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Nordic Frost Calm 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 Frost Calm.

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

Data visualization

#F5F5F5#D3D3D3#A9A9A9#696969#404040

Palette guide

How to use Nordic Frost Calm

Overview

The Nordic Frost Calm palette offers a serene blend of cool grays and soft whites, inspired by the tranquil, clean lines of Nordic design and winter frost. This minimalist collection features a crisp near-white, #F5F5F5, alongside a gentle light gray, #D3D3D3. A versatile medium gray, #A9A9A9, provides subtle depth, while the darker #696969 and deep charcoal #404040 anchor the palette. Designers can utilize these shades to create clean, sophisticated, and highly readable interfaces, branding, or editorial layouts that exude a sense of calm and modern simplicity.

Best used for

Minimalist website design and user interfaces
Scandinavian-inspired interior design concepts
Corporate branding requiring a clean and professional image
Photography portfolios and art galleries
E-commerce platforms for luxury or artisanal goods
Editorial layouts for lifestyle or design magazines

Suggested color roles

primary

Employ #F5F5F5 as the dominant background color for a clean, expansive, and airy feel across layouts.

secondary

Use #D3D3D3 for subtle dividers, borders, or secondary background areas to add structure without heaviness.

accent

#A9A9A9 can serve as a soft accent for icons, inactive states, or subtle graphic elements, providing gentle contrast.

background

#F5F5F5 is ideal for main content areas. For depth, consider #D3D3D3 for cards or distinct sections.

text

Utilize #404040 for primary body text on light backgrounds like #F5F5F5 or #D3D3D3 to ensure excellent readability. #696969 is suitable for secondary text or captions.

Accessibility notes

Ensure #404040 or #696969 text on #F5F5F5 or #D3D3D3 backgrounds meets WCAG AA contrast standards.
Be cautious when using #A9A9A9 for text, as it may lack sufficient contrast on lighter shades.
Use a darker gray like #696969 for links on light backgrounds for better visibility.
Provide clear focus indicators for interactive elements, as subtle color changes might not be enough.

Recommended combinations

Clean Slate

Perfect for main content areas, providing a bright background with strong, readable text and subtle divisional elements.

#F5F5F5 · #D3D3D3 · #404040

Deep Frost

Ideal for dark mode themes or sections requiring high contrast and a sophisticated, deep gray aesthetic.

#404040 · #696969 · #A9A9A9

Misty Gradient

Great for subtle gradients, shadows, or layered cards, adding dimension without introducing new hues.

#D3D3D3 · #A9A9A9 · #696969

CSS variables

:root {
  --nordic-frost-calm-1: #F5F5F5;
  --nordic-frost-calm-2: #D3D3D3;
  --nordic-frost-calm-3: #A9A9A9;
  --nordic-frost-calm-4: #696969;
  --nordic-frost-calm-5: #404040;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "nordic-frost-calm": {
        1: "#F5F5F5",
        2: "#D3D3D3",
        3: "#A9A9A9",
        4: "#696969",
        5: "#404040",
      }
    }
  }
}

Hex values

Color 1#F5F5F5

Color 2#D3D3D3

Color 3#A9A9A9

Color 4#696969

Color 5#404040

Accessibility

Contrast checker

1.4:1Fail

2.2:1Fail

5:1AA

9.5:1AAA

1.4:1Fail

1.6:1Fail

3.7:1AA18

6.9:1AA

2.2:1Fail

1.6:1Fail

2.3:1Fail

4.4:1AA18

5:1AA

3.7:1AA18

2.3:1Fail

1.9:1Fail

9.5:1AAA

6.9:1AA

4.4:1AA18

1.9:1Fail

Similar palettes

More like Nordic Frost Calm