Madras to Chivalrous Walrus Color Palette

About this palette

Madras to Chivalrous Walrus is a 5-color muted, warm, earthy palette: #414130 (Madras), #E9DAC0 (Clam Up), #B99479 (Cookie Crumb), #28231A (Young Night), #7F6358 (Chivalrous Walrus). It mixes gray, yellow, orange, brown tones and feels warm overall. The strongest text pairing is #E9DAC0 on #28231A with a contrast ratio of 11.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Madras	rgb(65, 65, 48)	hsl(60, 15%, 22%)
Clam Up	rgb(233, 218, 192)	hsl(38, 48%, 83%)
Cookie Crumb	rgb(185, 148, 121)	hsl(25, 31%, 60%)
Young Night	rgb(40, 35, 26)	hsl(39, 21%, 13%)
Chivalrous Walrus	rgb(127, 99, 88)	hsl(17, 18%, 42%)

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.

Aa11.34:1 Very good#E9DAC0 on #28231A
Aa11.34:1 Very good#28231A on #E9DAC0
Aa7.54:1 Very good#414130 on #E9DAC0
Aa7.54:1 Very good#E9DAC0 on #414130
Aa5.63:1 Good#B99479 on #28231A
Aa5.63:1 Good#28231A on #B99479
Aa3.98:1 Poor#E9DAC0 on #7F6358
Aa3.98:1 Poor#7F6358 on #E9DAC0

Color blindness preview

CSS variables

/* Madras to Chivalrous Walrus — https://swatchly.xyz/palette/414130-e9dac0-b99479-28231a-7f6358 */
:root {
  --madras: #414130;
  --clam-up: #e9dac0;
  --cookie-crumb: #b99479;
  --young-night: #28231a;
  --chivalrous-walrus: #7f6358;
}

Tailwind CSS v4

/* Madras to Chivalrous Walrus — https://swatchly.xyz/palette/414130-e9dac0-b99479-28231a-7f6358 */
@theme {
  --color-madras: #414130;
  --color-madras-50: #f6f6eb;
  --color-madras-100: #ececdf;
  --color-madras-200: #d8d9c9;
  --color-madras-300: #c1c2b0;
  --color-madras-400: #a2a28f;
  --color-madras-500: #868673;
  --color-madras-600: #6b6b59;
  --color-madras-700: #545444;
  --color-madras-800: #414130;
  --color-madras-900: #323226;
  --color-madras-950: #1e1e16;
  --color-clam-up: #e9dac0;
  --color-clam-up-50: #fff7ea;
  --color-clam-up-100: #f7eede;
  --color-clam-up-200: #e9dac0;
  --color-clam-up-300: #cfc3ae;
  --color-clam-up-400: #b0a38b;
  --color-clam-up-500: #94866e;
  --color-clam-up-600: #786b54;
  --color-clam-up-700: #60543f;
  --color-clam-up-800: #4b412f;
  --color-clam-up-900: #3a3222;
  --color-clam-up-950: #251e13;
  --color-cookie-crumb: #b99479;
  --color-cookie-crumb-50: #fff0e6;
  --color-cookie-crumb-100: #fde3d1;
  --color-cookie-crumb-200: #ebcdb8;
  --color-cookie-crumb-300: #d7b59d;
  --color-cookie-crumb-400: #b99479;
  --color-cookie-crumb-500: #9d7a5f;
  --color-cookie-crumb-600: #826148;
  --color-cookie-crumb-700: #6a4c35;
  --color-cookie-crumb-800: #553a26;
  --color-cookie-crumb-900: #432d1c;
  --color-cookie-crumb-950: #2b1b0f;
  --color-young-night: #28231a;
  --color-young-night-50: #f8f5ee;
  --color-young-night-100: #efebe3;
  --color-young-night-200: #dcd7ce;
  --color-young-night-300: #c6c0b6;
  --color-young-night-400: #a7a196;
  --color-young-night-500: #8c867b;
  --color-young-night-600: #736d62;
  --color-young-night-700: #5c574e;
  --color-young-night-800: #4a453d;
  --color-young-night-900: #3a362f;
  --color-young-night-950: #28231a;
  --color-chivalrous-walrus: #7f6358;
  --color-chivalrous-walrus-50: #fff2ed;
  --color-chivalrous-walrus-100: #fae6de;
  --color-chivalrous-walrus-200: #e9d1c8;
  --color-chivalrous-walrus-300: #d4b9af;
  --color-chivalrous-walrus-400: #b6998e;
  --color-chivalrous-walrus-500: #9b7d72;
  --color-chivalrous-walrus-600: #7f6358;
  --color-chivalrous-walrus-700: #664e44;
  --color-chivalrous-walrus-800: #513c33;
  --color-chivalrous-walrus-900: #3f2d26;
  --color-chivalrous-walrus-950: #281b16;
}