Icebreaker to Cold White Color Palette

About this palette

Icebreaker to Cold White is a 5-color muted palette: #ACC3C9 (Icebreaker), #9C8F6D (Gramps Shoehorn), #705A6B (Royal Fig), #4E3C4A (Pitch Black), #ECFCFF (Cold White). It mixes gray, yellow, pink, white tones and feels warm overall. The strongest text pairing is #4E3C4A on #ECFCFF with a contrast ratio of 9.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icebreaker	rgb(172, 195, 201)	hsl(192, 21%, 73%)
Gramps Shoehorn	rgb(156, 143, 109)	hsl(43, 19%, 52%)
Royal Fig	rgb(112, 90, 107)	hsl(314, 11%, 40%)
Pitch Black	rgb(78, 60, 74)	hsl(313, 13%, 27%)
Cold White	rgb(236, 252, 255)	hsl(189, 100%, 96%)

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.63:1 Very good#4E3C4A on #ECFCFF
Aa9.63:1 Very good#ECFCFF on #4E3C4A
Aa5.93:1 Good#705A6B on #ECFCFF
Aa5.93:1 Good#ECFCFF on #705A6B
Aa5.51:1 Good#ACC3C9 on #4E3C4A
Aa5.51:1 Good#4E3C4A on #ACC3C9
Aa3.39:1 Poor#ACC3C9 on #705A6B
Aa3.39:1 Poor#705A6B on #ACC3C9

Color blindness preview

CSS variables

/* Icebreaker to Cold White — https://swatchly.xyz/palette/acc3c9-9c8f6d-705a6b-4e3c4a-ecfcff */
:root {
  --icebreaker: #acc3c9;
  --gramps-shoehorn: #9c8f6d;
  --royal-fig: #705a6b;
  --pitch-black: #4e3c4a;
  --cold-white: #ecfcff;
}

Tailwind CSS v4

/* Icebreaker to Cold White — https://swatchly.xyz/palette/acc3c9-9c8f6d-705a6b-4e3c4a-ecfcff */
@theme {
  --color-icebreaker: #acc3c9;
  --color-icebreaker-50: #e9f7fa;
  --color-icebreaker-100: #deecf0;
  --color-icebreaker-200: #c7d9dd;
  --color-icebreaker-300: #acc3c9;
  --color-icebreaker-400: #8ea4a9;
  --color-icebreaker-500: #73898f;
  --color-icebreaker-600: #5a6f74;
  --color-icebreaker-700: #45585d;
  --color-icebreaker-800: #354549;
  --color-icebreaker-900: #283639;
  --color-icebreaker-950: #172124;
  --color-gramps-shoehorn: #9c8f6d;
  --color-gramps-shoehorn-50: #fef7e3;
  --color-gramps-shoehorn-100: #f7eed9;
  --color-gramps-shoehorn-200: #e6dcc3;
  --color-gramps-shoehorn-300: #d2c7aa;
  --color-gramps-shoehorn-400: #b6a989;
  --color-gramps-shoehorn-500: #9c8f6d;
  --color-gramps-shoehorn-600: #7f7352;
  --color-gramps-shoehorn-700: #665a3c;
  --color-gramps-shoehorn-800: #50462b;
  --color-gramps-shoehorn-900: #3d351e;
  --color-gramps-shoehorn-950: #262010;
  --color-royal-fig: #705a6b;
  --color-royal-fig-50: #fff0fb;
  --color-royal-fig-100: #f4e4f0;
  --color-royal-fig-200: #e0cddc;
  --color-royal-fig-300: #cab4c4;
  --color-royal-fig-400: #aa92a4;
  --color-royal-fig-500: #8c7587;
  --color-royal-fig-600: #705a6b;
  --color-royal-fig-700: #594755;
  --color-royal-fig-800: #473643;
  --color-royal-fig-900: #372934;
  --color-royal-fig-950: #231921;
  --color-pitch-black: #4e3c4a;
  --color-pitch-black-50: #fdf1fa;
  --color-pitch-black-100: #f4e6f1;
  --color-pitch-black-200: #e2d2de;
  --color-pitch-black-300: #cdbac9;
  --color-pitch-black-400: #af9aaa;
  --color-pitch-black-500: #937f8f;
  --color-pitch-black-600: #786574;
  --color-pitch-black-700: #614f5d;
  --color-pitch-black-800: #4e3c4a;
  --color-pitch-black-900: #3b2e38;
  --color-pitch-black-950: #251c23;
  --color-cold-white: #ecfcff;
  --color-cold-white-50: #ecfcff;
  --color-cold-white-100: #e7f0f2;
  --color-cold-white-200: #d1dcde;
  --color-cold-white-300: #b8c5c8;
  --color-cold-white-400: #97a6a8;
  --color-cold-white-500: #7b8a8c;
  --color-cold-white-600: #616f71;
  --color-cold-white-700: #4b585a;
  --color-cold-white-800: #3a4547;
  --color-cold-white-900: #2c3536;
  --color-cold-white-950: #1a2122;
}