Start generating

Nordic Noir to Freezing Vapour color palette

0B3341Nordic Noir824049Red EleganceA37F3CChai TeaD49CA4Young at HeartCDECF9Freezing Vapour
Open in generator Export PNG, PDF, ASE…

About this palette

Nordic Noir to Freezing Vapour is a 5-color warm, vintage palette: #0B3341 (Nordic Noir), #824049 (Red Elegance), #A37F3C (Chai Tea), #D49CA4 (Young at Heart), #CDECF9 (Freezing Vapour). It mixes blue, red, yellow tones and feels warm overall. The strongest text pairing is #0B3341 on #CDECF9 with a contrast ratio of 10.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nordic Noirrgb(11, 51, 65)hsl(196, 71%, 15%)
Red Elegancergb(130, 64, 73)hsl(352, 34%, 38%)
Chai Teargb(163, 127, 60)hsl(39, 46%, 44%)
Young at Heartrgb(212, 156, 164)hsl(351, 39%, 72%)
Freezing Vapourrgb(205, 236, 249)hsl(198, 79%, 89%)

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.84:1 Very good#0B3341 on #CDECF9
  • Aa10.84:1 Very good#CDECF9 on #0B3341
  • Aa6.10:1 Good#824049 on #CDECF9
  • Aa6.10:1 Good#CDECF9 on #824049
  • Aa5.81:1 Good#0B3341 on #D49CA4
  • Aa5.81:1 Good#D49CA4 on #0B3341
  • Aa3.62:1 Poor#0B3341 on #A37F3C
  • Aa3.62:1 Poor#A37F3C on #0B3341

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nordic Noir to Freezing Vapour — https://swatchly.xyz/palette/0b3341-824049-a37f3c-d49ca4-cdecf9 */
:root {
  --nordic-noir: #0b3341;
  --red-elegance: #824049;
  --chai-tea: #a37f3c;
  --young-at-heart: #d49ca4;
  --freezing-vapour: #cdecf9;
}

Tailwind CSS v4

/* Nordic Noir to Freezing Vapour — https://swatchly.xyz/palette/0b3341-824049-a37f3c-d49ca4-cdecf9 */
@theme {
  --color-nordic-noir: #0b3341;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d7f0fb;
  --color-nordic-noir-200: #bfddea;
  --color-nordic-noir-300: #a5c7d6;
  --color-nordic-noir-400: #81a7b8;
  --color-nordic-noir-500: #648b9b;
  --color-nordic-noir-600: #4a6f7f;
  --color-nordic-noir-700: #355765;
  --color-nordic-noir-800: #25434f;
  --color-nordic-noir-900: #0b3341;
  --color-nordic-noir-950: #0d1e25;
  --color-red-elegance: #824049;
  --color-red-elegance-50: #fff1f2;
  --color-red-elegance-100: #ffe3e5;
  --color-red-elegance-200: #ffc7cc;
  --color-red-elegance-300: #efaeb4;
  --color-red-elegance-400: #d38c93;
  --color-red-elegance-500: #b87078;
  --color-red-elegance-600: #9a575f;
  --color-red-elegance-700: #824049;
  --color-red-elegance-800: #673138;
  --color-red-elegance-900: #51242a;
  --color-red-elegance-950: #351419;
  --color-chai-tea: #a37f3c;
  --color-chai-tea-50: #fff4e0;
  --color-chai-tea-100: #ffe8c0;
  --color-chai-tea-200: #f0d3a2;
  --color-chai-tea-300: #dcbb83;
  --color-chai-tea-400: #be9b5b;
  --color-chai-tea-500: #a37f3c;
  --color-chai-tea-600: #876521;
  --color-chai-tea-700: #6e4f09;
  --color-chai-tea-800: #573d00;
  --color-chai-tea-900: #442e00;
  --color-chai-tea-950: #2b1c00;
  --color-young-at-heart: #d49ca4;
  --color-young-at-heart-50: #fff7f8;
  --color-young-at-heart-100: #ffecee;
  --color-young-at-heart-200: #fdd4d9;
  --color-young-at-heart-300: #ecbdc3;
  --color-young-at-heart-400: #d49ca4;
  --color-young-at-heart-500: #b47f87;
  --color-young-at-heart-600: #96636b;
  --color-young-at-heart-700: #7a4b53;
  --color-young-at-heart-800: #61383f;
  --color-young-at-heart-900: #4b292f;
  --color-young-at-heart-950: #2f171b;
  --color-freezing-vapour: #cdecf9;
  --color-freezing-vapour-50: #e3f4fc;
  --color-freezing-vapour-100: #cdecf9;
  --color-freezing-vapour-200: #c1d8e2;
  --color-freezing-vapour-300: #a9c3cd;
  --color-freezing-vapour-400: #88a4b0;
  --color-freezing-vapour-500: #6d8a96;
  --color-freezing-vapour-600: #55707b;
  --color-freezing-vapour-700: #415a64;
  --color-freezing-vapour-800: #30464f;
  --color-freezing-vapour-900: #23363d;
  --color-freezing-vapour-950: #142127;
}

Similar palettes