April Showers to Alligator Gladiator Color Palette

About this palette

April Showers to Alligator Gladiator is a 4-color warm, earthy, vintage, monochromatic, gradient palette: #DEDBB3 (April Showers), #A2AB46 (Springtide Melodies), #6E6B0E (Muddy Green), #42411A (Alligator Gladiator). It mixes yellow, green, brown tones and feels warm overall. The strongest text pairing is #DEDBB3 on #42411A with a contrast ratio of 7.43:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
April Showers	rgb(222, 219, 179)	hsl(56, 39%, 79%)
Springtide Melodies	rgb(162, 171, 70)	hsl(65, 42%, 47%)
Muddy Green	rgb(110, 107, 14)	hsl(58, 77%, 24%)
Alligator Gladiator	rgb(66, 65, 26)	hsl(58, 43%, 18%)

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.

Aa7.43:1 Very good#DEDBB3 on #42411A
Aa7.43:1 Very good#42411A on #DEDBB3
Aa4.22:1 Poor#A2AB46 on #42411A
Aa4.22:1 Poor#42411A on #A2AB46
Aa3.95:1 Poor#DEDBB3 on #6E6B0E
Aa3.95:1 Poor#6E6B0E on #DEDBB3

Color blindness preview

CSS variables

/* April Showers to Alligator Gladiator — https://swatchly.xyz/palette/dedbb3-a2ab46-6e6b0e-42411a */
:root {
  --april-showers: #dedbb3;
  --springtide-melodies: #a2ab46;
  --muddy-green: #6e6b0e;
  --alligator-gladiator: #42411a;
}

Tailwind CSS v4

/* April Showers to Alligator Gladiator — https://swatchly.xyz/palette/dedbb3-a2ab46-6e6b0e-42411a */
@theme {
  --color-april-showers: #dedbb3;
  --color-april-showers-50: #f9f7e1;
  --color-april-showers-100: #efeed5;
  --color-april-showers-200: #dedbb3;
  --color-april-showers-300: #c6c4a3;
  --color-april-showers-400: #a7a480;
  --color-april-showers-500: #8c8963;
  --color-april-showers-600: #716e4a;
  --color-april-showers-700: #5a5736;
  --color-april-showers-800: #464427;
  --color-april-showers-900: #36341c;
  --color-april-showers-950: #22200e;
  --color-springtide-melodies: #a2ab46;
  --color-springtide-melodies-50: #f4fbc7;
  --color-springtide-melodies-100: #ebf2b7;
  --color-springtide-melodies-200: #d7e098;
  --color-springtide-melodies-300: #c1ca77;
  --color-springtide-melodies-400: #a2ab46;
  --color-springtide-melodies-500: #878f26;
  --color-springtide-melodies-600: #6c7300;
  --color-springtide-melodies-700: #565b00;
  --color-springtide-melodies-800: #434700;
  --color-springtide-melodies-900: #333700;
  --color-springtide-melodies-950: #1f2200;
  --color-muddy-green: #6e6b0e;
  --color-muddy-green-50: #f9f9cc;
  --color-muddy-green-100: #eeeebb;
  --color-muddy-green-200: #dbda9d;
  --color-muddy-green-300: #c4c37d;
  --color-muddy-green-400: #a5a354;
  --color-muddy-green-500: #898733;
  --color-muddy-green-600: #6e6b0e;
  --color-muddy-green-700: #575500;
  --color-muddy-green-800: #444200;
  --color-muddy-green-900: #353300;
  --color-muddy-green-950: #211f00;
  --color-alligator-gladiator: #42411a;
  --color-alligator-gladiator-50: #f7f7df;
  --color-alligator-gladiator-100: #ededd2;
  --color-alligator-gladiator-200: #dadaba;
  --color-alligator-gladiator-300: #c3c39e;
  --color-alligator-gladiator-400: #a3a37b;
  --color-alligator-gladiator-500: #87875e;
  --color-alligator-gladiator-600: #6c6c45;
  --color-alligator-gladiator-700: #555431;
  --color-alligator-gladiator-800: #42411a;
  --color-alligator-gladiator-900: #323218;
  --color-alligator-gladiator-950: #1f1e0c;
}