Alligator Gladiator to Maroccan Tea color palette

4F4300Alligator Gladiator 00785AGreasy Greens 698B2EAsparagus Sultan 00BE97Slime Girl BDBA37Sinsemilla C7EDC0Maroccan Tea

Open in generator Export PNG, PDF, ASE…

About this palette

Alligator Gladiator to Maroccan Tea is a 6-color cool, earthy, gradient palette: #4F4300 (Alligator Gladiator), #00785A (Greasy Greens), #698B2E (Asparagus Sultan), #00BE97 (Slime Girl), #BDBA37 (Sinsemilla), #C7EDC0 (Maroccan Tea). It mixes brown, turquoise, green, yellow tones and feels cool overall. The strongest text pairing is #4F4300 on #C7EDC0 with a contrast ratio of 7.64:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator Gladiator	rgb(79, 67, 0)	hsl(51, 100%, 15%)
Greasy Greens	rgb(0, 120, 90)	hsl(165, 100%, 24%)
Asparagus Sultan	rgb(105, 139, 46)	hsl(82, 50%, 36%)
Slime Girl	rgb(0, 190, 151)	hsl(168, 100%, 37%)
Sinsemilla	rgb(189, 186, 55)	hsl(59, 55%, 48%)
Maroccan Tea	rgb(199, 237, 192)	hsl(111, 56%, 84%)

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.64:1 Very good#4F4300 on #C7EDC0
Aa7.64:1 Very good#C7EDC0 on #4F4300
Aa4.80:1 Good#4F4300 on #BDBA37
Aa4.80:1 Good#BDBA37 on #4F4300
Aa4.25:1 Poor#00785A on #C7EDC0
Aa4.25:1 Poor#C7EDC0 on #00785A
Aa4.13:1 Poor#4F4300 on #00BE97
Aa4.13:1 Poor#00BE97 on #4F4300

Color blindness preview

CSS variables

/* Alligator Gladiator to Maroccan Tea — https://swatchly.xyz/palette/4f4300-00785a-698b2e-00be97-bdba37-c7edc0 */
:root {
  --alligator-gladiator: #4f4300;
  --greasy-greens: #00785a;
  --asparagus-sultan: #698b2e;
  --slime-girl: #00be97;
  --sinsemilla: #bdba37;
  --maroccan-tea: #c7edc0;
}

Tailwind CSS v4

/* Alligator Gladiator to Maroccan Tea — https://swatchly.xyz/palette/4f4300-00785a-698b2e-00be97-bdba37-c7edc0 */
@theme {
  --color-alligator-gladiator: #4f4300;
  --color-alligator-gladiator-50: #fdf6d5;
  --color-alligator-gladiator-100: #f4ecc7;
  --color-alligator-gladiator-200: #e2d8ac;
  --color-alligator-gladiator-300: #cdc290;
  --color-alligator-gladiator-400: #afa36b;
  --color-alligator-gladiator-500: #94874d;
  --color-alligator-gladiator-600: #796d34;
  --color-alligator-gladiator-700: #615621;
  --color-alligator-gladiator-800: #4f4300;
  --color-alligator-gladiator-900: #3c3409;
  --color-alligator-gladiator-950: #262003;
  --color-greasy-greens: #00785a;
  --color-greasy-greens-50: #dbfff0;
  --color-greasy-greens-100: #c1f9e2;
  --color-greasy-greens-200: #a3e6cb;
  --color-greasy-greens-300: #82d0b2;
  --color-greasy-greens-400: #57b191;
  --color-greasy-greens-500: #329475;
  --color-greasy-greens-600: #00785a;
  --color-greasy-greens-700: #005f47;
  --color-greasy-greens-800: #004b37;
  --color-greasy-greens-900: #003a2a;
  --color-greasy-greens-950: #002519;
  --color-asparagus-sultan: #698b2e;
  --color-asparagus-sultan-50: #e7fdca;
  --color-asparagus-sultan-100: #d9f3b9;
  --color-asparagus-sultan-200: #c1df9a;
  --color-asparagus-sultan-300: #a7c879;
  --color-asparagus-sultan-400: #85a84f;
  --color-asparagus-sultan-500: #698b2e;
  --color-asparagus-sultan-600: #527111;
  --color-asparagus-sultan-700: #3f5a00;
  --color-asparagus-sultan-800: #314700;
  --color-asparagus-sultan-900: #253700;
  --color-asparagus-sultan-950: #162300;
  --color-slime-girl: #00be97;
  --color-slime-girl-50: #dbfff2;
  --color-slime-girl-100: #b1ffe4;
  --color-slime-girl-200: #8eefcf;
  --color-slime-girl-300: #65dbb8;
  --color-slime-girl-400: #00be97;
  --color-slime-girl-500: #009e7d;
  --color-slime-girl-600: #007f64;
  --color-slime-girl-700: #00654f;
  --color-slime-girl-800: #004f3d;
  --color-slime-girl-900: #003d2f;
  --color-slime-girl-950: #00261c;
  --color-sinsemilla: #bdba37;
  --color-sinsemilla-50: #f3f3ae;
  --color-sinsemilla-100: #e8e899;
  --color-sinsemilla-200: #d3d274;
  --color-sinsemilla-300: #bdba37;
  --color-sinsemilla-400: #a09c07;
  --color-sinsemilla-500: #868300;
  --color-sinsemilla-600: #6c6a00;
  --color-sinsemilla-700: #575500;
  --color-sinsemilla-800: #454300;
  --color-sinsemilla-900: #363500;
  --color-sinsemilla-950: #222100;
  --color-maroccan-tea: #c7edc0;
  --color-maroccan-tea-50: #f4fff2;
  --color-maroccan-tea-100: #e4fae0;
  --color-maroccan-tea-200: #c7edc0;
  --color-maroccan-tea-300: #b4d2ae;
  --color-maroccan-tea-400: #90b28a;
  --color-maroccan-tea-500: #72956c;
  --color-maroccan-tea-600: #577951;
  --color-maroccan-tea-700: #41603c;
  --color-maroccan-tea-800: #304a2b;
  --color-maroccan-tea-900: #233a1f;
  --color-maroccan-tea-950: #142411;
}