Start generating

Cotton Boll to Midnight Masquerade color palette

E8EEFFCotton BollEAA270Mexican Standoff9FA062Garden of Earthly Delights8B552EPrecious Copper29334EMidnight Masquerade
Open in generator Export PNG, PDF, ASE…

About this palette

Cotton Boll to Midnight Masquerade is a 5-color warm, earthy, vintage palette: #E8EEFF (Cotton Boll), #EAA270 (Mexican Standoff), #9FA062 (Garden of Earthly Delights), #8B552E (Precious Copper), #29334E (Midnight Masquerade). It mixes white, orange, yellow, brown, blue tones and feels warm overall. The strongest text pairing is #E8EEFF on #29334E with a contrast ratio of 10.79:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Cotton Bollrgb(232, 238, 255)hsl(224, 100%, 95%)
Mexican Standoffrgb(234, 162, 112)hsl(25, 74%, 68%)
Garden of Earthly Delightsrgb(159, 160, 98)hsl(61, 25%, 51%)
Precious Copperrgb(139, 85, 46)hsl(25, 50%, 36%)
Midnight Masqueradergb(41, 51, 78)hsl(224, 31%, 23%)

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.79:1 Very good#E8EEFF on #29334E
  • Aa10.79:1 Very good#29334E on #E8EEFF
  • Aa5.90:1 Good#EAA270 on #29334E
  • Aa5.90:1 Good#29334E on #EAA270
  • Aa5.27:1 Good#E8EEFF on #8B552E
  • Aa5.27:1 Good#8B552E on #E8EEFF
  • Aa4.58:1 Good#9FA062 on #29334E
  • Aa4.58:1 Good#29334E on #9FA062

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Cotton Boll to Midnight Masquerade — https://swatchly.xyz/palette/e8eeff-eaa270-9fa062-8b552e-29334e */
:root {
  --cotton-boll: #e8eeff;
  --mexican-standoff: #eaa270;
  --garden-of-earthly-delights: #9fa062;
  --precious-copper: #8b552e;
  --midnight-masquerade: #29334e;
}

Tailwind CSS v4

/* Cotton Boll to Midnight Masquerade — https://swatchly.xyz/palette/e8eeff-eaa270-9fa062-8b552e-29334e */
@theme {
  --color-cotton-boll: #e8eeff;
  --color-cotton-boll-50: #f5f8ff;
  --color-cotton-boll-100: #e8eeff;
  --color-cotton-boll-200: #d5dae6;
  --color-cotton-boll-300: #bec3d0;
  --color-cotton-boll-400: #9da3b2;
  --color-cotton-boll-500: #818796;
  --color-cotton-boll-600: #676c7a;
  --color-cotton-boll-700: #505562;
  --color-cotton-boll-800: #3e424d;
  --color-cotton-boll-900: #2f333c;
  --color-cotton-boll-950: #1d1f26;
  --color-mexican-standoff: #eaa270;
  --color-mexican-standoff-50: #ffeadd;
  --color-mexican-standoff-100: #ffdac3;
  --color-mexican-standoff-200: #fabf97;
  --color-mexican-standoff-300: #eaa270;
  --color-mexican-standoff-400: #ca8555;
  --color-mexican-standoff-500: #af6c3a;
  --color-mexican-standoff-600: #935422;
  --color-mexican-standoff-700: #7a4110;
  --color-mexican-standoff-800: #643103;
  --color-mexican-standoff-900: #502600;
  --color-mexican-standoff-950: #341600;
  --color-garden-of-earthly-delights: #9fa062;
  --color-garden-of-earthly-delights-50: #f5f6d2;
  --color-garden-of-earthly-delights-100: #eaecc3;
  --color-garden-of-earthly-delights-200: #d6d7a7;
  --color-garden-of-earthly-delights-300: #bfc089;
  --color-garden-of-earthly-delights-400: #9fa062;
  --color-garden-of-earthly-delights-500: #858648;
  --color-garden-of-earthly-delights-600: #6c6c30;
  --color-garden-of-earthly-delights-700: #56561e;
  --color-garden-of-earthly-delights-800: #444311;
  --color-garden-of-earthly-delights-900: #343409;
  --color-garden-of-earthly-delights-950: #212103;
  --color-precious-copper: #8b552e;
  --color-precious-copper-50: #fff2ea;
  --color-precious-copper-100: #ffe4d2;
  --color-precious-copper-200: #f9c9aa;
  --color-precious-copper-300: #e5b08d;
  --color-precious-copper-400: #c68d67;
  --color-precious-copper-500: #a97049;
  --color-precious-copper-600: #8b552e;
  --color-precious-copper-700: #71421f;
  --color-precious-copper-800: #5a3213;
  --color-precious-copper-900: #48250b;
  --color-precious-copper-950: #2e1604;
  --color-midnight-masquerade: #29334e;
  --color-midnight-masquerade-50: #f1f5ff;
  --color-midnight-masquerade-100: #e3ebff;
  --color-midnight-masquerade-200: #cdd7f1;
  --color-midnight-masquerade-300: #b5c1de;
  --color-midnight-masquerade-400: #95a1c1;
  --color-midnight-masquerade-500: #7a86a6;
  --color-midnight-masquerade-600: #606c8a;
  --color-midnight-masquerade-700: #4b5671;
  --color-midnight-masquerade-800: #3a435b;
  --color-midnight-masquerade-900: #29334e;
  --color-midnight-masquerade-950: #1a202e;
}

Similar palettes