styleColor Scheme

Nordic Frost

A cool Nordic palette with icy blues and crisp whites. Captures the clean, minimal beauty of Scandinavian winter landscapes.

#ffffff
#f8fafc
#2563eb
#94a3b8
#0ea5e9

Color Breakdown

Role

background

Name

White

Hex

#ffffff

Tailwind

bg-white

Role

surface

Name

Slate 50

Hex

#f8fafc

Tailwind

bg-slate-50

Role

primary

Name

Blue 600

Hex

#2563eb

Tailwind

text-blue-600

Role

secondary

Name

Slate 400

Hex

#94a3b8

Tailwind

text-slate-400

Role

accent

Name

Sky 500

Hex

#0ea5e9

Tailwind

bg-sky-500

Live Preview

Welcome Back

This is a live preview of the Nordic Frost color scheme applied to a sample card component. See how the colors work together in a realistic UI context.

Design Rationale

Cool blues on bright white backgrounds evoke frost-covered Nordic landscapes. The restrained palette reflects Scandinavian design philosophy of purposeful simplicity.

Use Cases

Scandinavian brandsWinter sports sitesClean tech companies

CSS Variables

CSS
:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --primary: #2563eb;
  --secondary: #94a3b8;
  --accent: #0ea5e9;
}

Tailwind Config

JavaScript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'nordic-frost': {
  'background': '#ffffff',  // bg-white
  'surface': '#f8fafc',  // bg-slate-50
  'primary': '#2563eb',  // text-blue-600
  'secondary': '#94a3b8',  // text-slate-400
  'accent': '#0ea5e9',  // bg-sky-500
        },
      },
    },
  },
};

Related Color Schemes

Build with This Scheme

Use our palette generator to customize and extend this color scheme for your project.

Open Palette Generator

Frequently Asked Questions

What defines Scandinavian color design?
Scandinavian design favors light backgrounds, cool blue accents, and minimal color to create clean, functional aesthetics.