Tropical Forest to Emperor Jade Color Palette

About this palette

Tropical Forest to Emperor Jade is a 4-color cool, monochromatic palette: #00503B (Tropical Forest), #00BA93 (Slime Girl), #83F1C9 (Jittery Jade), #007B68 (Emperor Jade). It mixes turquoise tones and feels cool overall. The strongest text pairing is #00503B on #83F1C9 with a contrast ratio of 6.96:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tropical Forest	rgb(0, 80, 59)	hsl(164, 100%, 16%)
Slime Girl	rgb(0, 186, 147)	hsl(167, 100%, 36%)
Jittery Jade	rgb(131, 241, 201)	hsl(158, 80%, 73%)
Emperor Jade	rgb(0, 123, 104)	hsl(171, 100%, 24%)

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.96:1 Good#00503B on #83F1C9
Aa6.96:1 Good#83F1C9 on #00503B
Aa3.82:1 Poor#00503B on #00BA93
Aa3.82:1 Poor#00BA93 on #00503B
Aa3.82:1 Poor#83F1C9 on #007B68
Aa3.82:1 Poor#007B68 on #83F1C9

Color blindness preview

CSS variables

/* Tropical Forest to Emperor Jade — https://swatchly.xyz/palette/00503b-00ba93-83f1c9-007b68 */
:root {
  --tropical-forest: #00503b;
  --slime-girl: #00ba93;
  --jittery-jade: #83f1c9;
  --emperor-jade: #007b68;
}

Tailwind CSS v4

/* Tropical Forest to Emperor Jade — https://swatchly.xyz/palette/00503b-00ba93-83f1c9-007b68 */
@theme {
  --color-tropical-forest: #00503b;
  --color-tropical-forest-50: #dbfff0;
  --color-tropical-forest-100: #cdf6e5;
  --color-tropical-forest-200: #b4e4d0;
  --color-tropical-forest-300: #97cfb9;
  --color-tropical-forest-400: #72b199;
  --color-tropical-forest-500: #54967e;
  --color-tropical-forest-600: #3a7b64;
  --color-tropical-forest-700: #26634e;
  --color-tropical-forest-800: #00503b;
  --color-tropical-forest-900: #0c3d2e;
  --color-tropical-forest-950: #04261c;
  --color-slime-girl: #00ba93;
  --color-slime-girl-50: #d6fff0;
  --color-slime-girl-100: #aefde2;
  --color-slime-girl-200: #8beccc;
  --color-slime-girl-300: #62d8b4;
  --color-slime-girl-400: #00ba93;
  --color-slime-girl-500: #009b7a;
  --color-slime-girl-600: #007d62;
  --color-slime-girl-700: #00634d;
  --color-slime-girl-800: #004e3c;
  --color-slime-girl-900: #003d2e;
  --color-slime-girl-950: #00261c;
  --color-jittery-jade: #83f1c9;
  --color-jittery-jade-50: #dcfff0;
  --color-jittery-jade-100: #bdfce2;
  --color-jittery-jade-200: #83f1c9;
  --color-jittery-jade-300: #7cd6b5;
  --color-jittery-jade-400: #4eb894;
  --color-jittery-jade-500: #229c79;
  --color-jittery-jade-600: #007f60;
  --color-jittery-jade-700: #00654b;
  --color-jittery-jade-800: #004f3a;
  --color-jittery-jade-900: #003d2c;
  --color-jittery-jade-950: #00261b;
  --color-emperor-jade: #007b68;
  --color-emperor-jade-50: #d9fff4;
  --color-emperor-jade-100: #c1f9ea;
  --color-emperor-jade-200: #a3e7d5;
  --color-emperor-jade-300: #82d2be;
  --color-emperor-jade-400: #57b39e;
  --color-emperor-jade-500: #339783;
  --color-emperor-jade-600: #007b68;
  --color-emperor-jade-700: #006252;
  --color-emperor-jade-800: #004d40;
  --color-emperor-jade-900: #003b31;
  --color-emperor-jade-950: #00251e;
}