Mantis to Tropical Forest Color Palette

About this palette

Mantis to Tropical Forest is a 5-color cool, earthy palette: #7BC465 (Mantis), #1A2713 (Midnight Pines), #1A9556 (Militant Vegan), #A7E7C6 (Glaucous Green), #004A41 (Tropical Forest). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #1A2713 on #A7E7C6 with a contrast ratio of 11.08:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mantis	rgb(123, 196, 101)	hsl(106, 45%, 58%)
Midnight Pines	rgb(26, 39, 19)	hsl(99, 34%, 11%)
Militant Vegan	rgb(26, 149, 86)	hsl(149, 70%, 34%)
Glaucous Green	rgb(167, 231, 198)	hsl(149, 57%, 78%)
Tropical Forest	rgb(0, 74, 65)	hsl(173, 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.

Aa11.08:1 Very good#1A2713 on #A7E7C6
Aa11.08:1 Very good#A7E7C6 on #1A2713
Aa7.39:1 Very good#7BC465 on #1A2713
Aa7.39:1 Very good#1A2713 on #7BC465
Aa7.24:1 Very good#A7E7C6 on #004A41
Aa7.24:1 Very good#004A41 on #A7E7C6
Aa4.83:1 Good#7BC465 on #004A41
Aa4.83:1 Good#004A41 on #7BC465

Color blindness preview

CSS variables

/* Mantis to Tropical Forest — https://swatchly.xyz/palette/7bc465-1a2713-1a9556-a7e7c6-004a41 */
:root {
  --mantis: #7bc465;
  --midnight-pines: #1a2713;
  --militant-vegan: #1a9556;
  --glaucous-green: #a7e7c6;
  --tropical-forest: #004a41;
}

Tailwind CSS v4

/* Mantis to Tropical Forest — https://swatchly.xyz/palette/7bc465-1a2713-1a9556-a7e7c6-004a41 */
@theme {
  --color-mantis: #7bc465;
  --color-mantis-50: #f0ffeb;
  --color-mantis-100: #d8ffce;
  --color-mantis-200: #bef1af;
  --color-mantis-300: #a4df93;
  --color-mantis-400: #7bc465;
  --color-mantis-500: #5ea548;
  --color-mantis-600: #408728;
  --color-mantis-700: #2a6c0d;
  --color-mantis-800: #1b5400;
  --color-mantis-900: #124000;
  --color-mantis-950: #082700;
  --color-midnight-pines: #1a2713;
  --color-midnight-pines-50: #eff9ea;
  --color-midnight-pines-100: #e4efdf;
  --color-midnight-pines-200: #cfdcc9;
  --color-midnight-pines-300: #b8c6b0;
  --color-midnight-pines-400: #97a78f;
  --color-midnight-pines-500: #7d8d75;
  --color-midnight-pines-600: #63735c;
  --color-midnight-pines-700: #4e5c47;
  --color-midnight-pines-800: #3d4937;
  --color-midnight-pines-900: #2f3a2a;
  --color-midnight-pines-950: #1a2713;
  --color-militant-vegan: #1a9556;
  --color-militant-vegan-50: #d8ffe3;
  --color-militant-vegan-100: #b9facd;
  --color-militant-vegan-200: #99e8b3;
  --color-militant-vegan-300: #76d297;
  --color-militant-vegan-400: #47b273;
  --color-militant-vegan-500: #1a9556;
  --color-militant-vegan-600: #007942;
  --color-militant-vegan-700: #006034;
  --color-militant-vegan-800: #004c27;
  --color-militant-vegan-900: #003b1d;
  --color-militant-vegan-950: #002611;
  --color-glaucous-green: #a7e7c6;
  --color-glaucous-green-50: #dbfeeb;
  --color-glaucous-green-100: #cef5e0;
  --color-glaucous-green-200: #a7e7c6;
  --color-glaucous-green-300: #99ceb2;
  --color-glaucous-green-400: #74b092;
  --color-glaucous-green-500: #579577;
  --color-glaucous-green-600: #3d795d;
  --color-glaucous-green-700: #296248;
  --color-glaucous-green-800: #1b4d37;
  --color-glaucous-green-900: #103c29;
  --color-glaucous-green-950: #062618;
  --color-tropical-forest: #004a41;
  --color-tropical-forest-50: #dcfef6;
  --color-tropical-forest-100: #cff5ed;
  --color-tropical-forest-200: #b5e3d9;
  --color-tropical-forest-300: #98cdc2;
  --color-tropical-forest-400: #73aea2;
  --color-tropical-forest-500: #549187;
  --color-tropical-forest-600: #3a766b;
  --color-tropical-forest-700: #265d54;
  --color-tropical-forest-800: #004a41;
  --color-tropical-forest-900: #0d3831;
  --color-tropical-forest-950: #05231e;
}