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.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#2E3440White12.49:1AA

#3B4252White10.06:1AA

#5E81ACNear-black4.69:1AA

#88C0D0Near-black9.44:1AA

#ECEFF4Near-black16.39:1AA

These colours on each other

8 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#2E3440	#3B4252	#5E81AC	#88C0D0	#ECEFF4
#2E3440	·	1.24Fails	3.10Large only	6.24AA	10.84AA
#3B4252	1.24Fails	·	2.50Fails	5.03AA	8.73AA
#5E81AC	3.10Large only	2.50Fails	·	2.01Fails	3.50Large only
#88C0D0	6.24AA	5.03AA	2.01Fails	·	1.74Fails
#ECEFF4	10.84AA	8.73AA	3.50Large only	1.74Fails	·

More palettes

Gradients in the same range

Slate Fade Arctic Deep Sea

Nordic Palette

Related

Gradients in the same range