Nordic Palette

CSS variables

:root {
  --color-1: #2E3440;
  --color-2: #3B4252;
  --color-3: #5E81AC;
  --color-4: #88C0D0;
  --color-5: #ECEFF4;
}

Tailwind config

// tailwind.config.js
colors: {
  "nordic-1": "#2E3440",
  "nordic-2": "#3B4252",
  "nordic-3": "#5E81AC",
  "nordic-4": "#88C0D0",
  "nordic-5": "#ECEFF4",
}

About this palette

The Nordic palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

More palettes