Secret Passage to Crepe Color Palette

About this palette

Secret Passage to Crepe is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #433004 (Secret Passage), #6D562C (Olivary), #8F7F5B (Mushroom Forest), #B9974D (Maple Syrup), #D8BE91 (Crepe). It mixes brown, yellow tones and feels warm overall. The strongest text pairing is #433004 on #D8BE91 with a contrast ratio of 7.03:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(67, 48, 4)	hsl(42, 89%, 14%)
Olivary	rgb(109, 86, 44)	hsl(39, 42%, 30%)
Mushroom Forest	rgb(143, 127, 91)	hsl(42, 22%, 46%)
Maple Syrup	rgb(185, 151, 77)	hsl(41, 44%, 51%)
Crepe	rgb(216, 190, 145)	hsl(38, 48%, 71%)

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.

Aa7.03:1 Very good#433004 on #D8BE91
Aa7.03:1 Very good#D8BE91 on #433004
Aa4.57:1 Good#433004 on #B9974D
Aa4.57:1 Good#B9974D on #433004
Aa3.88:1 Poor#6D562C on #D8BE91
Aa3.88:1 Poor#D8BE91 on #6D562C
Aa3.22:1 Poor#433004 on #8F7F5B
Aa3.22:1 Poor#8F7F5B on #433004

Color blindness preview

CSS variables

/* Secret Passage to Crepe — https://swatchly.xyz/palette/433004-6d562c-8f7f5b-b9974d-d8be91 */
:root {
  --secret-passage: #433004;
  --olivary: #6d562c;
  --mushroom-forest: #8f7f5b;
  --maple-syrup: #b9974d;
  --crepe: #d8be91;
}

Tailwind CSS v4

/* Secret Passage to Crepe — https://swatchly.xyz/palette/433004-6d562c-8f7f5b-b9974d-d8be91 */
@theme {
  --color-secret-passage: #433004;
  --color-secret-passage-50: #fff4df;
  --color-secret-passage-100: #f8e9ce;
  --color-secret-passage-200: #e7d5b5;
  --color-secret-passage-300: #d2be9a;
  --color-secret-passage-400: #b49f76;
  --color-secret-passage-500: #99835a;
  --color-secret-passage-600: #7e6941;
  --color-secret-passage-700: #66532e;
  --color-secret-passage-800: #514020;
  --color-secret-passage-900: #433004;
  --color-secret-passage-950: #281e0a;
  --color-olivary: #6d562c;
  --color-olivary-50: #fff4e1;
  --color-olivary-100: #f9e9cd;
  --color-olivary-200: #e9d6b5;
  --color-olivary-300: #d6c09a;
  --color-olivary-400: #b9a177;
  --color-olivary-500: #9e865b;
  --color-olivary-600: #846c42;
  --color-olivary-700: #6d562c;
  --color-olivary-800: #564320;
  --color-olivary-900: #433315;
  --color-olivary-950: #2b1f09;
  --color-mushroom-forest: #8f7f5b;
  --color-mushroom-forest-50: #fdf3de;
  --color-mushroom-forest-100: #f3e8d0;
  --color-mushroom-forest-200: #e0d3b6;
  --color-mushroom-forest-300: #cabc9b;
  --color-mushroom-forest-400: #ab9b77;
  --color-mushroom-forest-500: #8f7f5b;
  --color-mushroom-forest-600: #756643;
  --color-mushroom-forest-700: #5e5031;
  --color-mushroom-forest-800: #4a3e23;
  --color-mushroom-forest-900: #3a3019;
  --color-mushroom-forest-950: #251e0d;
  --color-maple-syrup: #b9974d;
  --color-maple-syrup-50: #fff2d7;
  --color-maple-syrup-100: #fce6b8;
  --color-maple-syrup-200: #ebd099;
  --color-maple-syrup-300: #d7b879;
  --color-maple-syrup-400: #b9974d;
  --color-maple-syrup-500: #9e7c31;
  --color-maple-syrup-600: #836313;
  --color-maple-syrup-700: #6a4e00;
  --color-maple-syrup-800: #533d00;
  --color-maple-syrup-900: #412f00;
  --color-maple-syrup-950: #2a1d00;
  --color-crepe: #d8be91;
  --color-crepe-50: #fff4e2;
  --color-crepe-100: #faeace;
  --color-crepe-200: #e9d6b4;
  --color-crepe-300: #d8be91;
  --color-crepe-400: #b79f75;
  --color-crepe-500: #9b8358;
  --color-crepe-600: #80683f;
  --color-crepe-700: #67522b;
  --color-crepe-800: #523f1d;
  --color-crepe-900: #403013;
  --color-crepe-950: #281d08;
}