What’s Left to Liquorice Red color palette

FFF1E7What’s Left FB9C9CMad Pinker D97900Martian Colony 8A6700Muddy Brown 760D00Liquorice Red

About this palette

What’s Left to Liquorice Red is a 5-color warm, gradient palette: #FFF1E7 (What’s Left), #FB9C9C (Mad Pinker), #D97900 (Martian Colony), #8A6700 (Muddy Brown), #760D00 (Liquorice Red). It mixes white, pink, orange, brown, red tones and feels warm overall. The strongest text pairing is #FFF1E7 on #760D00 with a contrast ratio of 10.39:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
What’s Left	rgb(255, 241, 231)	hsl(25, 100%, 95%)
Mad Pinker	rgb(251, 156, 156)	hsl(0, 92%, 80%)
Martian Colony	rgb(217, 121, 0)	hsl(33, 100%, 43%)
Muddy Brown	rgb(138, 103, 0)	hsl(45, 100%, 27%)
Liquorice Red	rgb(118, 13, 0)	hsl(7, 100%, 23%)

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.39:1 Very good#FFF1E7 on #760D00
Aa10.39:1 Very good#760D00 on #FFF1E7
Aa5.66:1 Good#FB9C9C on #760D00
Aa5.66:1 Good#760D00 on #FB9C9C
Aa4.72:1 Good#FFF1E7 on #8A6700
Aa4.72:1 Good#8A6700 on #FFF1E7
Aa3.66:1 Poor#D97900 on #760D00
Aa3.66:1 Poor#760D00 on #D97900

Color blindness preview

CSS variables

/* What’s Left to Liquorice Red — https://swatchly.xyz/palette/fff1e7-fb9c9c-d97900-8a6700-760d00 */
:root {
  --what-s-left: #fff1e7;
  --mad-pinker: #fb9c9c;
  --martian-colony: #d97900;
  --muddy-brown: #8a6700;
  --liquorice-red: #760d00;
}

Tailwind CSS v4

/* What’s Left to Liquorice Red — https://swatchly.xyz/palette/fff1e7-fb9c9c-d97900-8a6700-760d00 */
@theme {
  --color-what-s-left: #fff1e7;
  --color-what-s-left-50: #fff1e7;
  --color-what-s-left-100: #f1e8e2;
  --color-what-s-left-200: #dfd5cd;
  --color-what-s-left-300: #c9beb6;
  --color-what-s-left-400: #ab9e96;
  --color-what-s-left-500: #90837a;
  --color-what-s-left-600: #756961;
  --color-what-s-left-700: #5e534b;
  --color-what-s-left-800: #4a403a;
  --color-what-s-left-900: #39312b;
  --color-what-s-left-950: #241e1a;
  --color-mad-pinker: #fb9c9c;
  --color-mad-pinker-50: #ffedec;
  --color-mad-pinker-100: #ffdddc;
  --color-mad-pinker-200: #ffbfbe;
  --color-mad-pinker-300: #fb9c9c;
  --color-mad-pinker-400: #d87f80;
  --color-mad-pinker-500: #bd6465;
  --color-mad-pinker-600: #9f4b4e;
  --color-mad-pinker-700: #83383b;
  --color-mad-pinker-800: #6b292c;
  --color-mad-pinker-900: #561d20;
  --color-mad-pinker-950: #380f12;
  --color-martian-colony: #d97900;
  --color-martian-colony-50: #ffeddf;
  --color-martian-colony-100: #ffddc3;
  --color-martian-colony-200: #ffbf8c;
  --color-martian-colony-300: #f79e50;
  --color-martian-colony-400: #d97900;
  --color-martian-colony-500: #b66400;
  --color-martian-colony-600: #945000;
  --color-martian-colony-700: #774000;
  --color-martian-colony-800: #5f3200;
  --color-martian-colony-900: #4c2600;
  --color-martian-colony-950: #321700;
  --color-muddy-brown: #8a6700;
  --color-muddy-brown-50: #fff4de;
  --color-muddy-brown-100: #ffe9bc;
  --color-muddy-brown-200: #f1d59a;
  --color-muddy-brown-300: #ddbd7a;
  --color-muddy-brown-400: #c09d50;
  --color-muddy-brown-500: #a5822d;
  --color-muddy-brown-600: #8a6700;
  --color-muddy-brown-700: #6e5100;
  --color-muddy-brown-800: #563f00;
  --color-muddy-brown-900: #433000;
  --color-muddy-brown-950: #2a1d00;
  --color-liquorice-red: #760d00;
  --color-liquorice-red-50: #fff2ef;
  --color-liquorice-red-100: #ffe4df;
  --color-liquorice-red-200: #ffc9be;
  --color-liquorice-red-300: #ffa594;
  --color-liquorice-red-400: #e77d6a;
  --color-liquorice-red-500: #c95f4d;
  --color-liquorice-red-600: #a84433;
  --color-liquorice-red-700: #892f20;
  --color-liquorice-red-800: #760d00;
  --color-liquorice-red-900: #57140a;
  --color-liquorice-red-950: #380904;
}