Garlic Toast to Secret Passage color palette

DADA80Garlic Toast E48E7DNude Flamingo CC6655Track and Field AB6500Ginger 774700Hazelnut Chocolate 392D00Secret Passage

Open in generator Export PNG, PDF, ASE…

About this palette

Garlic Toast to Secret Passage is a 6-color warm, earthy, gradient palette: #DADA80 (Garlic Toast), #E48E7D (Nude Flamingo), #CC6655 (Track and Field), #AB6500 (Ginger), #774700 (Hazelnut Chocolate), #392D00 (Secret Passage). It mixes yellow, red, brown tones and feels warm overall. The strongest text pairing is #DADA80 on #392D00 with a contrast ratio of 9.24:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Garlic Toast	rgb(218, 218, 128)	hsl(60, 55%, 68%)
Nude Flamingo	rgb(228, 142, 125)	hsl(10, 66%, 69%)
Track and Field	rgb(204, 102, 85)	hsl(9, 54%, 57%)
Ginger	rgb(171, 101, 0)	hsl(35, 100%, 34%)
Hazelnut Chocolate	rgb(119, 71, 0)	hsl(36, 100%, 23%)
Secret Passage	rgb(57, 45, 0)	hsl(47, 100%, 11%)

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.24:1 Very good#DADA80 on #392D00
Aa9.24:1 Very good#392D00 on #DADA80
Aa5.46:1 Good#E48E7D on #392D00
Aa5.46:1 Good#392D00 on #E48E7D
Aa5.33:1 Good#DADA80 on #774700
Aa5.33:1 Good#774700 on #DADA80
Aa3.61:1 Poor#CC6655 on #392D00
Aa3.61:1 Poor#392D00 on #CC6655

Color blindness preview

CSS variables

/* Garlic Toast to Secret Passage — https://swatchly.xyz/palette/dada80-e48e7d-cc6655-ab6500-774700-392d00 */
:root {
  --garlic-toast: #dada80;
  --nude-flamingo: #e48e7d;
  --track-and-field: #cc6655;
  --ginger: #ab6500;
  --hazelnut-chocolate: #774700;
  --secret-passage: #392d00;
}

Tailwind CSS v4

/* Garlic Toast to Secret Passage — https://swatchly.xyz/palette/dada80-e48e7d-cc6655-ab6500-774700-392d00 */
@theme {
  --color-garlic-toast: #dada80;
  --color-garlic-toast-50: #f6f7c5;
  --color-garlic-toast-100: #ecedb5;
  --color-garlic-toast-200: #dada80;
  --color-garlic-toast-300: #c3c378;
  --color-garlic-toast-400: #a5a44f;
  --color-garlic-toast-500: #8b892d;
  --color-garlic-toast-600: #716f09;
  --color-garlic-toast-700: #5a5800;
  --color-garlic-toast-800: #474500;
  --color-garlic-toast-900: #363500;
  --color-garlic-toast-950: #222100;
  --color-nude-flamingo: #e48e7d;
  --color-nude-flamingo-50: #fff5f3;
  --color-nude-flamingo-100: #ffe9e5;
  --color-nude-flamingo-200: #ffcfc6;
  --color-nude-flamingo-300: #fbb1a2;
  --color-nude-flamingo-400: #e48e7d;
  --color-nude-flamingo-500: #c47262;
  --color-nude-flamingo-600: #a55647;
  --color-nude-flamingo-700: #884033;
  --color-nude-flamingo-800: #6d2e23;
  --color-nude-flamingo-900: #562118;
  --color-nude-flamingo-950: #37120b;
  --color-track-and-field: #cc6655;
  --color-track-and-field-50: #fff2f0;
  --color-track-and-field-100: #ffe5e0;
  --color-track-and-field-200: #ffcac0;
  --color-track-and-field-300: #ffa999;
  --color-track-and-field-400: #e88372;
  --color-track-and-field-500: #cc6655;
  --color-track-and-field-600: #ac4b3c;
  --color-track-and-field-700: #8f3628;
  --color-track-and-field-800: #74251a;
  --color-track-and-field-900: #5c1910;
  --color-track-and-field-950: #3c0c06;
  --color-ginger: #ab6500;
  --color-ginger-50: #fff3e8;
  --color-ginger-100: #ffe9d5;
  --color-ginger-200: #ffd3a9;
  --color-ginger-300: #f8b97c;
  --color-ginger-400: #df9952;
  --color-ginger-500: #c67e2e;
  --color-ginger-600: #ab6500;
  --color-ginger-700: #895000;
  --color-ginger-800: #6b3d00;
  --color-ginger-900: #532e00;
  --color-ginger-950: #351c00;
  --color-hazelnut-chocolate: #774700;
  --color-hazelnut-chocolate-50: #fff3e7;
  --color-hazelnut-chocolate-100: #ffe6ce;
  --color-hazelnut-chocolate-200: #f8cfa4;
  --color-hazelnut-chocolate-300: #e5b686;
  --color-hazelnut-chocolate-400: #c8955e;
  --color-hazelnut-chocolate-500: #ac7940;
  --color-hazelnut-chocolate-600: #8f5e25;
  --color-hazelnut-chocolate-700: #774700;
  --color-hazelnut-chocolate-800: #5d3702;
  --color-hazelnut-chocolate-900: #492a00;
  --color-hazelnut-chocolate-950: #2f1900;
  --color-secret-passage: #392d00;
  --color-secret-passage-50: #fdf5dc;
  --color-secret-passage-100: #f4ebcf;
  --color-secret-passage-200: #e2d7b6;
  --color-secret-passage-300: #ccc19b;
  --color-secret-passage-400: #ada076;
  --color-secret-passage-500: #918459;
  --color-secret-passage-600: #756940;
  --color-secret-passage-700: #5d512c;
  --color-secret-passage-800: #483e1d;
  --color-secret-passage-900: #392d00;
  --color-secret-passage-950: #211b08;
}