Glazed Sugar to Flamenco Color Palette

About this palette

Glazed Sugar to Flamenco is a 4-color warm, earthy, vintage palette: #FFDCC9 (Glazed Sugar), #473E00 (Alligator Gladiator), #946A04 (Embarrassed Frog), #E58847 (Flamenco). It mixes orange, brown, yellow tones and feels warm overall. The strongest text pairing is #FFDCC9 on #473E00 with a contrast ratio of 8.35:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glazed Sugar	rgb(255, 220, 201)	hsl(21, 100%, 89%)
Alligator Gladiator	rgb(71, 62, 0)	hsl(52, 100%, 14%)
Embarrassed Frog	rgb(148, 106, 4)	hsl(42, 95%, 30%)
Flamenco	rgb(229, 136, 71)	hsl(25, 75%, 59%)

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.35:1 Very good#FFDCC9 on #473E00
Aa8.35:1 Very good#473E00 on #FFDCC9
Aa4.06:1 Poor#473E00 on #E58847
Aa4.06:1 Poor#E58847 on #473E00
Aa3.78:1 Poor#FFDCC9 on #946A04
Aa3.78:1 Poor#946A04 on #FFDCC9

Color blindness preview

CSS variables

/* Glazed Sugar to Flamenco — https://swatchly.xyz/palette/ffdcc9-473e00-946a04-e58847 */
:root {
  --glazed-sugar: #ffdcc9;
  --alligator-gladiator: #473e00;
  --embarrassed-frog: #946a04;
  --flamenco: #e58847;
}

Tailwind CSS v4

/* Glazed Sugar to Flamenco — https://swatchly.xyz/palette/ffdcc9-473e00-946a04-e58847 */
@theme {
  --color-glazed-sugar: #ffdcc9;
  --color-glazed-sugar-50: #ffebe0;
  --color-glazed-sugar-100: #ffdcc9;
  --color-glazed-sugar-200: #e6ccbd;
  --color-glazed-sugar-300: #d3b5a5;
  --color-glazed-sugar-400: #b69785;
  --color-glazed-sugar-500: #9c7c6b;
  --color-glazed-sugar-600: #816353;
  --color-glazed-sugar-700: #694f40;
  --color-glazed-sugar-800: #543c2f;
  --color-glazed-sugar-900: #412e23;
  --color-glazed-sugar-950: #2a1c14;
  --color-alligator-gladiator: #473e00;
  --color-alligator-gladiator-50: #fbf6d7;
  --color-alligator-gladiator-100: #f2edc9;
  --color-alligator-gladiator-200: #e0d9af;
  --color-alligator-gladiator-300: #c9c291;
  --color-alligator-gladiator-400: #aaa16c;
  --color-alligator-gladiator-500: #8e854e;
  --color-alligator-gladiator-600: #726935;
  --color-alligator-gladiator-700: #5a5221;
  --color-alligator-gladiator-800: #473e00;
  --color-alligator-gladiator-900: #352f0b;
  --color-alligator-gladiator-950: #211d04;
  --color-embarrassed-frog: #946a04;
  --color-embarrassed-frog-50: #fff4e1;
  --color-embarrassed-frog-100: #ffeac5;
  --color-embarrassed-frog-200: #f6d59c;
  --color-embarrassed-frog-300: #e4bf7c;
  --color-embarrassed-frog-400: #c99f52;
  --color-embarrassed-frog-500: #af842f;
  --color-embarrassed-frog-600: #946a04;
  --color-embarrassed-frog-700: #765400;
  --color-embarrassed-frog-800: #5d4100;
  --color-embarrassed-frog-900: #483100;
  --color-embarrassed-frog-950: #2e1e00;
  --color-flamenco: #e58847;
  --color-flamenco-50: #fff3ec;
  --color-flamenco-100: #ffe6d7;
  --color-flamenco-200: #ffccad;
  --color-flamenco-300: #feac77;
  --color-flamenco-400: #e58847;
  --color-flamenco-500: #c66c28;
  --color-flamenco-600: #a65200;
  --color-flamenco-700: #854000;
  --color-flamenco-800: #693100;
  --color-flamenco-900: #522500;
  --color-flamenco-950: #351500;
}