Gingerbread to Fizzy Peach Color Palette

About this palette

Gingerbread to Fizzy Peach is a 4-color warm, earthy palette: #8C4F35 (Gingerbread), #CD7D3C (Polished Bronze), #2F2D00 (Secret Passage), #F7BA65 (Fizzy Peach). It mixes brown, orange tones and feels warm overall. The strongest text pairing is #2F2D00 on #F7BA65 with a contrast ratio of 8.13:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Gingerbread	rgb(140, 79, 53)	hsl(18, 45%, 38%)
Polished Bronze	rgb(205, 125, 60)	hsl(27, 59%, 52%)
Secret Passage	rgb(47, 45, 0)	hsl(57, 100%, 9%)
Fizzy Peach	rgb(247, 186, 101)	hsl(35, 90%, 68%)

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.

Aa8.13:1 Very good#2F2D00 on #F7BA65
Aa8.13:1 Very good#F7BA65 on #2F2D00
Aa4.41:1 Poor#CD7D3C on #2F2D00
Aa4.41:1 Poor#2F2D00 on #CD7D3C
Aa3.70:1 Poor#8C4F35 on #F7BA65
Aa3.70:1 Poor#F7BA65 on #8C4F35

Color blindness preview

CSS variables

/* Gingerbread to Fizzy Peach — https://swatchly.xyz/palette/8c4f35-cd7d3c-2f2d00-f7ba65 */
:root {
  --gingerbread: #8c4f35;
  --polished-bronze: #cd7d3c;
  --secret-passage: #2f2d00;
  --fizzy-peach: #f7ba65;
}

Tailwind CSS v4

/* Gingerbread to Fizzy Peach — https://swatchly.xyz/palette/8c4f35-cd7d3c-2f2d00-f7ba65 */
@theme {
  --color-gingerbread: #8c4f35;
  --color-gingerbread-50: #fff2ed;
  --color-gingerbread-100: #ffe2d7;
  --color-gingerbread-200: #fcc6af;
  --color-gingerbread-300: #e8ab92;
  --color-gingerbread-400: #c9886d;
  --color-gingerbread-500: #ab6b50;
  --color-gingerbread-600: #8c4f35;
  --color-gingerbread-700: #713d26;
  --color-gingerbread-800: #5b2e1a;
  --color-gingerbread-900: #482211;
  --color-gingerbread-950: #2f1408;
  --color-polished-bronze: #cd7d3c;
  --color-polished-bronze-50: #fff5ef;
  --color-polished-bronze-100: #ffecdf;
  --color-polished-bronze-200: #ffd5b8;
  --color-polished-bronze-300: #feb987;
  --color-polished-bronze-400: #e5995e;
  --color-polished-bronze-500: #cd7d3c;
  --color-polished-bronze-600: #ad6019;
  --color-polished-bronze-700: #8d4900;
  --color-polished-bronze-800: #6e3800;
  --color-polished-bronze-900: #552900;
  --color-polished-bronze-950: #361800;
  --color-secret-passage: #2f2d00;
  --color-secret-passage-50: #f7f7dd;
  --color-secret-passage-100: #eeedd0;
  --color-secret-passage-200: #dadab8;
  --color-secret-passage-300: #c4c49c;
  --color-secret-passage-400: #a4a378;
  --color-secret-passage-500: #87865a;
  --color-secret-passage-600: #6b6a40;
  --color-secret-passage-700: #53522c;
  --color-secret-passage-800: #3f3e1d;
  --color-secret-passage-900: #2f2d00;
  --color-secret-passage-950: #1b1a08;
  --color-fizzy-peach: #f7ba65;
  --color-fizzy-peach-50: #fff7ed;
  --color-fizzy-peach-100: #ffecd4;
  --color-fizzy-peach-200: #ffd59d;
  --color-fizzy-peach-300: #f7ba65;
  --color-fizzy-peach-400: #d29a4a;
  --color-fizzy-peach-500: #b67d20;
  --color-fizzy-peach-600: #956200;
  --color-fizzy-peach-700: #774d00;
  --color-fizzy-peach-800: #5d3b00;
  --color-fizzy-peach-900: #472c00;
  --color-fizzy-peach-950: #2e1b00;
}