Put on Ice to After Dark Color Palette

About this palette

Put on Ice to After Dark is a 5-color muted, gradient palette: #CBDCE8 (Put on Ice), #B1B99F (Meadow Morn), #7C8367 (Wreath), #5A6370 (Midnight Shadow), #3E3336 (After Dark). It mixes gray, green tones and feels cool overall. The strongest text pairing is #CBDCE8 on #3E3336 with a contrast ratio of 8.63:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Put on Ice	rgb(203, 220, 232)	hsl(205, 39%, 85%)
Meadow Morn	rgb(177, 185, 159)	hsl(78, 16%, 67%)
Wreath	rgb(124, 131, 103)	hsl(75, 12%, 46%)
Midnight Shadow	rgb(90, 99, 112)	hsl(215, 11%, 40%)
After Dark	rgb(62, 51, 54)	hsl(344, 10%, 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.63:1 Very good#CBDCE8 on #3E3336
Aa8.63:1 Very good#3E3336 on #CBDCE8
Aa5.95:1 Good#B1B99F on #3E3336
Aa5.95:1 Good#3E3336 on #B1B99F
Aa4.33:1 Poor#CBDCE8 on #5A6370
Aa4.33:1 Poor#5A6370 on #CBDCE8
Aa3.06:1 Poor#7C8367 on #3E3336
Aa3.06:1 Poor#3E3336 on #7C8367

Color blindness preview

CSS variables

/* Put on Ice to After Dark — https://swatchly.xyz/palette/cbdce8-b1b99f-7c8367-5a6370-3e3336 */
:root {
  --put-on-ice: #cbdce8;
  --meadow-morn: #b1b99f;
  --wreath: #7c8367;
  --midnight-shadow: #5a6370;
  --after-dark: #3e3336;
}

Tailwind CSS v4

/* Put on Ice to After Dark — https://swatchly.xyz/palette/cbdce8-b1b99f-7c8367-5a6370-3e3336 */
@theme {
  --color-put-on-ice: #cbdce8;
  --color-put-on-ice-50: #eff8fe;
  --color-put-on-ice-100: #e4eef6;
  --color-put-on-ice-200: #cbdce8;
  --color-put-on-ice-300: #b7c5cf;
  --color-put-on-ice-400: #96a5b0;
  --color-put-on-ice-500: #7a8994;
  --color-put-on-ice-600: #606f79;
  --color-put-on-ice-700: #4a5861;
  --color-put-on-ice-800: #38444c;
  --color-put-on-ice-900: #2a343b;
  --color-put-on-ice-950: #192025;
  --color-meadow-morn: #b1b99f;
  --color-meadow-morn-50: #ecf1e1;
  --color-meadow-morn-100: #e0e6d4;
  --color-meadow-morn-200: #cad1bc;
  --color-meadow-morn-300: #b1b99f;
  --color-meadow-morn-400: #949c83;
  --color-meadow-morn-500: #7b826a;
  --color-meadow-morn-600: #636a53;
  --color-meadow-morn-700: #4f5540;
  --color-meadow-morn-800: #3e4331;
  --color-meadow-morn-900: #313525;
  --color-meadow-morn-950: #1e2116;
  --color-wreath: #7c8367;
  --color-wreath-50: #f2f6e5;
  --color-wreath-100: #e6ebd8;
  --color-wreath-200: #d1d7c0;
  --color-wreath-300: #b9c0a6;
  --color-wreath-400: #989f83;
  --color-wreath-500: #7c8367;
  --color-wreath-600: #636a4f;
  --color-wreath-700: #4e543c;
  --color-wreath-800: #3d422d;
  --color-wreath-900: #2f3322;
  --color-wreath-950: #1d2013;
  --color-midnight-shadow: #5a6370;
  --color-midnight-shadow-50: #f0f6fe;
  --color-midnight-shadow-100: #e3eaf4;
  --color-midnight-shadow-200: #cdd5e0;
  --color-midnight-shadow-300: #b3bcc9;
  --color-midnight-shadow-400: #929ba9;
  --color-midnight-shadow-500: #757f8c;
  --color-midnight-shadow-600: #5a6370;
  --color-midnight-shadow-700: #474e59;
  --color-midnight-shadow-800: #363d47;
  --color-midnight-shadow-900: #292f37;
  --color-midnight-shadow-950: #191d23;
  --color-after-dark: #3e3336;
  --color-after-dark-50: #fbf3f5;
  --color-after-dark-100: #f1e8eb;
  --color-after-dark-200: #dfd4d7;
  --color-after-dark-300: #c9bdc0;
  --color-after-dark-400: #ab9ea2;
  --color-after-dark-500: #918487;
  --color-after-dark-600: #766a6d;
  --color-after-dark-700: #605457;
  --color-after-dark-800: #4c4245;
  --color-after-dark-900: #3e3336;
  --color-after-dark-950: #262022;
}