Falafel to Deviled Eggs Color Palette

About this palette

Falafel to Deviled Eggs is a 5-color warm, earthy, monochromatic palette: #B17400 (Falafel), #E9A100 (Hot Butter), #724800 (Antique Brass), #422600 (Chocolate Castle), #FFCC82 (Deviled Eggs). It mixes orange, yellow, brown tones and feels warm overall. The strongest text pairing is #422600 on #FFCC82 with a contrast ratio of 9.42:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Falafel	rgb(177, 116, 0)	hsl(39, 100%, 35%)
Hot Butter	rgb(233, 161, 0)	hsl(41, 100%, 46%)
Antique Brass	rgb(114, 72, 0)	hsl(38, 100%, 22%)
Chocolate Castle	rgb(66, 38, 0)	hsl(35, 100%, 13%)
Deviled Eggs	rgb(255, 204, 130)	hsl(36, 100%, 75%)

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.42:1 Very good#422600 on #FFCC82
Aa9.42:1 Very good#FFCC82 on #422600
Aa6.34:1 Good#E9A100 on #422600
Aa6.34:1 Good#422600 on #E9A100
Aa5.38:1 Good#724800 on #FFCC82
Aa5.38:1 Good#FFCC82 on #724800
Aa3.62:1 Poor#E9A100 on #724800
Aa3.62:1 Poor#724800 on #E9A100

Color blindness preview

CSS variables

/* Falafel to Deviled Eggs — https://swatchly.xyz/palette/b17400-e9a100-724800-422600-ffcc82 */
:root {
  --falafel: #b17400;
  --hot-butter: #e9a100;
  --antique-brass: #724800;
  --chocolate-castle: #422600;
  --deviled-eggs: #ffcc82;
}

Tailwind CSS v4

/* Falafel to Deviled Eggs — https://swatchly.xyz/palette/b17400-e9a100-724800-422600-ffcc82 */
@theme {
  --color-falafel: #b17400;
  --color-falafel-50: #fff2e3;
  --color-falafel-100: #ffe5c6;
  --color-falafel-200: #fdcc8d;
  --color-falafel-300: #ebb369;
  --color-falafel-400: #cd9139;
  --color-falafel-500: #b17400;
  --color-falafel-600: #8f5d00;
  --color-falafel-700: #724900;
  --color-falafel-800: #5a3900;
  --color-falafel-900: #462b00;
  --color-falafel-950: #2d1a00;
  --color-hot-butter: #e9a100;
  --color-hot-butter-50: #fffaf3;
  --color-hot-butter-100: #fff1de;
  --color-hot-butter-200: #ffddab;
  --color-hot-butter-300: #fdc369;
  --color-hot-butter-400: #e9a100;
  --color-hot-butter-500: #c28500;
  --color-hot-butter-600: #9c6a00;
  --color-hot-butter-700: #7b5300;
  --color-hot-butter-800: #604000;
  --color-hot-butter-900: #492f00;
  --color-hot-butter-950: #2d1b00;
  --color-antique-brass: #724800;
  --color-antique-brass-50: #fff3e5;
  --color-antique-brass-100: #ffe7cb;
  --color-antique-brass-200: #f5d0a5;
  --color-antique-brass-300: #e1b886;
  --color-antique-brass-400: #c3965e;
  --color-antique-brass-500: #a77a40;
  --color-antique-brass-600: #8a5f25;
  --color-antique-brass-700: #724800;
  --color-antique-brass-800: #593803;
  --color-antique-brass-900: #462a00;
  --color-antique-brass-950: #2d1900;
  --color-chocolate-castle: #422600;
  --color-chocolate-castle-50: #fff3e6;
  --color-chocolate-castle-100: #fee7cf;
  --color-chocolate-castle-200: #edd2b6;
  --color-chocolate-castle-300: #d9bb9b;
  --color-chocolate-castle-400: #bb9a76;
  --color-chocolate-castle-500: #9e7d59;
  --color-chocolate-castle-600: #81623f;
  --color-chocolate-castle-700: #674b2c;
  --color-chocolate-castle-800: #50381d;
  --color-chocolate-castle-900: #422600;
  --color-chocolate-castle-950: #251808;
  --color-deviled-eggs: #ffcc82;
  --color-deviled-eggs-50: #fff2e0;
  --color-deviled-eggs-100: #ffe5c2;
  --color-deviled-eggs-200: #ffcc82;
  --color-deviled-eggs-300: #e2b77a;
  --color-deviled-eggs-400: #c69751;
  --color-deviled-eggs-500: #aa7b2f;
  --color-deviled-eggs-600: #8e610d;
  --color-deviled-eggs-700: #734c00;
  --color-deviled-eggs-800: #5a3b00;
  --color-deviled-eggs-900: #462d00;
  --color-deviled-eggs-950: #2d1b00;
}