Polar Wind to Root Beer Color Palette

About this palette

Polar Wind to Root Beer is a 5-color warm, vintage palette: #B8E0F0 (Polar Wind), #ED8F78 (Lox), #432B24 (English Walnut), #0099B1 (Munsell Blue), #815547 (Root Beer). It mixes blue, red, brown, turquoise tones and feels warm overall. The strongest text pairing is #B8E0F0 on #432B24 with a contrast ratio of 9.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Polar Wind	rgb(184, 224, 240)	hsl(197, 65%, 83%)
Lox	rgb(237, 143, 120)	hsl(12, 76%, 70%)
English Walnut	rgb(67, 43, 36)	hsl(14, 30%, 20%)
Munsell Blue	rgb(0, 153, 177)	hsl(188, 100%, 35%)
Root Beer	rgb(129, 85, 71)	hsl(14, 29%, 39%)

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.29:1 Very good#B8E0F0 on #432B24
Aa9.29:1 Very good#432B24 on #B8E0F0
Aa5.47:1 Good#ED8F78 on #432B24
Aa5.47:1 Good#432B24 on #ED8F78
Aa4.50:1 Good#B8E0F0 on #815547
Aa4.50:1 Good#815547 on #B8E0F0
Aa3.85:1 Poor#432B24 on #0099B1
Aa3.85:1 Poor#0099B1 on #432B24

Color blindness preview

CSS variables

/* Polar Wind to Root Beer — https://swatchly.xyz/palette/b8e0f0-ed8f78-432b24-0099b1-815547 */
:root {
  --polar-wind: #b8e0f0;
  --lox: #ed8f78;
  --english-walnut: #432b24;
  --munsell-blue: #0099b1;
  --root-beer: #815547;
}

Tailwind CSS v4

/* Polar Wind to Root Beer — https://swatchly.xyz/palette/b8e0f0-ed8f78-432b24-0099b1-815547 */
@theme {
  --color-polar-wind: #b8e0f0;
  --color-polar-wind-50: #eaf9ff;
  --color-polar-wind-100: #d8f1fb;
  --color-polar-wind-200: #b8e0f0;
  --color-polar-wind-300: #a7c8d5;
  --color-polar-wind-400: #84a9b7;
  --color-polar-wind-500: #688d9c;
  --color-polar-wind-600: #4e7280;
  --color-polar-wind-700: #3a5b68;
  --color-polar-wind-800: #2a4752;
  --color-polar-wind-900: #1e3740;
  --color-polar-wind-950: #102229;
  --color-lox: #ed8f78;
  --color-lox-50: #fff7f5;
  --color-lox-100: #ffece7;
  --color-lox-200: #ffd3c8;
  --color-lox-300: #ffb5a2;
  --color-lox-400: #ed8f78;
  --color-lox-500: #cc725c;
  --color-lox-600: #ac5541;
  --color-lox-700: #8e3e2c;
  --color-lox-800: #722c1c;
  --color-lox-900: #591f11;
  --color-lox-950: #391006;
  --color-english-walnut: #432b24;
  --color-english-walnut-50: #fff2ee;
  --color-english-walnut-100: #fae6e0;
  --color-english-walnut-200: #e9d2cb;
  --color-english-walnut-300: #d5bab2;
  --color-english-walnut-400: #b79a91;
  --color-english-walnut-500: #9b7e76;
  --color-english-walnut-600: #7f645c;
  --color-english-walnut-700: #664e47;
  --color-english-walnut-800: #513c36;
  --color-english-walnut-900: #432b24;
  --color-english-walnut-950: #281b17;
  --color-munsell-blue: #0099b1;
  --color-munsell-blue-50: #e5faff;
  --color-munsell-blue-100: #caf5ff;
  --color-munsell-blue-200: #99e7f9;
  --color-munsell-blue-300: #75d3e7;
  --color-munsell-blue-400: #43b4cc;
  --color-munsell-blue-500: #0099b1;
  --color-munsell-blue-600: #007b8f;
  --color-munsell-blue-700: #006272;
  --color-munsell-blue-800: #004c59;
  --color-munsell-blue-900: #003b45;
  --color-munsell-blue-950: #00252c;
  --color-root-beer: #815547;
  --color-root-beer-50: #fff2ee;
  --color-root-beer-100: #ffe2d9;
  --color-root-beer-200: #f1cabd;
  --color-root-beer-300: #dcb0a2;
  --color-root-beer-400: #bc8d7f;
  --color-root-beer-500: #9f7162;
  --color-root-beer-600: #815547;
  --color-root-beer-700: #684236;
  --color-root-beer-800: #533328;
  --color-root-beer-900: #42261d;
  --color-root-beer-950: #2a1710;
}