Water to Nordic Noir Color Palette

About this palette

Water to Nordic Noir is a 5-color vintage palette: #D9F5FF (Water), #F3A76E (Shrimp Cocktail), #8377B4 (Aster), #4E5000 (Godzilla), #00303D (Nordic Noir). It mixes white, orange, purple, brown, blue tones and feels balanced overall. The strongest text pairing is #D9F5FF on #00303D with a contrast ratio of 12.38:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Water	rgb(217, 245, 255)	hsl(196, 100%, 93%)
Shrimp Cocktail	rgb(243, 167, 110)	hsl(26, 85%, 69%)
Aster	rgb(131, 119, 180)	hsl(252, 29%, 59%)
Godzilla	rgb(78, 80, 0)	hsl(61, 100%, 16%)
Nordic Noir	rgb(0, 48, 61)	hsl(193, 100%, 12%)

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.

Aa12.38:1 Super#D9F5FF on #00303D
Aa12.38:1 Super#00303D on #D9F5FF
Aa7.47:1 Very good#D9F5FF on #4E5000
Aa7.47:1 Very good#4E5000 on #D9F5FF
Aa7.09:1 Very good#F3A76E on #00303D
Aa7.09:1 Very good#00303D on #F3A76E
Aa4.27:1 Poor#F3A76E on #4E5000
Aa4.27:1 Poor#4E5000 on #F3A76E

Color blindness preview

CSS variables

/* Water to Nordic Noir — https://swatchly.xyz/palette/d9f5ff-f3a76e-8377b4-4e5000-00303d */
:root {
  --water: #d9f5ff;
  --shrimp-cocktail: #f3a76e;
  --aster: #8377b4;
  --godzilla: #4e5000;
  --nordic-noir: #00303d;
}

Tailwind CSS v4

/* Water to Nordic Noir — https://swatchly.xyz/palette/d9f5ff-f3a76e-8377b4-4e5000-00303d */
@theme {
  --color-water: #d9f5ff;
  --color-water-50: #f0fbff;
  --color-water-100: #d9f5ff;
  --color-water-200: #cbdfe6;
  --color-water-300: #b1c8d0;
  --color-water-400: #8fa8b1;
  --color-water-500: #738c95;
  --color-water-600: #58717a;
  --color-water-700: #435961;
  --color-water-800: #32464d;
  --color-water-900: #25363c;
  --color-water-950: #152125;
  --color-shrimp-cocktail: #f3a76e;
  --color-shrimp-cocktail-50: #ffeee3;
  --color-shrimp-cocktail-100: #ffe0ca;
  --color-shrimp-cocktail-200: #ffc49a;
  --color-shrimp-cocktail-300: #f3a76e;
  --color-shrimp-cocktail-400: #d18953;
  --color-shrimp-cocktail-500: #b66e35;
  --color-shrimp-cocktail-600: #995519;
  --color-shrimp-cocktail-700: #7e4101;
  --color-shrimp-cocktail-800: #653200;
  --color-shrimp-cocktail-900: #4f2600;
  --color-shrimp-cocktail-950: #331600;
  --color-aster: #8377b4;
  --color-aster-50: #f4f2ff;
  --color-aster-100: #eae6ff;
  --color-aster-200: #d6cdff;
  --color-aster-300: #beb5ed;
  --color-aster-400: #9f93d1;
  --color-aster-500: #8377b4;
  --color-aster-600: #6a5e97;
  --color-aster-700: #54497d;
  --color-aster-800: #423865;
  --color-aster-900: #332a50;
  --color-aster-950: #201935;
  --color-godzilla: #4e5000;
  --color-godzilla-50: #f6f9d3;
  --color-godzilla-100: #ecf0c4;
  --color-godzilla-200: #d7dba6;
  --color-godzilla-300: #bfc387;
  --color-godzilla-400: #9ea25f;
  --color-godzilla-500: #818540;
  --color-godzilla-600: #656826;
  --color-godzilla-700: #4e5000;
  --color-godzilla-800: #3c3e06;
  --color-godzilla-900: #2e3002;
  --color-godzilla-950: #1c1d00;
  --color-nordic-noir: #00303d;
  --color-nordic-noir-50: #e7f9ff;
  --color-nordic-noir-100: #d5f1fb;
  --color-nordic-noir-200: #bcdeea;
  --color-nordic-noir-300: #a2c8d6;
  --color-nordic-noir-400: #7da8b7;
  --color-nordic-noir-500: #5f8a9a;
  --color-nordic-noir-600: #446e7c;
  --color-nordic-noir-700: #305562;
  --color-nordic-noir-800: #20404b;
  --color-nordic-noir-900: #00303d;
  --color-nordic-noir-950: #091c21;
}