Icy Breeze to Muted Purple Color Palette

About this palette

Icy Breeze to Muted Purple is a 4-color cool palette: #BEE9F5 (Icy Breeze), #E29668 (Summer’s End), #0D3109 (Haunted Hills), #845988 (Muted Purple). It mixes blue, orange, green, pink tones and feels cool overall. The strongest text pairing is #BEE9F5 on #0D3109 with a contrast ratio of 11.07:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Breeze	rgb(190, 233, 245)	hsl(193, 73%, 85%)
Summer’s End	rgb(226, 150, 104)	hsl(23, 68%, 65%)
Haunted Hills	rgb(13, 49, 9)	hsl(114, 69%, 11%)
Muted Purple	rgb(132, 89, 136)	hsl(295, 21%, 44%)

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.

Aa11.07:1 Very good#BEE9F5 on #0D3109
Aa11.07:1 Very good#0D3109 on #BEE9F5
Aa6.02:1 Good#E29668 on #0D3109
Aa6.02:1 Good#0D3109 on #E29668
Aa4.29:1 Poor#BEE9F5 on #845988
Aa4.29:1 Poor#845988 on #BEE9F5

Color blindness preview

CSS variables

/* Icy Breeze to Muted Purple — https://swatchly.xyz/palette/bee9f5-e29668-0d3109-845988 */
:root {
  --icy-breeze: #bee9f5;
  --summer-s-end: #e29668;
  --haunted-hills: #0d3109;
  --muted-purple: #845988;
}

Tailwind CSS v4

/* Icy Breeze to Muted Purple — https://swatchly.xyz/palette/bee9f5-e29668-0d3109-845988 */
@theme {
  --color-icy-breeze: #bee9f5;
  --color-icy-breeze-50: #f5fdff;
  --color-icy-breeze-100: #e0f8ff;
  --color-icy-breeze-200: #bee9f5;
  --color-icy-breeze-300: #adcfd9;
  --color-icy-breeze-400: #88afba;
  --color-icy-breeze-500: #6a929d;
  --color-icy-breeze-600: #4e7680;
  --color-icy-breeze-700: #395d66;
  --color-icy-breeze-800: #284850;
  --color-icy-breeze-900: #1c373e;
  --color-icy-breeze-950: #0f2228;
  --color-summer-s-end: #e29668;
  --color-summer-s-end-50: #fff6f2;
  --color-summer-s-end-100: #ffece1;
  --color-summer-s-end-200: #ffd4bb;
  --color-summer-s-end-300: #f9b893;
  --color-summer-s-end-400: #e29668;
  --color-summer-s-end-500: #c2794c;
  --color-summer-s-end-600: #a35d2f;
  --color-summer-s-end-700: #86461a;
  --color-summer-s-end-800: #6b3309;
  --color-summer-s-end-900: #542501;
  --color-summer-s-end-950: #361400;
  --color-haunted-hills: #0d3109;
  --color-haunted-hills-50: #e6fde3;
  --color-haunted-hills-100: #daf4d6;
  --color-haunted-hills-200: #c3e2bf;
  --color-haunted-hills-300: #aacca5;
  --color-haunted-hills-400: #88ae82;
  --color-haunted-hills-500: #6d9468;
  --color-haunted-hills-600: #567b51;
  --color-haunted-hills-700: #42653e;
  --color-haunted-hills-800: #33522f;
  --color-haunted-hills-900: #274324;
  --color-haunted-hills-950: #0d3109;
  --color-muted-purple: #845988;
  --color-muted-purple-50: #fef0ff;
  --color-muted-purple-100: #fde0ff;
  --color-muted-purple-200: #edc9f0;
  --color-muted-purple-300: #d9b1dd;
  --color-muted-purple-400: #bb8fbf;
  --color-muted-purple-500: #a073a4;
  --color-muted-purple-600: #845988;
  --color-muted-purple-700: #6b446e;
  --color-muted-purple-800: #553458;
  --color-muted-purple-900: #422645;
  --color-muted-purple-950: #2a162c;
}