Alligator Alley to Dark Olive Color Palette

About this palette

Alligator Alley to Dark Olive is a 5-color cool, earthy, gradient palette: #C7CA70 (Alligator Alley), #58C499 (Macau), #2E9F45 (Kryptonite Green), #376325 (Greenhouse), #394200 (Dark Olive). It mixes yellow, green tones and feels cool overall. The strongest text pairing is #C7CA70 on #394200 with a contrast ratio of 6.20:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Alligator Alley	rgb(199, 202, 112)	hsl(62, 46%, 62%)
Macau	rgb(88, 196, 153)	hsl(156, 48%, 56%)
Kryptonite Green	rgb(46, 159, 69)	hsl(132, 55%, 40%)
Greenhouse	rgb(55, 99, 37)	hsl(103, 46%, 27%)
Dark Olive	rgb(57, 66, 0)	hsl(68, 100%, 13%)

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.20:1 Good#C7CA70 on #394200
Aa6.20:1 Good#394200 on #C7CA70
Aa5.00:1 Good#58C499 on #394200
Aa5.00:1 Good#394200 on #58C499
Aa4.07:1 Poor#C7CA70 on #376325
Aa4.07:1 Poor#376325 on #C7CA70
Aa3.29:1 Poor#58C499 on #376325
Aa3.29:1 Poor#376325 on #58C499

Color blindness preview

CSS variables

/* Alligator Alley to Dark Olive — https://swatchly.xyz/palette/c7ca70-58c499-2e9f45-376325-394200 */
:root {
  --alligator-alley: #c7ca70;
  --macau: #58c499;
  --kryptonite-green: #2e9f45;
  --greenhouse: #376325;
  --dark-olive: #394200;
}

Tailwind CSS v4

/* Alligator Alley to Dark Olive — https://swatchly.xyz/palette/c7ca70-58c499-2e9f45-376325-394200 */
@theme {
  --color-alligator-alley: #c7ca70;
  --color-alligator-alley-50: #f8fbcc;
  --color-alligator-alley-100: #eff2bc;
  --color-alligator-alley-200: #dcdf9f;
  --color-alligator-alley-300: #c7ca70;
  --color-alligator-alley-400: #a7a955;
  --color-alligator-alley-500: #8c8d32;
  --color-alligator-alley-600: #71720f;
  --color-alligator-alley-700: #595a00;
  --color-alligator-alley-800: #454600;
  --color-alligator-alley-900: #353600;
  --color-alligator-alley-950: #212100;
  --color-macau: #58c499;
  --color-macau-50: #eafff4;
  --color-macau-100: #cbffe6;
  --color-macau-200: #abf1d1;
  --color-macau-300: #8cdfba;
  --color-macau-400: #58c499;
  --color-macau-500: #36a57c;
  --color-macau-600: #008761;
  --color-macau-700: #006b4c;
  --color-macau-800: #00533a;
  --color-macau-900: #003f2b;
  --color-macau-950: #002719;
  --color-kryptonite-green: #2e9f45;
  --color-kryptonite-green-50: #e0ffe2;
  --color-kryptonite-green-100: #bffec4;
  --color-kryptonite-green-200: #a1eda8;
  --color-kryptonite-green-300: #80d98a;
  --color-kryptonite-green-400: #54bb64;
  --color-kryptonite-green-500: #2e9f45;
  --color-kryptonite-green-600: #00832b;
  --color-kryptonite-green-700: #006821;
  --color-kryptonite-green-800: #005118;
  --color-kryptonite-green-900: #003f10;
  --color-kryptonite-green-950: #002807;
  --color-greenhouse: #376325;
  --color-greenhouse-50: #e3ffda;
  --color-greenhouse-100: #d7f6cc;
  --color-greenhouse-200: #c0e4b3;
  --color-greenhouse-300: #a6cf97;
  --color-greenhouse-400: #83b173;
  --color-greenhouse-500: #679556;
  --color-greenhouse-600: #4e7a3d;
  --color-greenhouse-700: #376325;
  --color-greenhouse-800: #2a4d1b;
  --color-greenhouse-900: #1e3c11;
  --color-greenhouse-950: #102607;
  --color-dark-olive: #394200;
  --color-dark-olive-50: #f2fad8;
  --color-dark-olive-100: #e8f1ca;
  --color-dark-olive-200: #d3deb0;
  --color-dark-olive-300: #bbc792;
  --color-dark-olive-400: #9aa66c;
  --color-dark-olive-500: #7e8a4f;
  --color-dark-olive-600: #636e35;
  --color-dark-olive-700: #4d5622;
  --color-dark-olive-800: #394200;
  --color-dark-olive-900: #2c320b;
  --color-dark-olive-950: #1a1f04;
}