Start generating

Tuscan to Roastery color palette

FFD6ACTuscanFFBA6ADesert DessertBAA700GreenfinchDF5B18Ferocious Fox725700Coffee Adept6A1D00Roastery
Open in generator Export PNG, PDF, ASE…

About this palette

Tuscan to Roastery is a 6-color warm palette: #FFD6AC (Tuscan), #FFBA6A (Desert Dessert), #BAA700 (Greenfinch), #DF5B18 (Ferocious Fox), #725700 (Coffee Adept), #6A1D00 (Roastery). It mixes orange, yellow, brown tones and feels warm overall. The strongest text pairing is #FFD6AC on #6A1D00 with a contrast ratio of 8.65:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tuscanrgb(255, 214, 172)hsl(30, 100%, 84%)
Desert Dessertrgb(255, 186, 106)hsl(32, 100%, 71%)
Greenfinchrgb(186, 167, 0)hsl(54, 100%, 36%)
Ferocious Foxrgb(223, 91, 24)hsl(20, 81%, 48%)
Coffee Adeptrgb(114, 87, 0)hsl(46, 100%, 22%)
Roasteryrgb(106, 29, 0)hsl(16, 100%, 21%)

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.65:1 Very good#FFD6AC on #6A1D00
  • Aa8.65:1 Very good#6A1D00 on #FFD6AC
  • Aa6.98:1 Good#FFBA6A on #6A1D00
  • Aa6.98:1 Good#6A1D00 on #FFBA6A
  • Aa5.02:1 Good#FFD6AC on #725700
  • Aa5.02:1 Good#725700 on #FFD6AC
  • Aa4.82:1 Good#BAA700 on #6A1D00
  • Aa4.82:1 Good#6A1D00 on #BAA700

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Tuscan to Roastery — https://swatchly.xyz/palette/ffd6ac-ffba6a-baa700-df5b18-725700-6a1d00 */
:root {
  --tuscan: #ffd6ac;
  --desert-dessert: #ffba6a;
  --greenfinch: #baa700;
  --ferocious-fox: #df5b18;
  --coffee-adept: #725700;
  --roastery: #6a1d00;
}

Tailwind CSS v4

/* Tuscan to Roastery — https://swatchly.xyz/palette/ffd6ac-ffba6a-baa700-df5b18-725700-6a1d00 */
@theme {
  --color-tuscan: #ffd6ac;
  --color-tuscan-50: #fff9f2;
  --color-tuscan-100: #ffeedc;
  --color-tuscan-200: #ffd6ac;
  --color-tuscan-300: #e1c09e;
  --color-tuscan-400: #c39e78;
  --color-tuscan-500: #a7815a;
  --color-tuscan-600: #896640;
  --color-tuscan-700: #6f4f2b;
  --color-tuscan-800: #583c1d;
  --color-tuscan-900: #452d12;
  --color-tuscan-950: #2c1b08;
  --color-desert-dessert: #ffba6a;
  --color-desert-dessert-50: #fff8f2;
  --color-desert-dessert-100: #ffeedc;
  --color-desert-dessert-200: #ffd7ac;
  --color-desert-dessert-300: #ffba6a;
  --color-desert-dessert-400: #d99a4f;
  --color-desert-dessert-500: #bc7c26;
  --color-desert-dessert-600: #9c6000;
  --color-desert-dessert-700: #7b4b00;
  --color-desert-dessert-800: #603a00;
  --color-desert-dessert-900: #4a2b00;
  --color-desert-dessert-950: #2f1a00;
  --color-greenfinch: #baa700;
  --color-greenfinch-50: #fff9c8;
  --color-greenfinch-100: #faf0a8;
  --color-greenfinch-200: #e9dd86;
  --color-greenfinch-300: #d6c75e;
  --color-greenfinch-400: #baa700;
  --color-greenfinch-500: #9b8b00;
  --color-greenfinch-600: #7c6f00;
  --color-greenfinch-700: #635800;
  --color-greenfinch-800: #4d4400;
  --color-greenfinch-900: #3b3400;
  --color-greenfinch-950: #242000;
  --color-ferocious-fox: #df5b18;
  --color-ferocious-fox-50: #fff3ee;
  --color-ferocious-fox-100: #ffe7dd;
  --color-ferocious-fox-200: #ffcdb9;
  --color-ferocious-fox-300: #ffad8c;
  --color-ferocious-fox-400: #fa7b44;
  --color-ferocious-fox-500: #df5b18;
  --color-ferocious-fox-600: #b84500;
  --color-ferocious-fox-700: #933500;
  --color-ferocious-fox-800: #742800;
  --color-ferocious-fox-900: #5b1d00;
  --color-ferocious-fox-950: #3b1000;
  --color-coffee-adept: #725700;
  --color-coffee-adept-50: #fff4db;
  --color-coffee-adept-100: #fceabe;
  --color-coffee-adept-200: #ecd7a3;
  --color-coffee-adept-300: #d9c186;
  --color-coffee-adept-400: #bda25f;
  --color-coffee-adept-500: #a38740;
  --color-coffee-adept-600: #886d24;
  --color-coffee-adept-700: #725700;
  --color-coffee-adept-800: #5a4400;
  --color-coffee-adept-900: #453400;
  --color-coffee-adept-950: #2c2000;
  --color-roastery: #6a1d00;
  --color-roastery-50: #fff2ee;
  --color-roastery-100: #ffe5dc;
  --color-roastery-200: #ffc9b8;
  --color-roastery-300: #f7a991;
  --color-roastery-400: #da856b;
  --color-roastery-500: #bc684d;
  --color-roastery-600: #9c4d34;
  --color-roastery-700: #7d3721;
  --color-roastery-800: #6a1d00;
  --color-roastery-900: #4d1b0b;
  --color-roastery-950: #320e04;
}

Similar palettes