Icy Breeze to Nordic Noir Color Palette

About this palette

Icy Breeze to Nordic Noir is a 4-color cool palette: #BEEBFC (Icy Breeze), #485C85 (Wizard), #9789CD (Petrified Purple), #013246 (Nordic Noir). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #BEEBFC on #013246 with a contrast ratio of 10.66:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Breeze	rgb(190, 235, 252)	hsl(196, 91%, 87%)
Wizard	rgb(72, 92, 133)	hsl(220, 30%, 40%)
Petrified Purple	rgb(151, 137, 205)	hsl(252, 40%, 67%)
Nordic Noir	rgb(1, 50, 70)	hsl(197, 97%, 14%)

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.

Aa10.66:1 Very good#BEEBFC on #013246
Aa10.66:1 Very good#013246 on #BEEBFC
Aa5.24:1 Good#BEEBFC on #485C85
Aa5.24:1 Good#485C85 on #BEEBFC
Aa4.38:1 Poor#9789CD on #013246
Aa4.38:1 Poor#013246 on #9789CD

Color blindness preview

CSS variables

/* Icy Breeze to Nordic Noir — https://swatchly.xyz/palette/beebfc-485c85-9789cd-013246 */
:root {
  --icy-breeze: #beebfc;
  --wizard: #485c85;
  --petrified-purple: #9789cd;
  --nordic-noir: #013246;
}

Tailwind CSS v4

/* Icy Breeze to Nordic Noir — https://swatchly.xyz/palette/beebfc-485c85-9789cd-013246 */
@theme {
  --color-icy-breeze: #beebfc;
  --color-icy-breeze-50: #d9f3fd;
  --color-icy-breeze-100: #beebfc;
  --color-icy-breeze-200: #b5d7e4;
  --color-icy-breeze-300: #9cc2d1;
  --color-icy-breeze-400: #7ba5b4;
  --color-icy-breeze-500: #618b9a;
  --color-icy-breeze-600: #497180;
  --color-icy-breeze-700: #365b69;
  --color-icy-breeze-800: #264853;
  --color-icy-breeze-900: #1b3741;
  --color-icy-breeze-950: #0e2229;
  --color-wizard: #485c85;
  --color-wizard-50: #f0f5ff;
  --color-wizard-100: #e2ecff;
  --color-wizard-200: #c8d9fc;
  --color-wizard-300: #b0c4eb;
  --color-wizard-400: #90a6d1;
  --color-wizard-500: #768bb7;
  --color-wizard-600: #5d729c;
  --color-wizard-700: #485c85;
  --color-wizard-800: #37486a;
  --color-wizard-900: #293754;
  --color-wizard-950: #182237;
  --color-petrified-purple: #9789cd;
  --color-petrified-purple-50: #f1eeff;
  --color-petrified-purple-100: #e5e0ff;
  --color-petrified-purple-200: #d0c6fe;
  --color-petrified-purple-300: #b8aceb;
  --color-petrified-purple-400: #9789cd;
  --color-petrified-purple-500: #7e70b2;
  --color-petrified-purple-600: #665896;
  --color-petrified-purple-700: #52457c;
  --color-petrified-purple-800: #413566;
  --color-petrified-purple-900: #332952;
  --color-petrified-purple-950: #211938;
  --color-nordic-noir: #013246;
  --color-nordic-noir-50: #eaf8ff;
  --color-nordic-noir-100: #d5f0ff;
  --color-nordic-noir-200: #bbddf0;
  --color-nordic-noir-300: #a0c7dd;
  --color-nordic-noir-400: #7ca7bf;
  --color-nordic-noir-500: #5e8ba2;
  --color-nordic-noir-600: #446f85;
  --color-nordic-noir-700: #30576a;
  --color-nordic-noir-800: #214253;
  --color-nordic-noir-900: #013246;
  --color-nordic-noir-950: #0a1e27;
}