Mellow Marrow to Ludicrous Lemming color palette

E4C3B8Mellow Marrow 463834Film Noir 826B63Caribou F4E4DEPetal Pink B78E81Ludicrous Lemming

About this palette

Mellow Marrow to Ludicrous Lemming is a 5-color muted palette: #E4C3B8 (Mellow Marrow), #463834 (Film Noir), #826B63 (Caribou), #F4E4DE (Petal Pink), #B78E81 (Ludicrous Lemming). It mixes pink, gray, red tones and feels warm overall. The strongest text pairing is #463834 on #F4E4DE with a contrast ratio of 9.06:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mellow Marrow	rgb(228, 195, 184)	hsl(15, 45%, 81%)
Film Noir	rgb(70, 56, 52)	hsl(13, 15%, 24%)
Caribou	rgb(130, 107, 99)	hsl(15, 14%, 45%)
Petal Pink	rgb(244, 228, 222)	hsl(16, 50%, 91%)
Ludicrous Lemming	rgb(183, 142, 129)	hsl(14, 27%, 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.

Aa9.06:1 Very good#463834 on #F4E4DE
Aa9.06:1 Very good#F4E4DE on #463834
Aa6.82:1 Good#E4C3B8 on #463834
Aa6.82:1 Good#463834 on #E4C3B8
Aa4.02:1 Poor#826B63 on #F4E4DE
Aa4.02:1 Poor#F4E4DE on #826B63
Aa3.84:1 Poor#463834 on #B78E81
Aa3.84:1 Poor#B78E81 on #463834

Color blindness preview

CSS variables

/* Mellow Marrow to Ludicrous Lemming — https://swatchly.xyz/palette/e4c3b8-463834-826b63-f4e4de-b78e81 */
:root {
  --mellow-marrow: #e4c3b8;
  --film-noir: #463834;
  --caribou: #826b63;
  --petal-pink: #f4e4de;
  --ludicrous-lemming: #b78e81;
}

Tailwind CSS v4

/* Mellow Marrow to Ludicrous Lemming — https://swatchly.xyz/palette/e4c3b8-463834-826b63-f4e4de-b78e81 */
@theme {
  --color-mellow-marrow: #e4c3b8;
  --color-mellow-marrow-50: #fff9f7;
  --color-mellow-marrow-100: #ffeee9;
  --color-mellow-marrow-200: #f2dbd3;
  --color-mellow-marrow-300: #e4c3b8;
  --color-mellow-marrow-400: #c0a298;
  --color-mellow-marrow-500: #a3857b;
  --color-mellow-marrow-600: #86695f;
  --color-mellow-marrow-700: #6b5149;
  --color-mellow-marrow-800: #543e36;
  --color-mellow-marrow-900: #412e27;
  --color-mellow-marrow-950: #291c17;
  --color-film-noir: #463834;
  --color-film-noir-50: #fdf3f0;
  --color-film-noir-100: #f4e8e5;
  --color-film-noir-200: #e1d4d0;
  --color-film-noir-300: #cbbcb7;
  --color-film-noir-400: #ab9b96;
  --color-film-noir-500: #8e7e7a;
  --color-film-noir-600: #72635f;
  --color-film-noir-700: #594c48;
  --color-film-noir-800: #463834;
  --color-film-noir-900: #342b28;
  --color-film-noir-950: #201a18;
  --color-caribou: #826b63;
  --color-caribou-50: #fff2ed;
  --color-caribou-100: #f9e8e2;
  --color-caribou-200: #e8d5ce;
  --color-caribou-300: #d4beb7;
  --color-caribou-400: #b79f97;
  --color-caribou-500: #9c857c;
  --color-caribou-600: #826b63;
  --color-caribou-700: #69544d;
  --color-caribou-800: #53413a;
  --color-caribou-900: #40312c;
  --color-caribou-950: #291e1a;
  --color-petal-pink: #f4e4de;
  --color-petal-pink-50: #f9f0ed;
  --color-petal-pink-100: #f4e4de;
  --color-petal-pink-200: #ded2cd;
  --color-petal-pink-300: #c9bcb7;
  --color-petal-pink-400: #ab9c97;
  --color-petal-pink-500: #90827c;
  --color-petal-pink-600: #766863;
  --color-petal-pink-700: #5e524e;
  --color-petal-pink-800: #4a403c;
  --color-petal-pink-900: #3a312d;
  --color-petal-pink-950: #241e1b;
  --color-ludicrous-lemming: #b78e81;
  --color-ludicrous-lemming-50: #ffeee8;
  --color-ludicrous-lemming-100: #fcdfd6;
  --color-ludicrous-lemming-200: #ebc9be;
  --color-ludicrous-lemming-300: #d6b0a4;
  --color-ludicrous-lemming-400: #b78e81;
  --color-ludicrous-lemming-500: #9c7568;
  --color-ludicrous-lemming-600: #815c51;
  --color-ludicrous-lemming-700: #69483e;
  --color-ludicrous-lemming-800: #55382f;
  --color-ludicrous-lemming-900: #432b23;
  --color-ludicrous-lemming-950: #2c1a14;
}