Lime It or Leave It to Eclipse Elixir color palette

8DA24DLime It or Leave It CCCC97Court-Bouillon 787E40Grasshopper 492E73Mystic Nights 231F36Eclipse Elixir

Open in generator Export PNG, PDF, ASE…

About this palette

Lime It or Leave It to Eclipse Elixir is a 5-color cool, earthy, vintage palette: #8DA24D (Lime It or Leave It), #CCCC97 (Court-Bouillon), #787E40 (Grasshopper), #492E73 (Mystic Nights), #231F36 (Eclipse Elixir). It mixes green, yellow, purple tones and feels cool overall. The strongest text pairing is #CCCC97 on #231F36 with a contrast ratio of 9.58:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lime It or Leave It	rgb(141, 162, 77)	hsl(75, 36%, 47%)
Court-Bouillon	rgb(204, 204, 151)	hsl(60, 34%, 70%)
Grasshopper	rgb(120, 126, 64)	hsl(66, 33%, 37%)
Mystic Nights	rgb(73, 46, 115)	hsl(263, 43%, 32%)
Eclipse Elixir	rgb(35, 31, 54)	hsl(250, 27%, 17%)

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.

Aa9.58:1 Very good#CCCC97 on #231F36
Aa9.58:1 Very good#231F36 on #CCCC97
Aa6.58:1 Good#CCCC97 on #492E73
Aa6.58:1 Good#492E73 on #CCCC97
Aa5.61:1 Good#8DA24D on #231F36
Aa5.61:1 Good#231F36 on #8DA24D
Aa3.85:1 Poor#8DA24D on #492E73
Aa3.85:1 Poor#492E73 on #8DA24D

Color blindness preview

CSS variables

/* Lime It or Leave It to Eclipse Elixir — https://swatchly.xyz/palette/8da24d-cccc97-787e40-492e73-231f36 */
:root {
  --lime-it-or-leave-it: #8da24d;
  --court-bouillon: #cccc97;
  --grasshopper: #787e40;
  --mystic-nights: #492e73;
  --eclipse-elixir: #231f36;
}

Tailwind CSS v4

/* Lime It or Leave It to Eclipse Elixir — https://swatchly.xyz/palette/8da24d-cccc97-787e40-492e73-231f36 */
@theme {
  --color-lime-it-or-leave-it: #8da24d;
  --color-lime-it-or-leave-it-50: #ebf9c8;
  --color-lime-it-or-leave-it-100: #deeeb7;
  --color-lime-it-or-leave-it-200: #c7da98;
  --color-lime-it-or-leave-it-300: #aec277;
  --color-lime-it-or-leave-it-400: #8da24d;
  --color-lime-it-or-leave-it-500: #748832;
  --color-lime-it-or-leave-it-600: #5c6f18;
  --color-lime-it-or-leave-it-700: #495901;
  --color-lime-it-or-leave-it-800: #394600;
  --color-lime-it-or-leave-it-900: #2c3700;
  --color-lime-it-or-leave-it-950: #1b2300;
  --color-court-bouillon: #cccc97;
  --color-court-bouillon-50: #fbfbdf;
  --color-court-bouillon-100: #f2f3d3;
  --color-court-bouillon-200: #e0e1bb;
  --color-court-bouillon-300: #cccc97;
  --color-court-bouillon-400: #abab7a;
  --color-court-bouillon-500: #8e8e5c;
  --color-court-bouillon-600: #737241;
  --color-court-bouillon-700: #5b5a2d;
  --color-court-bouillon-800: #46461d;
  --color-court-bouillon-900: #353513;
  --color-court-bouillon-950: #212108;
  --color-grasshopper: #787e40;
  --color-grasshopper-50: #f4f9d6;
  --color-grasshopper-100: #edf2cb;
  --color-grasshopper-200: #dbe1b3;
  --color-grasshopper-300: #c7cd99;
  --color-grasshopper-400: #aab075;
  --color-grasshopper-500: #909759;
  --color-grasshopper-600: #787e40;
  --color-grasshopper-700: #5f6429;
  --color-grasshopper-800: #4a4e19;
  --color-grasshopper-900: #383c0d;
  --color-grasshopper-950: #232504;
  --color-mystic-nights: #492e73;
  --color-mystic-nights-50: #f6f3ff;
  --color-mystic-nights-100: #eee7ff;
  --color-mystic-nights-200: #ddceff;
  --color-mystic-nights-300: #c9b3f8;
  --color-mystic-nights-400: #aa91dc;
  --color-mystic-nights-500: #8e74c0;
  --color-mystic-nights-600: #735aa1;
  --color-mystic-nights-700: #5b4485;
  --color-mystic-nights-800: #492e73;
  --color-mystic-nights-900: #372555;
  --color-mystic-nights-950: #221537;
  --color-eclipse-elixir: #231f36;
  --color-eclipse-elixir-50: #f5f4ff;
  --color-eclipse-elixir-100: #ebe8fc;
  --color-eclipse-elixir-200: #d7d4eb;
  --color-eclipse-elixir-300: #c0bdd7;
  --color-eclipse-elixir-400: #a19dba;
  --color-eclipse-elixir-500: #87839f;
  --color-eclipse-elixir-600: #6d6984;
  --color-eclipse-elixir-700: #57546c;
  --color-eclipse-elixir-800: #454258;
  --color-eclipse-elixir-900: #363346;
  --color-eclipse-elixir-950: #231f36;
}