Madras to Cold White Color Palette

About this palette

Madras to Cold White is a 5-color muted, vintage palette: #433B1D (Madras), #D7BBD7 (Girl Crush), #7D5F7F (Muted Purple), #A3976A (A Frond in Need), #ECFCFF (Cold White). It mixes brown, pink, yellow, white tones and feels balanced overall. The strongest text pairing is #433B1D on #ECFCFF with a contrast ratio of 10.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Madras	rgb(67, 59, 29)	hsl(47, 40%, 19%)
Girl Crush	rgb(215, 187, 215)	hsl(300, 26%, 79%)
Muted Purple	rgb(125, 95, 127)	hsl(296, 14%, 44%)
A Frond in Need	rgb(163, 151, 106)	hsl(47, 24%, 53%)
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.

Aa10.59:1 Very good#433B1D on #ECFCFF
Aa10.59:1 Very good#ECFCFF on #433B1D
Aa6.36:1 Good#433B1D on #D7BBD7
Aa6.36:1 Good#D7BBD7 on #433B1D
Aa5.22:1 Good#7D5F7F on #ECFCFF
Aa5.22:1 Good#ECFCFF on #7D5F7F
Aa3.82:1 Poor#433B1D on #A3976A
Aa3.82:1 Poor#A3976A on #433B1D

Color blindness preview

CSS variables

/* Madras to Cold White — https://swatchly.xyz/palette/433b1d-d7bbd7-7d5f7f-a3976a-ecfcff */
:root {
  --madras: #433b1d;
  --girl-crush: #d7bbd7;
  --muted-purple: #7d5f7f;
  --a-frond-in-need: #a3976a;
  --cold-white: #ecfcff;
}

Tailwind CSS v4

/* Madras to Cold White — https://swatchly.xyz/palette/433b1d-d7bbd7-7d5f7f-a3976a-ecfcff */
@theme {
  --color-madras: #433b1d;
  --color-madras-50: #faf5e2;
  --color-madras-100: #f1ebd6;
  --color-madras-200: #ded8be;
  --color-madras-300: #c7c0a2;
  --color-madras-400: #a79f7f;
  --color-madras-500: #8b8262;
  --color-madras-600: #6f6748;
  --color-madras-700: #564f34;
  --color-madras-800: #433b1d;
  --color-madras-900: #322d1a;
  --color-madras-950: #1f1b0d;
  --color-girl-crush: #d7bbd7;
  --color-girl-crush-50: #fff3ff;
  --color-girl-crush-100: #f9e8f9;
  --color-girl-crush-200: #e8d4e8;
  --color-girl-crush-300: #d7bbd7;
  --color-girl-crush-400: #b59bb5;
  --color-girl-crush-500: #997f99;
  --color-girl-crush-600: #7d647d;
  --color-girl-crush-700: #644e64;
  --color-girl-crush-800: #4f3b4f;
  --color-girl-crush-900: #3d2c3d;
  --color-girl-crush-950: #261b26;
  --color-muted-purple: #7d5f7f;
  --color-muted-purple-50: #fef0ff;
  --color-muted-purple-100: #f8e3fa;
  --color-muted-purple-200: #e7cee8;
  --color-muted-purple-300: #d2b6d4;
  --color-muted-purple-400: #b495b6;
  --color-muted-purple-500: #98799a;
  --color-muted-purple-600: #7d5f7f;
  --color-muted-purple-700: #644a66;
  --color-muted-purple-800: #503851;
  --color-muted-purple-900: #3e2a3f;
  --color-muted-purple-950: #271928;
  --color-a-frond-in-need: #a3976a;
  --color-a-frond-in-need-50: #f9f2d6;
  --color-a-frond-in-need-100: #eee6c7;
  --color-a-frond-in-need-200: #dad0ac;
  --color-a-frond-in-need-300: #c3b88f;
  --color-a-frond-in-need-400: #a3976a;
  --color-a-frond-in-need-500: #897e51;
  --color-a-frond-in-need-600: #70653b;
  --color-a-frond-in-need-700: #5a502a;
  --color-a-frond-in-need-800: #483f1d;
  --color-a-frond-in-need-900: #393114;
  --color-a-frond-in-need-950: #251f09;
  --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;
}