Prairie Land to Secret Passage color palette

E3CB95Prairie Land BA9F69Tiger A27216Cookie Dough 6C5213Ayahuasca Vine 3D3111Secret Passage

About this palette

Prairie Land to Secret Passage is a 5-color warm, earthy, vintage, monochromatic, gradient palette: #E3CB95 (Prairie Land), #BA9F69 (Tiger), #A27216 (Cookie Dough), #6C5213 (Ayahuasca Vine), #3D3111 (Secret Passage). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #E3CB95 on #3D3111 with a contrast ratio of 8.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prairie Land	rgb(227, 203, 149)	hsl(42, 58%, 74%)
Tiger	rgb(186, 159, 105)	hsl(40, 37%, 57%)
Cookie Dough	rgb(162, 114, 22)	hsl(39, 76%, 36%)
Ayahuasca Vine	rgb(108, 82, 19)	hsl(42, 70%, 25%)
Secret Passage	rgb(61, 49, 17)	hsl(44, 56%, 15%)

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.05:1 Very good#E3CB95 on #3D3111
Aa8.05:1 Very good#3D3111 on #E3CB95
Aa5.01:1 Good#BA9F69 on #3D3111
Aa5.01:1 Good#3D3111 on #BA9F69
Aa4.64:1 Good#E3CB95 on #6C5213
Aa4.64:1 Good#6C5213 on #E3CB95
Aa3.01:1 Poor#A27216 on #3D3111
Aa3.01:1 Poor#3D3111 on #A27216

Color blindness preview

CSS variables

/* Prairie Land to Secret Passage — https://swatchly.xyz/palette/e3cb95-ba9f69-a27216-6c5213-3d3111 */
:root {
  --prairie-land: #e3cb95;
  --tiger: #ba9f69;
  --cookie-dough: #a27216;
  --ayahuasca-vine: #6c5213;
  --secret-passage: #3d3111;
}

Tailwind CSS v4

/* Prairie Land to Secret Passage — https://swatchly.xyz/palette/e3cb95-ba9f69-a27216-6c5213-3d3111 */
@theme {
  --color-prairie-land: #e3cb95;
  --color-prairie-land-50: #fcedcd;
  --color-prairie-land-100: #f1e1bd;
  --color-prairie-land-200: #e3cb95;
  --color-prairie-land-300: #cbb788;
  --color-prairie-land-400: #af9966;
  --color-prairie-land-500: #957f4b;
  --color-prairie-land-600: #7b6634;
  --color-prairie-land-700: #655122;
  --color-prairie-land-800: #514016;
  --color-prairie-land-900: #3f310c;
  --color-prairie-land-950: #281e04;
  --color-tiger: #ba9f69;
  --color-tiger-50: #fff4e0;
  --color-tiger-100: #fbeac8;
  --color-tiger-200: #ebd6ae;
  --color-tiger-300: #d6bf91;
  --color-tiger-400: #ba9f69;
  --color-tiger-500: #9e834e;
  --color-tiger-600: #826934;
  --color-tiger-700: #695221;
  --color-tiger-800: #533f13;
  --color-tiger-900: #413009;
  --color-tiger-950: #291d03;
  --color-cookie-dough: #a27216;
  --color-cookie-dough-50: #fff1dd;
  --color-cookie-dough-100: #ffe3ba;
  --color-cookie-dough-200: #f3cb8f;
  --color-cookie-dough-300: #deb26c;
  --color-cookie-dough-400: #c08f3f;
  --color-cookie-dough-500: #a27216;
  --color-cookie-dough-600: #855b00;
  --color-cookie-dough-700: #6a4800;
  --color-cookie-dough-800: #543800;
  --color-cookie-dough-900: #422b00;
  --color-cookie-dough-950: #2b1a00;
  --color-ayahuasca-vine: #6c5213;
  --color-ayahuasca-vine-50: #fff4de;
  --color-ayahuasca-vine-100: #fbe9c4;
  --color-ayahuasca-vine-200: #ebd5a9;
  --color-ayahuasca-vine-300: #d7be8c;
  --color-ayahuasca-vine-400: #ba9e66;
  --color-ayahuasca-vine-500: #9f8349;
  --color-ayahuasca-vine-600: #83692f;
  --color-ayahuasca-vine-700: #6c5213;
  --color-ayahuasca-vine-800: #55400d;
  --color-ayahuasca-vine-900: #423004;
  --color-ayahuasca-vine-950: #2a1d01;
  --color-secret-passage: #3d3111;
  --color-secret-passage-50: #fdf5e1;
  --color-secret-passage-100: #f4ebd4;
  --color-secret-passage-200: #e1d7bc;
  --color-secret-passage-300: #ccc0a2;
  --color-secret-passage-400: #aea07f;
  --color-secret-passage-500: #928563;
  --color-secret-passage-600: #776a4a;
  --color-secret-passage-700: #605437;
  --color-secret-passage-800: #4b4127;
  --color-secret-passage-900: #3d3111;
  --color-secret-passage-950: #251e0f;
}