Go Go Green to Twilight Zone color palette

008881Go Go Green ACE7C1Glaucous Green 8EAC6AGreen Tea Mochi 2B450CTreetop Cathedral 111C14Twilight Zone

Open in generator Export PNG, PDF, ASE…

About this palette

Go Go Green to Twilight Zone is a 5-color cool, earthy palette: #008881 (Go Go Green), #ACE7C1 (Glaucous Green), #8EAC6A (Green Tea Mochi), #2B450C (Treetop Cathedral), #111C14 (Twilight Zone). It mixes turquoise, green, black tones and feels cool overall. The strongest text pairing is #ACE7C1 on #111C14 with a contrast ratio of 12.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Go Go Green	rgb(0, 136, 129)	hsl(177, 100%, 27%)
Glaucous Green	rgb(172, 231, 193)	hsl(141, 55%, 79%)
Green Tea Mochi	rgb(142, 172, 106)	hsl(87, 28%, 55%)
Treetop Cathedral	rgb(43, 69, 12)	hsl(87, 70%, 16%)
Twilight Zone	rgb(17, 28, 20)	hsl(136, 24%, 9%)

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.

Aa12.46:1 Super#ACE7C1 on #111C14
Aa12.46:1 Super#111C14 on #ACE7C1
Aa7.63:1 Very good#ACE7C1 on #2B450C
Aa7.63:1 Very good#2B450C on #ACE7C1
Aa6.88:1 Good#8EAC6A on #111C14
Aa6.88:1 Good#111C14 on #8EAC6A
Aa4.22:1 Poor#8EAC6A on #2B450C
Aa4.22:1 Poor#2B450C on #8EAC6A

Color blindness preview

CSS variables

/* Go Go Green to Twilight Zone — https://swatchly.xyz/palette/008881-ace7c1-8eac6a-2b450c-111c14 */
:root {
  --go-go-green: #008881;
  --glaucous-green: #ace7c1;
  --green-tea-mochi: #8eac6a;
  --treetop-cathedral: #2b450c;
  --twilight-zone: #111c14;
}

Tailwind CSS v4

/* Go Go Green to Twilight Zone — https://swatchly.xyz/palette/008881-ace7c1-8eac6a-2b450c-111c14 */
@theme {
  --color-go-go-green: #008881;
  --color-go-go-green-50: #d6fffb;
  --color-go-go-green-100: #c0fbf5;
  --color-go-go-green-200: #a5ebe4;
  --color-go-go-green-300: #86d8d1;
  --color-go-go-green-400: #5bbcb4;
  --color-go-go-green-500: #35a29a;
  --color-go-go-green-600: #008881;
  --color-go-go-green-700: #006c66;
  --color-go-go-green-800: #005450;
  --color-go-go-green-900: #00413d;
  --color-go-go-green-950: #002926;
  --color-glaucous-green: #ace7c1;
  --color-glaucous-green-50: #defee8;
  --color-glaucous-green-100: #d1f5dd;
  --color-glaucous-green-200: #ace7c1;
  --color-glaucous-green-300: #9dceae;
  --color-glaucous-green-400: #79b08d;
  --color-glaucous-green-500: #5c9472;
  --color-glaucous-green-600: #437958;
  --color-glaucous-green-700: #2f6144;
  --color-glaucous-green-800: #204d33;
  --color-glaucous-green-900: #153c26;
  --color-glaucous-green-950: #092616;
  --color-green-tea-mochi: #8eac6a;
  --color-green-tea-mochi-50: #eafcd6;
  --color-green-tea-mochi-100: #def3c8;
  --color-green-tea-mochi-200: #c8e0ae;
  --color-green-tea-mochi-300: #b0cb91;
  --color-green-tea-mochi-400: #8eac6a;
  --color-green-tea-mochi-500: #739050;
  --color-green-tea-mochi-600: #5a7537;
  --color-green-tea-mochi-700: #465e24;
  --color-green-tea-mochi-800: #354a16;
  --color-green-tea-mochi-900: #27390c;
  --color-green-tea-mochi-950: #172404;
  --color-treetop-cathedral: #2b450c;
  --color-treetop-cathedral-50: #eafcdb;
  --color-treetop-cathedral-100: #def3ce;
  --color-treetop-cathedral-200: #c8e1b5;
  --color-treetop-cathedral-300: #afca98;
  --color-treetop-cathedral-400: #8caa73;
  --color-treetop-cathedral-500: #708e55;
  --color-treetop-cathedral-600: #56713c;
  --color-treetop-cathedral-700: #405928;
  --color-treetop-cathedral-800: #2b450c;
  --color-treetop-cathedral-900: #233411;
  --color-treetop-cathedral-950: #142007;
  --color-twilight-zone: #111c14;
  --color-twilight-zone-50: #eff8f1;
  --color-twilight-zone-100: #e5eee7;
  --color-twilight-zone-200: #d0dbd2;
  --color-twilight-zone-300: #b8c5bb;
  --color-twilight-zone-400: #98a69b;
  --color-twilight-zone-500: #7b897e;
  --color-twilight-zone-600: #606d63;
  --color-twilight-zone-700: #49554c;
  --color-twilight-zone-800: #374139;
  --color-twilight-zone-900: #273029;
  --color-twilight-zone-950: #111c14;
}