Creamy Apricot to Mexican Standoff color palette

FFE9C0Creamy Apricot 3C1D03Medium Roast 714B00Chocolate Rain 72852BPesto di Rucola E4A06EMexican Standoff

Open in generator Export PNG, PDF, ASE…

About this palette

Creamy Apricot to Mexican Standoff is a 5-color warm, earthy, vintage palette: #FFE9C0 (Creamy Apricot), #3C1D03 (Medium Roast), #714B00 (Chocolate Rain), #72852B (Pesto di Rucola), #E4A06E (Mexican Standoff). It mixes white, brown, green, orange tones and feels warm overall. The strongest text pairing is #FFE9C0 on #3C1D03 with a contrast ratio of 12.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Creamy Apricot	rgb(255, 233, 192)	hsl(39, 100%, 88%)
Medium Roast	rgb(60, 29, 3)	hsl(27, 90%, 12%)
Chocolate Rain	rgb(113, 75, 0)	hsl(40, 100%, 22%)
Pesto di Rucola	rgb(114, 133, 43)	hsl(73, 51%, 35%)
Mexican Standoff	rgb(228, 160, 110)	hsl(25, 69%, 66%)

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.

Aa12.90:1 Super#FFE9C0 on #3C1D03
Aa12.90:1 Super#3C1D03 on #FFE9C0
Aa6.98:1 Good#3C1D03 on #E4A06E
Aa6.98:1 Good#E4A06E on #3C1D03
Aa6.52:1 Good#FFE9C0 on #714B00
Aa6.52:1 Good#714B00 on #FFE9C0
Aa3.73:1 Poor#3C1D03 on #72852B
Aa3.73:1 Poor#72852B on #3C1D03

Color blindness preview

CSS variables

/* Creamy Apricot to Mexican Standoff — https://swatchly.xyz/palette/ffe9c0-3c1d03-714b00-72852b-e4a06e */
:root {
  --creamy-apricot: #ffe9c0;
  --medium-roast: #3c1d03;
  --chocolate-rain: #714b00;
  --pesto-di-rucola: #72852b;
  --mexican-standoff: #e4a06e;
}

Tailwind CSS v4

/* Creamy Apricot to Mexican Standoff — https://swatchly.xyz/palette/ffe9c0-3c1d03-714b00-72852b-e4a06e */
@theme {
  --color-creamy-apricot: #ffe9c0;
  --color-creamy-apricot-50: #fff4e1;
  --color-creamy-apricot-100: #ffe9c0;
  --color-creamy-apricot-200: #e6d6b8;
  --color-creamy-apricot-300: #d1bf9d;
  --color-creamy-apricot-400: #b39f7a;
  --color-creamy-apricot-500: #98845e;
  --color-creamy-apricot-600: #7c6945;
  --color-creamy-apricot-700: #645331;
  --color-creamy-apricot-800: #4f4023;
  --color-creamy-apricot-900: #3e3118;
  --color-creamy-apricot-950: #271e0c;
  --color-medium-roast: #3c1d03;
  --color-medium-roast-50: #fff2ea;
  --color-medium-roast-100: #ffe6d4;
  --color-medium-roast-200: #f0d1bb;
  --color-medium-roast-300: #dcb9a1;
  --color-medium-roast-400: #bf997e;
  --color-medium-roast-500: #a57e64;
  --color-medium-roast-600: #8a664c;
  --color-medium-roast-700: #725139;
  --color-medium-roast-800: #5d402b;
  --color-medium-roast-900: #4c3220;
  --color-medium-roast-950: #3c1d03;
  --color-chocolate-rain: #714b00;
  --color-chocolate-rain-50: #fff3e3;
  --color-chocolate-rain-100: #ffe7c7;
  --color-chocolate-rain-200: #f2d2a4;
  --color-chocolate-rain-300: #dfba86;
  --color-chocolate-rain-400: #c1995f;
  --color-chocolate-rain-500: #a57d40;
  --color-chocolate-rain-600: #896225;
  --color-chocolate-rain-700: #714b00;
  --color-chocolate-rain-800: #593a02;
  --color-chocolate-rain-900: #452c00;
  --color-chocolate-rain-950: #2c1b00;
  --color-pesto-di-rucola: #72852b;
  --color-pesto-di-rucola-50: #edfac9;
  --color-pesto-di-rucola-100: #e0efb7;
  --color-pesto-di-rucola-200: #c9db98;
  --color-pesto-di-rucola-300: #b0c376;
  --color-pesto-di-rucola-400: #8ea24d;
  --color-pesto-di-rucola-500: #72852b;
  --color-pesto-di-rucola-600: #5b6c0f;
  --color-pesto-di-rucola-700: #475600;
  --color-pesto-di-rucola-800: #384400;
  --color-pesto-di-rucola-900: #2b3500;
  --color-pesto-di-rucola-950: #1a2100;
  --color-mexican-standoff: #e4a06e;
  --color-mexican-standoff-50: #ffe8d8;
  --color-mexican-standoff-100: #ffd7bc;
  --color-mexican-standoff-200: #f5bd94;
  --color-mexican-standoff-300: #e4a06e;
  --color-mexican-standoff-400: #c58453;
  --color-mexican-standoff-500: #ab6b39;
  --color-mexican-standoff-600: #905423;
  --color-mexican-standoff-700: #774111;
  --color-mexican-standoff-800: #613205;
  --color-mexican-standoff-900: #4f2600;
  --color-mexican-standoff-950: #331600;
}