Secret Passage to Cheesy Frittata color palette

312A0DSecret Passage CBA72FHippie Trail 594500Very Coffee 71662DHimalaya 988936Jalapeño F2DF8DCheesy Frittata

Open in generator Export PNG, PDF, ASE…

About this palette

Secret Passage to Cheesy Frittata is a 6-color warm, earthy, vintage, monochromatic palette: #312A0D (Secret Passage), #CBA72F (Hippie Trail), #594500 (Very Coffee), #71662D (Himalaya), #988936 (Jalapeño), #F2DF8D (Cheesy Frittata). It mixes brown, yellow tones and feels warm overall. The strongest text pairing is #312A0D on #F2DF8D with a contrast ratio of 10.71:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(49, 42, 13)	hsl(48, 58%, 12%)
Hippie Trail	rgb(203, 167, 47)	hsl(46, 62%, 49%)
Very Coffee	rgb(89, 69, 0)	hsl(47, 100%, 17%)
Himalaya	rgb(113, 102, 45)	hsl(50, 43%, 31%)
Jalapeño	rgb(152, 137, 54)	hsl(51, 48%, 40%)
Cheesy Frittata	rgb(242, 223, 141)	hsl(49, 80%, 75%)

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.

Aa10.71:1 Very good#312A0D on #F2DF8D
Aa10.71:1 Very good#F2DF8D on #312A0D
Aa6.90:1 Good#594500 on #F2DF8D
Aa6.90:1 Good#F2DF8D on #594500
Aa6.21:1 Good#312A0D on #CBA72F
Aa6.21:1 Good#CBA72F on #312A0D
Aa4.32:1 Poor#71662D on #F2DF8D
Aa4.32:1 Poor#F2DF8D on #71662D

Color blindness preview

CSS variables

/* Secret Passage to Cheesy Frittata — https://swatchly.xyz/palette/312a0d-cba72f-594500-71662d-988936-f2df8d */
:root {
  --secret-passage: #312a0d;
  --hippie-trail: #cba72f;
  --very-coffee: #594500;
  --himalaya: #71662d;
  --jalape-o: #988936;
  --cheesy-frittata: #f2df8d;
}

Tailwind CSS v4

/* Secret Passage to Cheesy Frittata — https://swatchly.xyz/palette/312a0d-cba72f-594500-71662d-988936-f2df8d */
@theme {
  --color-secret-passage: #312a0d;
  --color-secret-passage-50: #faf5e3;
  --color-secret-passage-100: #f1ecd7;
  --color-secret-passage-200: #ded8bf;
  --color-secret-passage-300: #c8c1a5;
  --color-secret-passage-400: #a8a081;
  --color-secret-passage-500: #8b8364;
  --color-secret-passage-600: #6e674a;
  --color-secret-passage-700: #564f35;
  --color-secret-passage-800: #403b25;
  --color-secret-passage-900: #312a0d;
  --color-secret-passage-950: #1c190c;
  --color-hippie-trail: #cba72f;
  --color-hippie-trail-50: #fff8e5;
  --color-hippie-trail-100: #fff0c3;
  --color-hippie-trail-200: #f6dc93;
  --color-hippie-trail-300: #e4c770;
  --color-hippie-trail-400: #cba72f;
  --color-hippie-trail-500: #ac8a00;
  --color-hippie-trail-600: #8a6e00;
  --color-hippie-trail-700: #6d5700;
  --color-hippie-trail-800: #554300;
  --color-hippie-trail-900: #413200;
  --color-hippie-trail-950: #281e00;
  --color-very-coffee: #594500;
  --color-very-coffee-50: #fff5d9;
  --color-very-coffee-100: #f8eac5;
  --color-very-coffee-200: #e7d6aa;
  --color-very-coffee-300: #d4c18e;
  --color-very-coffee-400: #b7a26a;
  --color-very-coffee-500: #9c874d;
  --color-very-coffee-600: #826d34;
  --color-very-coffee-700: #6b5821;
  --color-very-coffee-800: #594500;
  --color-very-coffee-900: #443508;
  --color-very-coffee-950: #2c2102;
  --color-himalaya: #71662d;
  --color-himalaya-50: #fcf6d6;
  --color-himalaya-100: #f2ebc6;
  --color-himalaya-200: #dfd6aa;
  --color-himalaya-300: #c8bf8c;
  --color-himalaya-400: #a99e66;
  --color-himalaya-500: #8d8149;
  --color-himalaya-600: #71662d;
  --color-himalaya-700: #5a511e;
  --color-himalaya-800: #473f11;
  --color-himalaya-900: #373009;
  --color-himalaya-950: #231e03;
  --color-jalape-o: #988936;
  --color-jalape-o-50: #fff7cb;
  --color-jalape-o-100: #f6edbc;
  --color-jalape-o-200: #e5daa0;
  --color-jalape-o-300: #d0c480;
  --color-jalape-o-400: #b3a457;
  --color-jalape-o-500: #988936;
  --color-jalape-o-600: #7d6e16;
  --color-jalape-o-700: #645700;
  --color-jalape-o-800: #4e4300;
  --color-jalape-o-900: #3c3300;
  --color-jalape-o-950: #262000;
  --color-cheesy-frittata: #f2df8d;
  --color-cheesy-frittata-50: #fffae5;
  --color-cheesy-frittata-100: #fcf2c4;
  --color-cheesy-frittata-200: #f2df8d;
  --color-cheesy-frittata-300: #d6c786;
  --color-cheesy-frittata-400: #b8a65a;
  --color-cheesy-frittata-500: #9b8937;
  --color-cheesy-frittata-600: #7f6d16;
  --color-cheesy-frittata-700: #655600;
  --color-cheesy-frittata-800: #4e4200;
  --color-cheesy-frittata-900: #3d3200;
  --color-cheesy-frittata-950: #261f00;
}