Taco to Midnight Pines color palette

FAC5ADTaco F38B00Elden Ring Orange 8F6B1BAged Antics 654200Very Coffee 242303Midnight Pines

About this palette

Taco to Midnight Pines is a 5-color warm, earthy, vintage, gradient palette: #FAC5AD (Taco), #F38B00 (Elden Ring Orange), #8F6B1B (Aged Antics), #654200 (Very Coffee), #242303 (Midnight Pines). It mixes orange, yellow, brown tones and feels warm overall. The strongest text pairing is #FAC5AD on #242303 with a contrast ratio of 10.37:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Taco	rgb(250, 197, 173)	hsl(19, 89%, 83%)
Elden Ring Orange	rgb(243, 139, 0)	hsl(34, 100%, 48%)
Aged Antics	rgb(143, 107, 27)	hsl(41, 68%, 33%)
Very Coffee	rgb(101, 66, 0)	hsl(39, 100%, 20%)
Midnight Pines	rgb(36, 35, 3)	hsl(58, 85%, 8%)

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.37:1 Very good#FAC5AD on #242303
Aa10.37:1 Very good#242303 on #FAC5AD
Aa6.46:1 Good#F38B00 on #242303
Aa6.46:1 Good#242303 on #F38B00
Aa5.85:1 Good#FAC5AD on #654200
Aa5.85:1 Good#654200 on #FAC5AD
Aa3.65:1 Poor#F38B00 on #654200
Aa3.65:1 Poor#654200 on #F38B00

Color blindness preview

CSS variables

/* Taco to Midnight Pines — https://swatchly.xyz/palette/fac5ad-f38b00-8f6b1b-654200-242303 */
:root {
  --taco: #fac5ad;
  --elden-ring-orange: #f38b00;
  --aged-antics: #8f6b1b;
  --very-coffee: #654200;
  --midnight-pines: #242303;
}

Tailwind CSS v4

/* Taco to Midnight Pines — https://swatchly.xyz/palette/fac5ad-f38b00-8f6b1b-654200-242303 */
@theme {
  --color-taco: #fac5ad;
  --color-taco-50: #ffeee6;
  --color-taco-100: #ffdfd1;
  --color-taco-200: #fac5ad;
  --color-taco-300: #dfb19d;
  --color-taco-400: #c2927c;
  --color-taco-500: #a77761;
  --color-taco-600: #8b5e49;
  --color-taco-700: #724936;
  --color-taco-800: #5c3827;
  --color-taco-900: #482a1c;
  --color-taco-950: #2f190f;
  --color-elden-ring-orange: #f38b00;
  --color-elden-ring-orange-50: #fff6ef;
  --color-elden-ring-orange-100: #ffebdb;
  --color-elden-ring-orange-200: #ffd3af;
  --color-elden-ring-orange-300: #ffb574;
  --color-elden-ring-orange-400: #f38b00;
  --color-elden-ring-orange-500: #cb7300;
  --color-elden-ring-orange-600: #a45c00;
  --color-elden-ring-orange-700: #824800;
  --color-elden-ring-orange-800: #663700;
  --color-elden-ring-orange-900: #4f2900;
  --color-elden-ring-orange-950: #321800;
  --color-aged-antics: #8f6b1b;
  --color-aged-antics-50: #fff4e0;
  --color-aged-antics-100: #ffeac3;
  --color-aged-antics-200: #f2d6a1;
  --color-aged-antics-300: #e0bf83;
  --color-aged-antics-400: #c4a05b;
  --color-aged-antics-500: #aa853a;
  --color-aged-antics-600: #8f6b1b;
  --color-aged-antics-700: #745400;
  --color-aged-antics-800: #5b4100;
  --color-aged-antics-900: #463100;
  --color-aged-antics-950: #2d1e00;
  --color-very-coffee: #654200;
  --color-very-coffee-50: #fff3e4;
  --color-very-coffee-100: #ffe7c8;
  --color-very-coffee-200: #f1d2a9;
  --color-very-coffee-300: #dfbc8e;
  --color-very-coffee-400: #c39d69;
  --color-very-coffee-500: #a9834c;
  --color-very-coffee-600: #8f6a33;
  --color-very-coffee-700: #775520;
  --color-very-coffee-800: #654200;
  --color-very-coffee-900: #4d3307;
  --color-very-coffee-950: #331f01;
  --color-midnight-pines: #242303;
  --color-midnight-pines-50: #f6f7e2;
  --color-midnight-pines-100: #ededd6;
  --color-midnight-pines-200: #d9dabe;
  --color-midnight-pines-300: #c3c3a4;
  --color-midnight-pines-400: #a4a482;
  --color-midnight-pines-500: #898967;
  --color-midnight-pines-600: #6f6f4e;
  --color-midnight-pines-700: #59593a;
  --color-midnight-pines-800: #46462b;
  --color-midnight-pines-900: #37361f;
  --color-midnight-pines-950: #242303;
}