Icy Plains to Burnt Coffee Color Palette

About this palette

Icy Plains to Burnt Coffee is a 5-color cool, earthy palette: #CEE0FF (Icy Plains), #E1A100 (Hot Butter), #9D44A2 (Fuchsia Pheromone), #275E00 (Lincoln Green), #2B1B00 (Burnt Coffee). It mixes blue, yellow, pink, green, brown tones and feels cool overall. The strongest text pairing is #CEE0FF on #2B1B00 with a contrast ratio of 12.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(206, 224, 255)	hsl(218, 100%, 90%)
Hot Butter	rgb(225, 161, 0)	hsl(43, 100%, 44%)
Fuchsia Pheromone	rgb(157, 68, 162)	hsl(297, 41%, 45%)
Lincoln Green	rgb(39, 94, 0)	hsl(95, 100%, 18%)
Burnt Coffee	rgb(43, 27, 0)	hsl(38, 100%, 8%)

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.49:1 Super#CEE0FF on #2B1B00
Aa12.49:1 Super#2B1B00 on #CEE0FF
Aa7.38:1 Very good#E1A100 on #2B1B00
Aa7.38:1 Very good#2B1B00 on #E1A100
Aa5.85:1 Good#CEE0FF on #275E00
Aa5.85:1 Good#275E00 on #CEE0FF
Aa4.16:1 Poor#CEE0FF on #9D44A2
Aa4.16:1 Poor#9D44A2 on #CEE0FF

Color blindness preview

CSS variables

/* Icy Plains to Burnt Coffee — https://swatchly.xyz/palette/cee0ff-e1a100-9d44a2-275e00-2b1b00 */
:root {
  --icy-plains: #cee0ff;
  --hot-butter: #e1a100;
  --fuchsia-pheromone: #9d44a2;
  --lincoln-green: #275e00;
  --burnt-coffee: #2b1b00;
}

Tailwind CSS v4

/* Icy Plains to Burnt Coffee — https://swatchly.xyz/palette/cee0ff-e1a100-9d44a2-275e00-2b1b00 */
@theme {
  --color-icy-plains: #cee0ff;
  --color-icy-plains-50: #f8faff;
  --color-icy-plains-100: #eaf2ff;
  --color-icy-plains-200: #cee0ff;
  --color-icy-plains-300: #b9c8e1;
  --color-icy-plains-400: #97a7c3;
  --color-icy-plains-500: #7a8aa7;
  --color-icy-plains-600: #5f6f89;
  --color-icy-plains-700: #49576f;
  --color-icy-plains-800: #374358;
  --color-icy-plains-900: #293345;
  --color-icy-plains-950: #181f2c;
  --color-hot-butter: #e1a100;
  --color-hot-butter-50: #fff9ef;
  --color-hot-butter-100: #fff0d7;
  --color-hot-butter-200: #ffdb9e;
  --color-hot-butter-300: #f7c266;
  --color-hot-butter-400: #e1a100;
  --color-hot-butter-500: #bb8500;
  --color-hot-butter-600: #976b00;
  --color-hot-butter-700: #775400;
  --color-hot-butter-800: #5d4000;
  --color-hot-butter-900: #473000;
  --color-hot-butter-950: #2c1c00;
  --color-fuchsia-pheromone: #9d44a2;
  --color-fuchsia-pheromone-50: #ffefff;
  --color-fuchsia-pheromone-100: #ffe0ff;
  --color-fuchsia-pheromone-200: #fdc0ff;
  --color-fuchsia-pheromone-300: #f1a1f4;
  --color-fuchsia-pheromone-400: #d57dd9;
  --color-fuchsia-pheromone-500: #ba5fbe;
  --color-fuchsia-pheromone-600: #9d44a2;
  --color-fuchsia-pheromone-700: #812f85;
  --color-fuchsia-pheromone-800: #681f6c;
  --color-fuchsia-pheromone-900: #521356;
  --color-fuchsia-pheromone-950: #350838;
  --color-lincoln-green: #275e00;
  --color-lincoln-green-50: #e3ffd9;
  --color-lincoln-green-100: #d3f8c4;
  --color-lincoln-green-200: #b8e6a7;
  --color-lincoln-green-300: #9cd087;
  --color-lincoln-green-400: #78b060;
  --color-lincoln-green-500: #5a9341;
  --color-lincoln-green-600: #407626;
  --color-lincoln-green-700: #275e00;
  --color-lincoln-green-800: #1f4905;
  --color-lincoln-green-900: #153900;
  --color-lincoln-green-950: #0a2300;
  --color-burnt-coffee: #2b1b00;
  --color-burnt-coffee-50: #fff3e2;
  --color-burnt-coffee-100: #f7e9d5;
  --color-burnt-coffee-200: #e5d5bd;
  --color-burnt-coffee-300: #d0bea3;
  --color-burnt-coffee-400: #b29e81;
  --color-burnt-coffee-500: #978365;
  --color-burnt-coffee-600: #7b684b;
  --color-burnt-coffee-700: #635238;
  --color-burnt-coffee-800: #4e3f28;
  --color-burnt-coffee-900: #3c301c;
  --color-burnt-coffee-950: #2b1b00;
}