Soft Butter to Lizard Color Palette

About this palette

Soft Butter to Lizard is a 5-color muted, warm, earthy, vintage palette: #F4E1B9 (Soft Butter), #B1C294 (Beige and Sage), #4B3221 (Café Noir), #A38361 (Mulled Cider), #7C693A (Lizard). It mixes yellow, green, brown, orange tones and feels warm overall. The strongest text pairing is #F4E1B9 on #4B3221 with a contrast ratio of 9.18:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soft Butter	rgb(244, 225, 185)	hsl(41, 73%, 84%)
Beige and Sage	rgb(177, 194, 148)	hsl(82, 27%, 67%)
Café Noir	rgb(75, 50, 33)	hsl(24, 39%, 21%)
Mulled Cider	rgb(163, 131, 97)	hsl(31, 26%, 51%)
Lizard	rgb(124, 105, 58)	hsl(43, 36%, 36%)

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.18:1 Very good#F4E1B9 on #4B3221
Aa9.18:1 Very good#4B3221 on #F4E1B9
Aa6.20:1 Good#B1C294 on #4B3221
Aa6.20:1 Good#4B3221 on #B1C294
Aa4.14:1 Poor#F4E1B9 on #7C693A
Aa4.14:1 Poor#7C693A on #F4E1B9
Aa3.36:1 Poor#4B3221 on #A38361
Aa3.36:1 Poor#A38361 on #4B3221

Color blindness preview

CSS variables

/* Soft Butter to Lizard — https://swatchly.xyz/palette/f4e1b9-b1c294-4b3221-a38361-7c693a */
:root {
  --soft-butter: #f4e1b9;
  --beige-and-sage: #b1c294;
  --caf-noir: #4b3221;
  --mulled-cider: #a38361;
  --lizard: #7c693a;
}

Tailwind CSS v4

/* Soft Butter to Lizard — https://swatchly.xyz/palette/f4e1b9-b1c294-4b3221-a38361-7c693a */
@theme {
  --color-soft-butter: #f4e1b9;
  --color-soft-butter-50: #f8edd5;
  --color-soft-butter-100: #f4e1b9;
  --color-soft-butter-200: #decfb1;
  --color-soft-butter-300: #caba98;
  --color-soft-butter-400: #ad9c77;
  --color-soft-butter-500: #93825d;
  --color-soft-butter-600: #796945;
  --color-soft-butter-700: #625333;
  --color-soft-butter-800: #4e4124;
  --color-soft-butter-900: #3c3119;
  --color-soft-butter-950: #261e0c;
  --color-beige-and-sage: #b1c294;
  --color-beige-and-sage-50: #ecf6db;
  --color-beige-and-sage-100: #e0eccd;
  --color-beige-and-sage-200: #cad8b4;
  --color-beige-and-sage-300: #b1c294;
  --color-beige-and-sage-400: #93a378;
  --color-beige-and-sage-500: #79895d;
  --color-beige-and-sage-600: #616f46;
  --color-beige-and-sage-700: #4c5933;
  --color-beige-and-sage-800: #3b4625;
  --color-beige-and-sage-900: #2d371a;
  --color-beige-and-sage-950: #1b220e;
  --color-caf-noir: #4b3221;
  --color-caf-noir-50: #fff2ea;
  --color-caf-noir-100: #fbe7da;
  --color-caf-noir-200: #ead2c3;
  --color-caf-noir-300: #d6bbaa;
  --color-caf-noir-400: #b99c89;
  --color-caf-noir-500: #9f826e;
  --color-caf-noir-600: #846856;
  --color-caf-noir-700: #6d5342;
  --color-caf-noir-800: #584233;
  --color-caf-noir-900: #4b3221;
  --color-caf-noir-950: #2e2016;
  --color-mulled-cider: #a38361;
  --color-mulled-cider-50: #fff4e8;
  --color-mulled-cider-100: #fee8d2;
  --color-mulled-cider-200: #eed5ba;
  --color-mulled-cider-300: #dbbea0;
  --color-mulled-cider-400: #be9e7d;
  --color-mulled-cider-500: #a38361;
  --color-mulled-cider-600: #866847;
  --color-mulled-cider-700: #6d5133;
  --color-mulled-cider-800: #573f24;
  --color-mulled-cider-900: #432f19;
  --color-mulled-cider-950: #2b1c0c;
  --color-lizard: #7c693a;
  --color-lizard-50: #fff4db;
  --color-lizard-100: #f7eacb;
  --color-lizard-200: #e5d6b1;
  --color-lizard-300: #d1bf95;
  --color-lizard-400: #b29f71;
  --color-lizard-500: #978454;
  --color-lizard-600: #7c693a;
  --color-lizard-700: #645328;
  --color-lizard-800: #4f401a;
  --color-lizard-900: #3d3110;
  --color-lizard-950: #271e07;
}