Madonna to Foliage Color Palette

About this palette

Madonna to Foliage is a 5-color muted palette: #463F53 (Madonna), #1D1C0D (Noir Mystique), #DDF1F1 (Bone-Chilling), #A26D6E (Cinnapink), #A1B284 (Foliage). It mixes gray, white, red, green tones and feels balanced overall. The strongest text pairing is #1D1C0D on #DDF1F1 with a contrast ratio of 14.64:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Madonna	rgb(70, 63, 83)	hsl(261, 14%, 29%)
Noir Mystique	rgb(29, 28, 13)	hsl(56, 38%, 8%)
Bone-Chilling	rgb(221, 241, 241)	hsl(180, 42%, 91%)
Cinnapink	rgb(162, 109, 110)	hsl(359, 22%, 53%)
Foliage	rgb(161, 178, 132)	hsl(82, 23%, 61%)

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.

Aa14.64:1 Super#1D1C0D on #DDF1F1
Aa14.64:1 Super#DDF1F1 on #1D1C0D
Aa8.55:1 Very good#463F53 on #DDF1F1
Aa8.55:1 Very good#DDF1F1 on #463F53
Aa7.53:1 Very good#1D1C0D on #A1B284
Aa7.53:1 Very good#A1B284 on #1D1C0D
Aa4.40:1 Poor#463F53 on #A1B284
Aa4.40:1 Poor#A1B284 on #463F53

Color blindness preview

CSS variables

/* Madonna to Foliage — https://swatchly.xyz/palette/463f53-1d1c0d-ddf1f1-a26d6e-a1b284 */
:root {
  --madonna: #463f53;
  --noir-mystique: #1d1c0d;
  --bone-chilling: #ddf1f1;
  --cinnapink: #a26d6e;
  --foliage: #a1b284;
}

Tailwind CSS v4

/* Madonna to Foliage — https://swatchly.xyz/palette/463f53-1d1c0d-ddf1f1-a26d6e-a1b284 */
@theme {
  --color-madonna: #463f53;
  --color-madonna-50: #f7f3ff;
  --color-madonna-100: #ede8f8;
  --color-madonna-200: #dad4e6;
  --color-madonna-300: #c4bdd2;
  --color-madonna-400: #a59db4;
  --color-madonna-500: #8a8299;
  --color-madonna-600: #6f687d;
  --color-madonna-700: #595265;
  --color-madonna-800: #463f53;
  --color-madonna-900: #35313f;
  --color-madonna-950: #211e28;
  --color-noir-mystique: #1d1c0d;
  --color-noir-mystique-50: #f6f6eb;
  --color-noir-mystique-100: #ecece0;
  --color-noir-mystique-200: #d9d8ca;
  --color-noir-mystique-300: #c3c2b1;
  --color-noir-mystique-400: #a3a391;
  --color-noir-mystique-500: #878674;
  --color-noir-mystique-600: #6c6b5a;
  --color-noir-mystique-700: #555444;
  --color-noir-mystique-800: #414033;
  --color-noir-mystique-900: #303025;
  --color-noir-mystique-950: #1d1c0d;
  --color-bone-chilling: #ddf1f1;
  --color-bone-chilling-50: #eef9f9;
  --color-bone-chilling-100: #ddf1f1;
  --color-bone-chilling-200: #cddcdc;
  --color-bone-chilling-300: #b5c5c5;
  --color-bone-chilling-400: #94a6a6;
  --color-bone-chilling-500: #788b8b;
  --color-bone-chilling-600: #5f7070;
  --color-bone-chilling-700: #495959;
  --color-bone-chilling-800: #384546;
  --color-bone-chilling-900: #2a3535;
  --color-bone-chilling-950: #192121;
  --color-cinnapink: #a26d6e;
  --color-cinnapink-50: #ffefef;
  --color-cinnapink-100: #ffdfdf;
  --color-cinnapink-200: #f3c6c6;
  --color-cinnapink-300: #dfacac;
  --color-cinnapink-400: #c08a8a;
  --color-cinnapink-500: #a26d6e;
  --color-cinnapink-600: #865556;
  --color-cinnapink-700: #6e4243;
  --color-cinnapink-800: #583233;
  --color-cinnapink-900: #462627;
  --color-cinnapink-950: #2e1617;
  --color-foliage: #a1b284;
  --color-foliage-50: #f3fde4;
  --color-foliage-100: #eaf5d9;
  --color-foliage-200: #d7e4c2;
  --color-foliage-300: #c1cfa9;
  --color-foliage-400: #a1b284;
  --color-foliage-500: #849568;
  --color-foliage-600: #69784d;
  --color-foliage-700: #515f38;
  --color-foliage-800: #3e4a27;
  --color-foliage-900: #2e381b;
  --color-foliage-950: #1b220d;
}