Secret Passage to Soufflé color palette

332D06Secret Passage 75450FHazelnut Chocolate B77B71Döner Kebab E2A78DLunatic Lynx F0D2B1Soufflé

About this palette

Secret Passage to Soufflé is a 5-color warm, earthy, vintage, gradient palette: #332D06 (Secret Passage), #75450F (Hazelnut Chocolate), #B77B71 (Döner Kebab), #E2A78D (Lunatic Lynx), #F0D2B1 (Soufflé). It mixes brown, red, orange tones and feels warm overall. The strongest text pairing is #332D06 on #F0D2B1 with a contrast ratio of 9.59:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(51, 45, 6)	hsl(52, 79%, 11%)
Hazelnut Chocolate	rgb(117, 69, 15)	hsl(32, 77%, 26%)
Döner Kebab	rgb(183, 123, 113)	hsl(9, 33%, 58%)
Lunatic Lynx	rgb(226, 167, 141)	hsl(18, 59%, 72%)
Soufflé	rgb(240, 210, 177)	hsl(31, 68%, 82%)

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.59:1 Very good#332D06 on #F0D2B1
Aa9.59:1 Very good#F0D2B1 on #332D06
Aa6.68:1 Good#332D06 on #E2A78D
Aa6.68:1 Good#E2A78D on #332D06
Aa5.57:1 Good#75450F on #F0D2B1
Aa5.57:1 Good#F0D2B1 on #75450F
Aa4.01:1 Poor#332D06 on #B77B71
Aa4.01:1 Poor#B77B71 on #332D06

Color blindness preview

CSS variables

/* Secret Passage to Soufflé — https://swatchly.xyz/palette/332d06-75450f-b77b71-e2a78d-f0d2b1 */
:root {
  --secret-passage: #332d06;
  --hazelnut-chocolate: #75450f;
  --d-ner-kebab: #b77b71;
  --lunatic-lynx: #e2a78d;
  --souffl: #f0d2b1;
}

Tailwind CSS v4

/* Secret Passage to Soufflé — https://swatchly.xyz/palette/332d06-75450f-b77b71-e2a78d-f0d2b1 */
@theme {
  --color-secret-passage: #332d06;
  --color-secret-passage-50: #f9f6df;
  --color-secret-passage-100: #f0ecd2;
  --color-secret-passage-200: #ddd9ba;
  --color-secret-passage-300: #c7c29f;
  --color-secret-passage-400: #a7a27b;
  --color-secret-passage-500: #8b855e;
  --color-secret-passage-600: #6f6944;
  --color-secret-passage-700: #575230;
  --color-secret-passage-800: #423e21;
  --color-secret-passage-900: #332d06;
  --color-secret-passage-950: #1d1b0a;
  --color-hazelnut-chocolate: #75450f;
  --color-hazelnut-chocolate-50: #fff3e8;
  --color-hazelnut-chocolate-100: #ffe6d1;
  --color-hazelnut-chocolate-200: #f8cea9;
  --color-hazelnut-chocolate-300: #e5b58b;
  --color-hazelnut-chocolate-400: #c79464;
  --color-hazelnut-chocolate-500: #ab7746;
  --color-hazelnut-chocolate-600: #8d5d2d;
  --color-hazelnut-chocolate-700: #75450f;
  --color-hazelnut-chocolate-800: #5b360c;
  --color-hazelnut-chocolate-900: #482804;
  --color-hazelnut-chocolate-950: #2e1801;
  --color-d-ner-kebab: #b77b71;
  --color-d-ner-kebab-50: #fff3f1;
  --color-d-ner-kebab-100: #ffe8e3;
  --color-d-ner-kebab-200: #fecec6;
  --color-d-ner-kebab-300: #edb7ad;
  --color-d-ner-kebab-400: #d1968c;
  --color-d-ner-kebab-500: #b77b71;
  --color-d-ner-kebab-600: #996056;
  --color-d-ner-kebab-700: #7d4941;
  --color-d-ner-kebab-800: #643730;
  --color-d-ner-kebab-900: #4e2823;
  --color-d-ner-kebab-950: #321713;
  --color-lunatic-lynx: #e2a78d;
  --color-lunatic-lynx-50: #ffebe2;
  --color-lunatic-lynx-100: #ffdbcc;
  --color-lunatic-lynx-200: #f3c3ae;
  --color-lunatic-lynx-300: #e2a78d;
  --color-lunatic-lynx-400: #c28a72;
  --color-lunatic-lynx-500: #a77058;
  --color-lunatic-lynx-600: #8c5841;
  --color-lunatic-lynx-700: #734530;
  --color-lunatic-lynx-800: #5d3522;
  --color-lunatic-lynx-900: #4b2818;
  --color-lunatic-lynx-950: #31180c;
  --color-souffl: #f0d2b1;
  --color-souffl-50: #fff3e6;
  --color-souffl-100: #fbe8d3;
  --color-souffl-200: #f0d2b1;
  --color-souffl-300: #d5bca1;
  --color-souffl-400: #b89c7e;
  --color-souffl-500: #9c8162;
  --color-souffl-600: #816649;
  --color-souffl-700: #685035;
  --color-souffl-800: #523e26;
  --color-souffl-900: #402f1b;
  --color-souffl-950: #291d0e;
}