Start generating

Mexican Standoff to Tropical Forest color palette

ECA06DMexican StandoffF17227Apocalyptic Orange241646Azulado19845CPrimal GreenD7D9FFIcy Plains004D3BTropical Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Mexican Standoff to Tropical Forest is a 6-color cool palette: #ECA06D (Mexican Standoff), #F17227 (Apocalyptic Orange), #241646 (Azulado), #19845C (Primal Green), #D7D9FF (Icy Plains), #004D3B (Tropical Forest). It mixes orange, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #241646 on #D7D9FF with a contrast ratio of 11.94:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Mexican Standoffrgb(236, 160, 109)hsl(24, 77%, 68%)
Apocalyptic Orangergb(241, 114, 39)hsl(22, 88%, 55%)
Azuladorgb(36, 22, 70)hsl(258, 52%, 18%)
Primal Greenrgb(25, 132, 92)hsl(158, 68%, 31%)
Icy Plainsrgb(215, 217, 255)hsl(237, 100%, 92%)
Tropical Forestrgb(0, 77, 59)hsl(166, 100%, 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.

  • Aa11.94:1 Very good#241646 on #D7D9FF
  • Aa11.94:1 Very good#D7D9FF on #241646
  • Aa7.68:1 Very good#ECA06D on #241646
  • Aa7.68:1 Very good#241646 on #ECA06D
  • Aa7.18:1 Very good#D7D9FF on #004D3B
  • Aa7.18:1 Very good#004D3B on #D7D9FF
  • Aa5.61:1 Good#F17227 on #241646
  • Aa5.61:1 Good#241646 on #F17227

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Mexican Standoff to Tropical Forest — https://swatchly.xyz/palette/eca06d-f17227-241646-19845c-d7d9ff-004d3b */
:root {
  --mexican-standoff: #eca06d;
  --apocalyptic-orange: #f17227;
  --azulado: #241646;
  --primal-green: #19845c;
  --icy-plains: #d7d9ff;
  --tropical-forest: #004d3b;
}

Tailwind CSS v4

/* Mexican Standoff to Tropical Forest — https://swatchly.xyz/palette/eca06d-f17227-241646-19845c-d7d9ff-004d3b */
@theme {
  --color-mexican-standoff: #eca06d;
  --color-mexican-standoff-50: #ffeadd;
  --color-mexican-standoff-100: #ffdac2;
  --color-mexican-standoff-200: #fcbd95;
  --color-mexican-standoff-300: #eca06d;
  --color-mexican-standoff-400: #cc8452;
  --color-mexican-standoff-500: #b16a37;
  --color-mexican-standoff-600: #95521f;
  --color-mexican-standoff-700: #7c3f0c;
  --color-mexican-standoff-800: #653000;
  --color-mexican-standoff-900: #512500;
  --color-mexican-standoff-950: #341500;
  --color-apocalyptic-orange: #f17227;
  --color-apocalyptic-orange-50: #fff0e9;
  --color-apocalyptic-orange-100: #ffe1d3;
  --color-apocalyptic-orange-200: #ffc5aa;
  --color-apocalyptic-orange-300: #ffa274;
  --color-apocalyptic-orange-400: #f17227;
  --color-apocalyptic-orange-500: #cf5900;
  --color-apocalyptic-orange-600: #a84700;
  --color-apocalyptic-orange-700: #873700;
  --color-apocalyptic-orange-800: #6b2a00;
  --color-apocalyptic-orange-900: #552000;
  --color-apocalyptic-orange-950: #381200;
  --color-azulado: #241646;
  --color-azulado-50: #f5f3ff;
  --color-azulado-100: #ebe8ff;
  --color-azulado-200: #d8d0ff;
  --color-azulado-300: #c2b9ed;
  --color-azulado-400: #a398d1;
  --color-azulado-500: #887db6;
  --color-azulado-600: #6e639a;
  --color-azulado-700: #584e7f;
  --color-azulado-800: #453c67;
  --color-azulado-900: #362e53;
  --color-azulado-950: #241646;
  --color-primal-green: #19845c;
  --color-primal-green-50: #dcffec;
  --color-primal-green-100: #c4fbde;
  --color-primal-green-200: #a8ebc9;
  --color-primal-green-300: #89d7b1;
  --color-primal-green-400: #60ba90;
  --color-primal-green-500: #3d9f75;
  --color-primal-green-600: #19845c;
  --color-primal-green-700: #006a47;
  --color-primal-green-800: #005337;
  --color-primal-green-900: #004029;
  --color-primal-green-950: #002818;
  --color-icy-plains: #d7d9ff;
  --color-icy-plains-50: #f7f8ff;
  --color-icy-plains-100: #edeeff;
  --color-icy-plains-200: #d7d9ff;
  --color-icy-plains-300: #c0c2e1;
  --color-icy-plains-400: #a0a1c4;
  --color-icy-plains-500: #8485a8;
  --color-icy-plains-600: #696a8b;
  --color-icy-plains-700: #525370;
  --color-icy-plains-800: #3f3f59;
  --color-icy-plains-900: #303046;
  --color-icy-plains-950: #1d1d2d;
  --color-tropical-forest: #004d3b;
  --color-tropical-forest-50: #dbfff1;
  --color-tropical-forest-100: #cef6e7;
  --color-tropical-forest-200: #b4e4d2;
  --color-tropical-forest-300: #98cebb;
  --color-tropical-forest-400: #72b09a;
  --color-tropical-forest-500: #54947f;
  --color-tropical-forest-600: #3a7865;
  --color-tropical-forest-700: #26604e;
  --color-tropical-forest-800: #004d3b;
  --color-tropical-forest-900: #0d3a2e;
  --color-tropical-forest-950: #05241b;
}

Similar palettes