Illuminati Green to Alligator Gladiator color palette

509073Illuminati Green BEDE9DBasil Smash 81AC70Sage 676C3DJungle Civilization 4D4400Alligator Gladiator

Open in generator Export PNG, PDF, ASE…

About this palette

Illuminati Green to Alligator Gladiator is a 5-color cool, earthy, vintage palette: #509073 (Illuminati Green), #BEDE9D (Basil Smash), #81AC70 (Sage), #676C3D (Jungle Civilization), #4D4400 (Alligator Gladiator). It mixes green, brown tones and feels cool overall. The strongest text pairing is #BEDE9D on #4D4400 with a contrast ratio of 6.59:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Illuminati Green	rgb(80, 144, 115)	hsl(153, 29%, 44%)
Basil Smash	rgb(190, 222, 157)	hsl(90, 50%, 74%)
Sage	rgb(129, 172, 112)	hsl(103, 27%, 56%)
Jungle Civilization	rgb(103, 108, 61)	hsl(66, 28%, 33%)
Alligator Gladiator	rgb(77, 68, 0)	hsl(53, 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.

Aa6.59:1 Good#BEDE9D on #4D4400
Aa6.59:1 Good#4D4400 on #BEDE9D
Aa3.77:1 Poor#81AC70 on #4D4400
Aa3.77:1 Poor#4D4400 on #81AC70
Aa3.73:1 Poor#BEDE9D on #676C3D
Aa3.73:1 Poor#676C3D on #BEDE9D

Color blindness preview

CSS variables

/* Illuminati Green to Alligator Gladiator — https://swatchly.xyz/palette/509073-bede9d-81ac70-676c3d-4d4400 */
:root {
  --illuminati-green: #509073;
  --basil-smash: #bede9d;
  --sage: #81ac70;
  --jungle-civilization: #676c3d;
  --alligator-gladiator: #4d4400;
}

Tailwind CSS v4

/* Illuminati Green to Alligator Gladiator — https://swatchly.xyz/palette/509073-bede9d-81ac70-676c3d-4d4400 */
@theme {
  --color-illuminati-green: #509073;
  --color-illuminati-green-50: #dafeec;
  --color-illuminati-green-100: #ccf4e0;
  --color-illuminati-green-200: #b1e2c9;
  --color-illuminati-green-300: #94ccb0;
  --color-illuminati-green-400: #6eac8f;
  --color-illuminati-green-500: #509073;
  --color-illuminati-green-600: #37765a;
  --color-illuminati-green-700: #245f46;
  --color-illuminati-green-800: #164b36;
  --color-illuminati-green-900: #0d3a29;
  --color-illuminati-green-950: #052518;
  --color-basil-smash: #bede9d;
  --color-basil-smash-50: #e6f9d3;
  --color-basil-smash-100: #d9efc4;
  --color-basil-smash-200: #bede9d;
  --color-basil-smash-300: #abc78f;
  --color-basil-smash-400: #8ca96d;
  --color-basil-smash-500: #718e51;
  --color-basil-smash-600: #597439;
  --color-basil-smash-700: #455e27;
  --color-basil-smash-800: #354a19;
  --color-basil-smash-900: #273910;
  --color-basil-smash-950: #172406;
  --color-sage: #81ac70;
  --color-sage-50: #e3fdda;
  --color-sage-100: #d6f3cc;
  --color-sage-200: #bfe1b2;
  --color-sage-300: #a4cb96;
  --color-sage-400: #81ac70;
  --color-sage-500: #679156;
  --color-sage-600: #4e763e;
  --color-sage-700: #3b5f2b;
  --color-sage-800: #2b4b1e;
  --color-sage-900: #203a14;
  --color-sage-950: #122509;
  --color-jungle-civilization: #676c3d;
  --color-jungle-civilization-50: #f4f8dc;
  --color-jungle-civilization-100: #eaeece;
  --color-jungle-civilization-200: #d5dab4;
  --color-jungle-civilization-300: #bec398;
  --color-jungle-civilization-400: #9ea374;
  --color-jungle-civilization-500: #828757;
  --color-jungle-civilization-600: #676c3d;
  --color-jungle-civilization-700: #51562c;
  --color-jungle-civilization-800: #3f431e;
  --color-jungle-civilization-900: #313414;
  --color-jungle-civilization-950: #1e2009;
  --color-alligator-gladiator: #4d4400;
  --color-alligator-gladiator-50: #fbf7d5;
  --color-alligator-gladiator-100: #f2edc7;
  --color-alligator-gladiator-200: #e0d9ad;
  --color-alligator-gladiator-300: #cac390;
  --color-alligator-gladiator-400: #aca46b;
  --color-alligator-gladiator-500: #91884e;
  --color-alligator-gladiator-600: #776e34;
  --color-alligator-gladiator-700: #5f5721;
  --color-alligator-gladiator-800: #4d4400;
  --color-alligator-gladiator-900: #3a3409;
  --color-alligator-gladiator-950: #252003;
}