Polar to Everglade Color Palette

About this palette

Polar to Everglade is a 5-color muted, gradient palette: #E0F3EA (Polar), #D1AF9A (Frappé), #A88C7E (Earthbound), #727085 (Mamba), #2C453B (Everglade). It mixes white, orange, gray, turquoise tones and feels warm overall. The strongest text pairing is #E0F3EA on #2C453B with a contrast ratio of 8.99:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Polar	rgb(224, 243, 234)	hsl(152, 44%, 92%)
Frappé	rgb(209, 175, 154)	hsl(23, 37%, 71%)
Earthbound	rgb(168, 140, 126)	hsl(20, 19%, 58%)
Mamba	rgb(114, 112, 133)	hsl(246, 9%, 48%)
Everglade	rgb(44, 69, 59)	hsl(156, 22%, 22%)

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.

Aa8.99:1 Very good#E0F3EA on #2C453B
Aa8.99:1 Very good#2C453B on #E0F3EA
Aa5.10:1 Good#D1AF9A on #2C453B
Aa5.10:1 Good#2C453B on #D1AF9A
Aa4.16:1 Poor#E0F3EA on #727085
Aa4.16:1 Poor#727085 on #E0F3EA
Aa3.32:1 Poor#A88C7E on #2C453B
Aa3.32:1 Poor#2C453B on #A88C7E

Color blindness preview

CSS variables

/* Polar to Everglade — https://swatchly.xyz/palette/e0f3ea-d1af9a-a88c7e-727085-2c453b */
:root {
  --polar: #e0f3ea;
  --frapp: #d1af9a;
  --earthbound: #a88c7e;
  --mamba: #727085;
  --everglade: #2c453b;
}

Tailwind CSS v4

/* Polar to Everglade — https://swatchly.xyz/palette/e0f3ea-d1af9a-a88c7e-727085-2c453b */
@theme {
  --color-polar: #e0f3ea;
  --color-polar-50: #f0faf5;
  --color-polar-100: #e0f3ea;
  --color-polar-200: #d0ddd7;
  --color-polar-300: #b7c7bf;
  --color-polar-400: #96a79f;
  --color-polar-500: #7a8c84;
  --color-polar-600: #607169;
  --color-polar-700: #4a5952;
  --color-polar-800: #394640;
  --color-polar-900: #2b3631;
  --color-polar-950: #19211e;
  --color-frapp: #d1af9a;
  --color-frapp-50: #ffece0;
  --color-frapp-100: #f7dfd1;
  --color-frapp-200: #e4c9b8;
  --color-frapp-300: #d1af9a;
  --color-frapp-400: #b2927e;
  --color-frapp-500: #987865;
  --color-frapp-600: #7e604d;
  --color-frapp-700: #664c3b;
  --color-frapp-800: #523b2c;
  --color-frapp-900: #422e21;
  --color-frapp-950: #2a1c12;
  --color-earthbound: #a88c7e;
  --color-earthbound-50: #fff5f0;
  --color-earthbound-100: #feece3;
  --color-earthbound-200: #efd9cf;
  --color-earthbound-300: #dcc4b8;
  --color-earthbound-400: #c1a699;
  --color-earthbound-500: #a88c7e;
  --color-earthbound-600: #8a6f62;
  --color-earthbound-700: #6f574b;
  --color-earthbound-800: #584338;
  --color-earthbound-900: #443229;
  --color-earthbound-950: #2a1e17;
  --color-mamba: #727085;
  --color-mamba-50: #f5f4ff;
  --color-mamba-100: #ecebf9;
  --color-mamba-200: #d9d8e9;
  --color-mamba-300: #c4c2d6;
  --color-mamba-400: #a6a4b9;
  --color-mamba-500: #8b899f;
  --color-mamba-600: #727085;
  --color-mamba-700: #5a586b;
  --color-mamba-800: #464455;
  --color-mamba-900: #353442;
  --color-mamba-950: #21202a;
  --color-everglade: #2c453b;
  --color-everglade-50: #e9faf2;
  --color-everglade-100: #def0e8;
  --color-everglade-200: #c8ddd4;
  --color-everglade-300: #aec7bc;
  --color-everglade-400: #8ca79c;
  --color-everglade-500: #708b80;
  --color-everglade-600: #567065;
  --color-everglade-700: #41584f;
  --color-everglade-800: #2c453b;
  --color-everglade-900: #23342d;
  --color-everglade-950: #14201b;
}