Nordic Noir to Basil Smash Color Palette

About this palette

Nordic Noir to Basil Smash is a 4-color cool palette: #003143 (Nordic Noir), #874700 (Otterly Brown), #9583F4 (Periwinkle), #CADA93 (Basil Smash). It mixes blue, brown, purple, green tones and feels cool overall. The strongest text pairing is #003143 on #CADA93 with a contrast ratio of 9.18:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nordic Noir	rgb(0, 49, 67)	hsl(196, 100%, 13%)
Otterly Brown	rgb(135, 71, 0)	hsl(32, 100%, 26%)
Periwinkle	rgb(149, 131, 244)	hsl(250, 84%, 74%)
Basil Smash	rgb(202, 218, 147)	hsl(74, 49%, 72%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa9.18:1 Very good#003143 on #CADA93
Aa9.18:1 Very good#CADA93 on #003143
Aa4.76:1 Good#874700 on #CADA93
Aa4.76:1 Good#CADA93 on #874700
Aa4.49:1 Poor#003143 on #9583F4
Aa4.49:1 Poor#9583F4 on #003143

Color blindness preview

CSS variables

/* Nordic Noir to Basil Smash — https://swatchly.xyz/palette/003143-874700-9583f4-cada93 */
:root {
  --nordic-noir: #003143;
  --otterly-brown: #874700;
  --periwinkle: #9583f4;
  --basil-smash: #cada93;
}

Tailwind CSS v4

/* Nordic Noir to Basil Smash — https://swatchly.xyz/palette/003143-874700-9583f4-cada93 */
@theme {
  --color-nordic-noir: #003143;
  --color-nordic-noir-50: #eaf8ff;
  --color-nordic-noir-100: #d4f0ff;
  --color-nordic-noir-200: #bbdeef;
  --color-nordic-noir-300: #a1c8db;
  --color-nordic-noir-400: #7ca7bc;
  --color-nordic-noir-500: #5e8ba0;
  --color-nordic-noir-600: #446e82;
  --color-nordic-noir-700: #2f5668;
  --color-nordic-noir-800: #204150;
  --color-nordic-noir-900: #003143;
  --color-nordic-noir-950: #0a1d25;
  --color-otterly-brown: #874700;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d4;
  --color-otterly-brown-200: #ffcda8;
  --color-otterly-brown-300: #f2b485;
  --color-otterly-brown-400: #d6935e;
  --color-otterly-brown-500: #bb773f;
  --color-otterly-brown-600: #9f5e24;
  --color-otterly-brown-700: #874700;
  --color-otterly-brown-800: #6b3700;
  --color-otterly-brown-900: #532900;
  --color-otterly-brown-950: #361800;
  --color-periwinkle: #9583f4;
  --color-periwinkle-50: #f0efff;
  --color-periwinkle-100: #e4e2ff;
  --color-periwinkle-200: #cec9ff;
  --color-periwinkle-300: #b5abff;
  --color-periwinkle-400: #9583f4;
  --color-periwinkle-500: #7c69d7;
  --color-periwinkle-600: #6550b9;
  --color-periwinkle-700: #513c9b;
  --color-periwinkle-800: #402d80;
  --color-periwinkle-900: #322168;
  --color-periwinkle-950: #201347;
  --color-basil-smash: #cada93;
  --color-basil-smash-50: #ecf6cd;
  --color-basil-smash-100: #e1ecbe;
  --color-basil-smash-200: #cada93;
  --color-basil-smash-300: #b6c387;
  --color-basil-smash-400: #97a563;
  --color-basil-smash-500: #7d8b47;
  --color-basil-smash-600: #64712e;
  --color-basil-smash-700: #4f5b1c;
  --color-basil-smash-800: #3e480f;
  --color-basil-smash-900: #2f3706;
  --color-basil-smash-950: #1d2201;
}