Delicate Ice to Charcoal Color Palette

About this palette

Delicate Ice to Charcoal is a 5-color muted, vintage palette: #B6D0E7 (Delicate Ice), #BEA3B6 (Lily), #697C8F (Whale Shark), #7C6141 (Autumn Gold), #2F3C33 (Charcoal). It mixes blue, pink, brown, gray tones and feels balanced overall. The strongest text pairing is #B6D0E7 on #2F3C33 with a contrast ratio of 7.25:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Delicate Ice	rgb(182, 208, 231)	hsl(208, 51%, 81%)
Lily	rgb(190, 163, 182)	hsl(318, 17%, 69%)
Whale Shark	rgb(105, 124, 143)	hsl(210, 15%, 49%)
Autumn Gold	rgb(124, 97, 65)	hsl(33, 31%, 37%)
Charcoal	rgb(47, 60, 51)	hsl(138, 12%, 21%)

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.

Aa7.25:1 Very good#B6D0E7 on #2F3C33
Aa7.25:1 Very good#2F3C33 on #B6D0E7
Aa5.02:1 Good#BEA3B6 on #2F3C33
Aa5.02:1 Good#2F3C33 on #BEA3B6
Aa3.61:1 Poor#B6D0E7 on #7C6141
Aa3.61:1 Poor#7C6141 on #B6D0E7

Color blindness preview

CSS variables

/* Delicate Ice to Charcoal — https://swatchly.xyz/palette/b6d0e7-bea3b6-697c8f-7c6141-2f3c33 */
:root {
  --delicate-ice: #b6d0e7;
  --lily: #bea3b6;
  --whale-shark: #697c8f;
  --autumn-gold: #7c6141;
  --charcoal: #2f3c33;
}

Tailwind CSS v4

/* Delicate Ice to Charcoal — https://swatchly.xyz/palette/b6d0e7-bea3b6-697c8f-7c6141-2f3c33 */
@theme {
  --color-delicate-ice: #b6d0e7;
  --color-delicate-ice-50: #e0f0fe;
  --color-delicate-ice-100: #d2e4f4;
  --color-delicate-ice-200: #b6d0e7;
  --color-delicate-ice-300: #a4bbcf;
  --color-delicate-ice-400: #869eb3;
  --color-delicate-ice-500: #6c8499;
  --color-delicate-ice-600: #556b7f;
  --color-delicate-ice-700: #415668;
  --color-delicate-ice-800: #324554;
  --color-delicate-ice-900: #253542;
  --color-delicate-ice-950: #15212a;
  --color-lily: #bea3b6;
  --color-lily-50: #fff6fc;
  --color-lily-100: #fcebf7;
  --color-lily-200: #ecd8e6;
  --color-lily-300: #d9c2d2;
  --color-lily-400: #bea3b6;
  --color-lily-500: #a08698;
  --color-lily-600: #836a7b;
  --color-lily-700: #695262;
  --color-lily-800: #523e4c;
  --color-lily-900: #3f2e3a;
  --color-lily-950: #271b23;
  --color-whale-shark: #697c8f;
  --color-whale-shark-50: #eaf4ff;
  --color-whale-shark-100: #dbe8f6;
  --color-whale-shark-200: #c3d3e3;
  --color-whale-shark-300: #a8bacd;
  --color-whale-shark-400: #8699ad;
  --color-whale-shark-500: #697c8f;
  --color-whale-shark-600: #526475;
  --color-whale-shark-700: #404f5f;
  --color-whale-shark-800: #313e4c;
  --color-whale-shark-900: #25313c;
  --color-whale-shark-950: #161f27;
  --color-autumn-gold: #7c6141;
  --color-autumn-gold-50: #fff3e6;
  --color-autumn-gold-100: #fae7d1;
  --color-autumn-gold-200: #e8d1b7;
  --color-autumn-gold-300: #d3b99b;
  --color-autumn-gold-400: #b59878;
  --color-autumn-gold-500: #987c5b;
  --color-autumn-gold-600: #7c6141;
  --color-autumn-gold-700: #644c30;
  --color-autumn-gold-800: #4f3b22;
  --color-autumn-gold-900: #3e2d18;
  --color-autumn-gold-950: #281b0c;
  --color-charcoal: #2f3c33;
  --color-charcoal-50: #eff8f1;
  --color-charcoal-100: #e4eee7;
  --color-charcoal-200: #cfdbd2;
  --color-charcoal-300: #b7c5bb;
  --color-charcoal-400: #98a79d;
  --color-charcoal-500: #7e8d82;
  --color-charcoal-600: #657369;
  --color-charcoal-700: #505d54;
  --color-charcoal-800: #3f4a42;
  --color-charcoal-900: #2f3c33;
  --color-charcoal-950: #1e2620;
}