Madras to Delicate Ice Color Palette

About this palette

Madras to Delicate Ice is a 5-color muted, warm, vintage palette: #3D3F28 (Madras), #476B7C (Winter Storm), #9B7987 (Muted Berry), #C0A1AB (Lily), #B9D5E9 (Delicate Ice). It mixes green, blue, pink tones and feels warm overall. The strongest text pairing is #3D3F28 on #B9D5E9 with a contrast ratio of 7.09:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Madras	rgb(61, 63, 40)	hsl(65, 22%, 20%)
Winter Storm	rgb(71, 107, 124)	hsl(199, 27%, 38%)
Muted Berry	rgb(155, 121, 135)	hsl(335, 15%, 54%)
Lily	rgb(192, 161, 171)	hsl(341, 20%, 69%)
Delicate Ice	rgb(185, 213, 233)	hsl(205, 52%, 82%)

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.09:1 Very good#3D3F28 on #B9D5E9
Aa7.09:1 Very good#B9D5E9 on #3D3F28
Aa4.60:1 Good#3D3F28 on #C0A1AB
Aa4.60:1 Good#C0A1AB on #3D3F28
Aa3.76:1 Poor#476B7C on #B9D5E9
Aa3.76:1 Poor#B9D5E9 on #476B7C

Color blindness preview

CSS variables

/* Madras to Delicate Ice — https://swatchly.xyz/palette/3d3f28-476b7c-9b7987-c0a1ab-b9d5e9 */
:root {
  --madras: #3d3f28;
  --winter-storm: #476b7c;
  --muted-berry: #9b7987;
  --lily: #c0a1ab;
  --delicate-ice: #b9d5e9;
}

Tailwind CSS v4

/* Madras to Delicate Ice — https://swatchly.xyz/palette/3d3f28-476b7c-9b7987-c0a1ab-b9d5e9 */
@theme {
  --color-madras: #3d3f28;
  --color-madras-50: #f5f7e7;
  --color-madras-100: #ebeddc;
  --color-madras-200: #d7dac5;
  --color-madras-300: #c0c2ab;
  --color-madras-400: #9fa289;
  --color-madras-500: #83866c;
  --color-madras-600: #686a52;
  --color-madras-700: #51533d;
  --color-madras-800: #3d3f28;
  --color-madras-900: #2e3021;
  --color-madras-950: #1c1d12;
  --color-winter-storm: #476b7c;
  --color-winter-storm-50: #e9f8ff;
  --color-winter-storm-100: #d6eefb;
  --color-winter-storm-200: #bddae9;
  --color-winter-storm-300: #a2c3d4;
  --color-winter-storm-400: #7fa3b5;
  --color-winter-storm-500: #628798;
  --color-winter-storm-600: #476b7c;
  --color-winter-storm-700: #355564;
  --color-winter-storm-800: #27434f;
  --color-winter-storm-900: #1c333e;
  --color-winter-storm-950: #0f2028;
  --color-muted-berry: #9b7987;
  --color-muted-berry-50: #fff0f6;
  --color-muted-berry-100: #fbe3ec;
  --color-muted-berry-200: #eaced9;
  --color-muted-berry-300: #d5b5c2;
  --color-muted-berry-400: #b795a3;
  --color-muted-berry-500: #9b7987;
  --color-muted-berry-600: #80606d;
  --color-muted-berry-700: #674a56;
  --color-muted-berry-800: #523944;
  --color-muted-berry-900: #402b34;
  --color-muted-berry-950: #291a20;
  --color-lily: #c0a1ab;
  --color-lily-50: #fff6f8;
  --color-lily-100: #feeaf0;
  --color-lily-200: #eed7de;
  --color-lily-300: #dbc1c9;
  --color-lily-400: #c0a1ab;
  --color-lily-500: #a2848e;
  --color-lily-600: #856872;
  --color-lily-700: #6b515a;
  --color-lily-800: #543e45;
  --color-lily-900: #412e34;
  --color-lily-950: #281b1f;
  --color-delicate-ice: #b9d5e9;
  --color-delicate-ice-50: #e3f3ff;
  --color-delicate-ice-100: #d6e8f6;
  --color-delicate-ice-200: #b9d5e9;
  --color-delicate-ice-300: #a7bfd0;
  --color-delicate-ice-400: #87a1b4;
  --color-delicate-ice-500: #6d8799;
  --color-delicate-ice-600: #556d7f;
  --color-delicate-ice-700: #415867;
  --color-delicate-ice-800: #314553;
  --color-delicate-ice-900: #243541;
  --color-delicate-ice-950: #152129;
}