Icy Breeze to Matt Purple Color Palette

About this palette

Icy Breeze to Matt Purple is a 4-color cool palette: #BBECFF (Icy Breeze), #884A37 (Gingerbread), #163209 (Dark Serpent), #9F78E0 (Matt Purple). It mixes blue, red, green, purple tones and feels cool overall. The strongest text pairing is #BBECFF on #163209 with a contrast ratio of 11.08:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Breeze	rgb(187, 236, 255)	hsl(197, 100%, 87%)
Gingerbread	rgb(136, 74, 55)	hsl(14, 42%, 37%)
Dark Serpent	rgb(22, 50, 9)	hsl(101, 69%, 12%)
Matt Purple	rgb(159, 120, 224)	hsl(262, 63%, 67%)

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.08:1 Very good#BBECFF on #163209
Aa11.08:1 Very good#163209 on #BBECFF
Aa5.37:1 Good#BBECFF on #884A37
Aa5.37:1 Good#884A37 on #BBECFF
Aa4.17:1 Poor#163209 on #9F78E0
Aa4.17:1 Poor#9F78E0 on #163209

Color blindness preview

CSS variables

/* Icy Breeze to Matt Purple — https://swatchly.xyz/palette/bbecff-884a37-163209-9f78e0 */
:root {
  --icy-breeze: #bbecff;
  --gingerbread: #884a37;
  --dark-serpent: #163209;
  --matt-purple: #9f78e0;
}

Tailwind CSS v4

/* Icy Breeze to Matt Purple — https://swatchly.xyz/palette/bbecff-884a37-163209-9f78e0 */
@theme {
  --color-icy-breeze: #bbecff;
  --color-icy-breeze-50: #d7f4ff;
  --color-icy-breeze-100: #bbecff;
  --color-icy-breeze-200: #b3d8e6;
  --color-icy-breeze-300: #9ac3d3;
  --color-icy-breeze-400: #78a6b7;
  --color-icy-breeze-500: #5d8b9d;
  --color-icy-breeze-600: #457282;
  --color-icy-breeze-700: #325c6b;
  --color-icy-breeze-800: #234855;
  --color-icy-breeze-900: #183743;
  --color-icy-breeze-950: #0c232b;
  --color-gingerbread: #884a37;
  --color-gingerbread-50: #fff2ee;
  --color-gingerbread-100: #ffe5dc;
  --color-gingerbread-200: #ffccbc;
  --color-gingerbread-300: #f0b4a1;
  --color-gingerbread-400: #d5947f;
  --color-gingerbread-500: #bb7964;
  --color-gingerbread-600: #9f604c;
  --color-gingerbread-700: #884a37;
  --color-gingerbread-800: #6c3828;
  --color-gingerbread-900: #562a1c;
  --color-gingerbread-950: #38180e;
  --color-dark-serpent: #163209;
  --color-dark-serpent-50: #e9fce2;
  --color-dark-serpent-100: #ddf3d5;
  --color-dark-serpent-200: #c7e1be;
  --color-dark-serpent-300: #aecba3;
  --color-dark-serpent-400: #8bab7f;
  --color-dark-serpent-500: #6d8d62;
  --color-dark-serpent-600: #537147;
  --color-dark-serpent-700: #3d5733;
  --color-dark-serpent-800: #2b4223;
  --color-dark-serpent-900: #163209;
  --color-dark-serpent-950: #101c0b;
  --color-matt-purple: #9f78e0;
  --color-matt-purple-50: #f8f5ff;
  --color-matt-purple-100: #f1ebff;
  --color-matt-purple-200: #e2d5ff;
  --color-matt-purple-300: #d1bbff;
  --color-matt-purple-400: #b894f8;
  --color-matt-purple-500: #9f78e0;
  --color-matt-purple-600: #825bc0;
  --color-matt-purple-700: #6943a0;
  --color-matt-purple-800: #533183;
  --color-matt-purple-900: #402268;
  --color-matt-purple-950: #281244;
}