Tropical Forest to Aquamarine color palette

004F3FTropical Forest 007F62Shadows of Time 0B9F6DPrairie 44C294Macau 5CE0B2Aquamarine

About this palette

Tropical Forest to Aquamarine is a 5-color cool, monochromatic, gradient palette: #004F3F (Tropical Forest), #007F62 (Shadows of Time), #0B9F6D (Prairie), #44C294 (Macau), #5CE0B2 (Aquamarine). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #004F3F on #5CE0B2 with a contrast ratio of 5.83:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 79, 63)	hsl(168, 100%, 15%)
Shadows of Time	rgb(0, 127, 98)	hsl(166, 100%, 25%)
Prairie	rgb(11, 159, 109)	hsl(160, 87%, 33%)
Macau	rgb(68, 194, 148)	hsl(158, 51%, 51%)
Aquamarine	rgb(92, 224, 178)	hsl(159, 68%, 62%)

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.

Aa5.83:1 Good#004F3F on #5CE0B2
Aa5.83:1 Good#5CE0B2 on #004F3F
Aa4.29:1 Poor#004F3F on #44C294
Aa4.29:1 Poor#44C294 on #004F3F
Aa3.03:1 Poor#007F62 on #5CE0B2
Aa3.03:1 Poor#5CE0B2 on #007F62

Color blindness preview

CSS variables

/* Tropical Forest to Aquamarine — https://swatchly.xyz/palette/004f3f-007f62-0b9f6d-44c294-5ce0b2 */
:root {
  --tropical-forest: #004f3f;
  --shadows-of-time: #007f62;
  --prairie: #0b9f6d;
  --macau: #44c294;
  --aquamarine: #5ce0b2;
}

Tailwind CSS v4

/* Tropical Forest to Aquamarine — https://swatchly.xyz/palette/004f3f-007f62-0b9f6d-44c294-5ce0b2 */
@theme {
  --color-tropical-forest: #004f3f;
  --color-tropical-forest-50: #dbfff3;
  --color-tropical-forest-100: #cdf6e8;
  --color-tropical-forest-200: #b4e4d4;
  --color-tropical-forest-300: #97cfbd;
  --color-tropical-forest-400: #72b09e;
  --color-tropical-forest-500: #549582;
  --color-tropical-forest-600: #3a7a68;
  --color-tropical-forest-700: #266252;
  --color-tropical-forest-800: #004f3f;
  --color-tropical-forest-900: #0c3c30;
  --color-tropical-forest-950: #04261e;
  --color-shadows-of-time: #007f62;
  --color-shadows-of-time-50: #dafff1;
  --color-shadows-of-time-100: #c1fae4;
  --color-shadows-of-time-200: #a3e9cf;
  --color-shadows-of-time-300: #83d4b8;
  --color-shadows-of-time-400: #58b697;
  --color-shadows-of-time-500: #339a7c;
  --color-shadows-of-time-600: #007f62;
  --color-shadows-of-time-700: #00654d;
  --color-shadows-of-time-800: #004f3c;
  --color-shadows-of-time-900: #003d2e;
  --color-shadows-of-time-950: #00261c;
  --color-prairie: #0b9f6d;
  --color-prairie-50: #dcffec;
  --color-prairie-100: #b9fdda;
  --color-prairie-200: #9aedc4;
  --color-prairie-300: #77d9aa;
  --color-prairie-400: #45bb89;
  --color-prairie-500: #0b9f6d;
  --color-prairie-600: #008057;
  --color-prairie-700: #006644;
  --color-prairie-800: #005034;
  --color-prairie-900: #003e28;
  --color-prairie-950: #002717;
  --color-macau: #44c294;
  --color-macau-50: #e5fff2;
  --color-macau-100: #c2ffe3;
  --color-macau-200: #a0f0cd;
  --color-macau-300: #7eddb6;
  --color-macau-400: #44c294;
  --color-macau-500: #17a478;
  --color-macau-600: #00855f;
  --color-macau-700: #00694b;
  --color-macau-800: #005239;
  --color-macau-900: #003e2b;
  --color-macau-950: #002719;
  --color-aquamarine: #5ce0b2;
  --color-aquamarine-50: #e2fff2;
  --color-aquamarine-100: #bbffe3;
  --color-aquamarine-200: #99f0cd;
  --color-aquamarine-300: #5ce0b2;
  --color-aquamarine-400: #3dbe93;
  --color-aquamarine-500: #00a078;
  --color-aquamarine-600: #008160;
  --color-aquamarine-700: #00664b;
  --color-aquamarine-800: #00503a;
  --color-aquamarine-900: #003d2c;
  --color-aquamarine-950: #00261a;
}