Taco to Maharaja Color Palette

About this palette

Taco to Maharaja is a 5-color cool, vintage palette: #FBC2AF (Taco), #00B6C8 (Glassmith), #A06968 (Cinnapink), #517600 (Master Chief), #393552 (Maharaja). It mixes pink, turquoise, red, green, purple tones and feels cool overall. The strongest text pairing is #FBC2AF on #393552 with a contrast ratio of 7.44:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Taco	rgb(251, 194, 175)	hsl(15, 90%, 84%)
Glassmith	rgb(0, 182, 200)	hsl(185, 100%, 39%)
Cinnapink	rgb(160, 105, 104)	hsl(1, 23%, 52%)
Master Chief	rgb(81, 118, 0)	hsl(79, 100%, 23%)
Maharaja	rgb(57, 53, 82)	hsl(248, 21%, 26%)

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.44:1 Very good#FBC2AF on #393552
Aa7.44:1 Very good#393552 on #FBC2AF
Aa4.72:1 Good#00B6C8 on #393552
Aa4.72:1 Good#393552 on #00B6C8
Aa3.41:1 Poor#FBC2AF on #517600
Aa3.41:1 Poor#517600 on #FBC2AF

Color blindness preview

CSS variables

/* Taco to Maharaja — https://swatchly.xyz/palette/fbc2af-00b6c8-a06968-517600-393552 */
:root {
  --taco: #fbc2af;
  --glassmith: #00b6c8;
  --cinnapink: #a06968;
  --master-chief: #517600;
  --maharaja: #393552;
}

Tailwind CSS v4

/* Taco to Maharaja — https://swatchly.xyz/palette/fbc2af-00b6c8-a06968-517600-393552 */
@theme {
  --color-taco: #fbc2af;
  --color-taco-50: #ffece6;
  --color-taco-100: #ffddd2;
  --color-taco-200: #fbc2af;
  --color-taco-300: #e0af9e;
  --color-taco-400: #c38f7e;
  --color-taco-500: #a97563;
  --color-taco-600: #8d5c4c;
  --color-taco-700: #744739;
  --color-taco-800: #5d372a;
  --color-taco-900: #4a291e;
  --color-taco-950: #301810;
  --color-glassmith: #00b6c8;
  --color-glassmith-50: #e0fbff;
  --color-glassmith-100: #bef7ff;
  --color-glassmith-200: #8ce9f6;
  --color-glassmith-300: #63d4e3;
  --color-glassmith-400: #00b6c8;
  --color-glassmith-500: #0097a7;
  --color-glassmith-600: #007a87;
  --color-glassmith-700: #00616b;
  --color-glassmith-800: #004c54;
  --color-glassmith-900: #003a41;
  --color-glassmith-950: #002529;
  --color-cinnapink: #a06968;
  --color-cinnapink-50: #ffeeee;
  --color-cinnapink-100: #ffdddc;
  --color-cinnapink-200: #f3c3c1;
  --color-cinnapink-300: #dea9a7;
  --color-cinnapink-400: #be8685;
  --color-cinnapink-500: #a06968;
  --color-cinnapink-600: #855251;
  --color-cinnapink-700: #6d3f3f;
  --color-cinnapink-800: #573030;
  --color-cinnapink-900: #462424;
  --color-cinnapink-950: #2e1616;
  --color-master-chief: #517600;
  --color-master-chief-50: #e7ffcc;
  --color-master-chief-100: #daf6b9;
  --color-master-chief-200: #c3e39b;
  --color-master-chief-300: #a9ce7a;
  --color-master-chief-400: #87ae50;
  --color-master-chief-500: #6b922d;
  --color-master-chief-600: #517600;
  --color-master-chief-700: #3f5e00;
  --color-master-chief-800: #314900;
  --color-master-chief-900: #253900;
  --color-master-chief-950: #152300;
  --color-maharaja: #393552;
  --color-maharaja-50: #f5f4ff;
  --color-maharaja-100: #eae8ff;
  --color-maharaja-200: #d6d4ef;
  --color-maharaja-300: #c0bddb;
  --color-maharaja-400: #a29ec0;
  --color-maharaja-500: #8884a6;
  --color-maharaja-600: #6f6b8b;
  --color-maharaja-700: #595673;
  --color-maharaja-800: #48445e;
  --color-maharaja-900: #393552;
  --color-maharaja-950: #242233;
}