A State of Mint to Tropical Forest color palette

94F9D4A State of Mint 00D6E0Fish Boy 7FB563Bud Green 009D9BBaltic 386400Overgrown Temple 004A3ETropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

A State of Mint to Tropical Forest is a 6-color cool, gradient palette: #94F9D4 (A State of Mint), #00D6E0 (Fish Boy), #7FB563 (Bud Green), #009D9B (Baltic), #386400 (Overgrown Temple), #004A3E (Tropical Forest). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #94F9D4 on #004A3E with a contrast ratio of 8.18:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
A State of Mint	rgb(148, 249, 212)	hsl(158, 89%, 78%)
Fish Boy	rgb(0, 214, 224)	hsl(183, 100%, 44%)
Bud Green	rgb(127, 181, 99)	hsl(100, 36%, 55%)
Baltic	rgb(0, 157, 155)	hsl(179, 100%, 31%)
Overgrown Temple	rgb(56, 100, 0)	hsl(86, 100%, 20%)
Tropical Forest	rgb(0, 74, 62)	hsl(170, 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.

Aa8.18:1 Very good#94F9D4 on #004A3E
Aa8.18:1 Very good#004A3E on #94F9D4
Aa5.71:1 Good#00D6E0 on #004A3E
Aa5.71:1 Good#004A3E on #00D6E0
Aa5.60:1 Good#94F9D4 on #386400
Aa5.60:1 Good#386400 on #94F9D4
Aa4.24:1 Poor#7FB563 on #004A3E
Aa4.24:1 Poor#004A3E on #7FB563

Color blindness preview

CSS variables

/* A State of Mint to Tropical Forest — https://swatchly.xyz/palette/94f9d4-00d6e0-7fb563-009d9b-386400-004a3e */
:root {
  --a-state-of-mint: #94f9d4;
  --fish-boy: #00d6e0;
  --bud-green: #7fb563;
  --baltic: #009d9b;
  --overgrown-temple: #386400;
  --tropical-forest: #004a3e;
}

Tailwind CSS v4

/* A State of Mint to Tropical Forest — https://swatchly.xyz/palette/94f9d4-00d6e0-7fb563-009d9b-386400-004a3e */
@theme {
  --color-a-state-of-mint: #94f9d4;
  --color-a-state-of-mint-50: #f3fffa;
  --color-a-state-of-mint-100: #d4ffed;
  --color-a-state-of-mint-200: #94f9d4;
  --color-a-state-of-mint-300: #8ddcbe;
  --color-a-state-of-mint-400: #5ebd9c;
  --color-a-state-of-mint-500: #36a07e;
  --color-a-state-of-mint-600: #058263;
  --color-a-state-of-mint-700: #00674d;
  --color-a-state-of-mint-800: #004f3b;
  --color-a-state-of-mint-900: #003d2d;
  --color-a-state-of-mint-950: #00261b;
  --color-fish-boy: #00d6e0;
  --color-fish-boy-50: #d2fdff;
  --color-fish-boy-100: #a3faff;
  --color-fish-boy-200: #78e8ef;
  --color-fish-boy-300: #00d6e0;
  --color-fish-boy-400: #00b4bc;
  --color-fish-boy-500: #00969d;
  --color-fish-boy-600: #00797f;
  --color-fish-boy-700: #006065;
  --color-fish-boy-800: #004c50;
  --color-fish-boy-900: #003b3e;
  --color-fish-boy-950: #002527;
  --color-bud-green: #7fb563;
  --color-bud-green-50: #e6ffda;
  --color-bud-green-100: #d6f9c5;
  --color-bud-green-200: #bee7aa;
  --color-bud-green-300: #a4d38d;
  --color-bud-green-400: #7fb563;
  --color-bud-green-500: #649847;
  --color-bud-green-600: #4a7c2d;
  --color-bud-green-700: #366418;
  --color-bud-green-800: #264f09;
  --color-bud-green-900: #1b3d01;
  --color-bud-green-950: #0e2600;
  --color-baltic: #009d9b;
  --color-baltic-50: #d7fffd;
  --color-baltic-100: #b9fbf8;
  --color-baltic-200: #99eae7;
  --color-baltic-300: #76d6d3;
  --color-baltic-400: #44b8b6;
  --color-baltic-500: #009d9b;
  --color-baltic-600: #007e7d;
  --color-baltic-700: #006463;
  --color-baltic-800: #004e4d;
  --color-baltic-900: #003c3b;
  --color-baltic-950: #002625;
  --color-overgrown-temple: #386400;
  --color-overgrown-temple-50: #e5ffd4;
  --color-overgrown-temple-100: #d7f7c1;
  --color-overgrown-temple-200: #c0e6a5;
  --color-overgrown-temple-300: #a6d187;
  --color-overgrown-temple-400: #84b260;
  --color-overgrown-temple-500: #689741;
  --color-overgrown-temple-600: #4f7b26;
  --color-overgrown-temple-700: #386400;
  --color-overgrown-temple-800: #2b4e00;
  --color-overgrown-temple-900: #203c00;
  --color-overgrown-temple-950: #122600;
  --color-tropical-forest: #004a3e;
  --color-tropical-forest-50: #dcfef5;
  --color-tropical-forest-100: #cff5eb;
  --color-tropical-forest-200: #b5e3d7;
  --color-tropical-forest-300: #98cdbf;
  --color-tropical-forest-400: #73ae9f;
  --color-tropical-forest-500: #559283;
  --color-tropical-forest-600: #3a7668;
  --color-tropical-forest-700: #265d51;
  --color-tropical-forest-800: #004a3e;
  --color-tropical-forest-900: #0d382f;
  --color-tropical-forest-950: #05231d;
}