Start generating

Taco to Torrefacto Roast color palette

F8C2A9Taco74AA8AGreen Goddess568871Clouded Pine575A96Piccadilly Purple354171Space Missions492215Torrefacto Roast
Open in generator Export PNG, PDF, ASE…

About this palette

Taco to Torrefacto Roast is a 6-color cool, earthy palette: #F8C2A9 (Taco), #74AA8A (Green Goddess), #568871 (Clouded Pine), #575A96 (Piccadilly Purple), #354171 (Space Missions), #492215 (Torrefacto Roast). It mixes orange, green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #F8C2A9 on #492215 with a contrast ratio of 8.72:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Tacorgb(248, 194, 169)hsl(19, 85%, 82%)
Green Goddessrgb(116, 170, 138)hsl(144, 24%, 56%)
Clouded Pinergb(86, 136, 113)hsl(152, 23%, 44%)
Piccadilly Purplergb(87, 90, 150)hsl(237, 27%, 46%)
Space Missionsrgb(53, 65, 113)hsl(228, 36%, 33%)
Torrefacto Roastrgb(73, 34, 21)hsl(15, 55%, 18%)

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.72:1 Very good#F8C2A9 on #492215
  • Aa8.72:1 Very good#492215 on #F8C2A9
  • Aa6.19:1 Good#F8C2A9 on #354171
  • Aa6.19:1 Good#354171 on #F8C2A9
  • Aa5.16:1 Good#74AA8A on #492215
  • Aa5.16:1 Good#492215 on #74AA8A
  • Aa4.01:1 Poor#F8C2A9 on #575A96
  • Aa4.01:1 Poor#575A96 on #F8C2A9

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Taco to Torrefacto Roast — https://swatchly.xyz/palette/f8c2a9-74aa8a-568871-575a96-354171-492215 */
:root {
  --taco: #f8c2a9;
  --green-goddess: #74aa8a;
  --clouded-pine: #568871;
  --piccadilly-purple: #575a96;
  --space-missions: #354171;
  --torrefacto-roast: #492215;
}

Tailwind CSS v4

/* Taco to Torrefacto Roast — https://swatchly.xyz/palette/f8c2a9-74aa8a-568871-575a96-354171-492215 */
@theme {
  --color-taco: #f8c2a9;
  --color-taco-50: #ffebe2;
  --color-taco-100: #ffdccc;
  --color-taco-200: #f8c2a9;
  --color-taco-300: #ddaf99;
  --color-taco-400: #c19079;
  --color-taco-500: #a7755e;
  --color-taco-600: #8b5d47;
  --color-taco-700: #724834;
  --color-taco-800: #5d3826;
  --color-taco-900: #492a1b;
  --color-taco-950: #2f190e;
  --color-green-goddess: #74aa8a;
  --color-green-goddess-50: #ddfce8;
  --color-green-goddess-100: #cff2dc;
  --color-green-goddess-200: #b5dfc5;
  --color-green-goddess-300: #99c9ac;
  --color-green-goddess-400: #74aa8a;
  --color-green-goddess-500: #5a8f70;
  --color-green-goddess-600: #427558;
  --color-green-goddess-700: #2f5e44;
  --color-green-goddess-800: #214b34;
  --color-green-goddess-900: #163a27;
  --color-green-goddess-950: #0b2517;
  --color-clouded-pine: #568871;
  --color-clouded-pine-50: #defbec;
  --color-clouded-pine-100: #cff1e0;
  --color-clouded-pine-200: #b5ddc9;
  --color-clouded-pine-300: #98c5af;
  --color-clouded-pine-400: #73a58e;
  --color-clouded-pine-500: #568871;
  --color-clouded-pine-600: #3f6f59;
  --color-clouded-pine-700: #2e5946;
  --color-clouded-pine-800: #204636;
  --color-clouded-pine-900: #163729;
  --color-clouded-pine-950: #0b2319;
  --color-piccadilly-purple: #575a96;
  --color-piccadilly-purple-50: #f3f4ff;
  --color-piccadilly-purple-100: #e4e7ff;
  --color-piccadilly-purple-200: #cacfff;
  --color-piccadilly-purple-300: #b0b6f0;
  --color-piccadilly-purple-400: #8e93d3;
  --color-piccadilly-purple-500: #7276b5;
  --color-piccadilly-purple-600: #575a96;
  --color-piccadilly-purple-700: #44467a;
  --color-piccadilly-purple-800: #353663;
  --color-piccadilly-purple-900: #28294f;
  --color-piccadilly-purple-950: #181934;
  --color-space-missions: #354171;
  --color-space-missions-50: #f1f5ff;
  --color-space-missions-100: #e4ebff;
  --color-space-missions-200: #c9d6ff;
  --color-space-missions-300: #b1bff0;
  --color-space-missions-400: #90a0d5;
  --color-space-missions-500: #7585ba;
  --color-space-missions-600: #5c6b9d;
  --color-space-missions-700: #485483;
  --color-space-missions-800: #354171;
  --color-space-missions-900: #293255;
  --color-space-missions-950: #181f38;
  --color-torrefacto-roast: #492215;
  --color-torrefacto-roast-50: #fff2ee;
  --color-torrefacto-roast-100: #ffe5dc;
  --color-torrefacto-roast-200: #f4cec1;
  --color-torrefacto-roast-300: #e1b6a7;
  --color-torrefacto-roast-400: #c39485;
  --color-torrefacto-roast-500: #a67868;
  --color-torrefacto-roast-600: #895d4f;
  --color-torrefacto-roast-700: #6e473a;
  --color-torrefacto-roast-800: #56352a;
  --color-torrefacto-roast-900: #492215;
  --color-torrefacto-roast-950: #2a1610;
}

Similar palettes