Swamp Thing to Turquoise Pearl color palette

002D26Swamp Thing 005344Cape Verde 007C6DEmperor Jade 00A892Hobgoblin 6ECDB7Jolly Jade 81F9D7Turquoise Pearl

Open in generator Export PNG, PDF, ASE…

About this palette

Swamp Thing to Turquoise Pearl is a 6-color cool, monochromatic, gradient palette: #002D26 (Swamp Thing), #005344 (Cape Verde), #007C6D (Emperor Jade), #00A892 (Hobgoblin), #6ECDB7 (Jolly Jade), #81F9D7 (Turquoise Pearl). It mixes turquoise tones and feels cool overall. The strongest text pairing is #002D26 on #81F9D7 with a contrast ratio of 11.73:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 45, 38)	hsl(171, 100%, 9%)
Cape Verde	rgb(0, 83, 68)	hsl(169, 100%, 16%)
Emperor Jade	rgb(0, 124, 109)	hsl(173, 100%, 24%)
Hobgoblin	rgb(0, 168, 146)	hsl(172, 100%, 33%)
Jolly Jade	rgb(110, 205, 183)	hsl(166, 49%, 62%)
Turquoise Pearl	rgb(129, 249, 215)	hsl(163, 91%, 74%)

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.73:1 Very good#002D26 on #81F9D7
Aa11.73:1 Very good#81F9D7 on #002D26
Aa7.89:1 Very good#002D26 on #6ECDB7
Aa7.89:1 Very good#6ECDB7 on #002D26
Aa7.09:1 Very good#005344 on #81F9D7
Aa7.09:1 Very good#81F9D7 on #005344
Aa5.00:1 Good#002D26 on #00A892
Aa5.00:1 Good#00A892 on #002D26

Color blindness preview

CSS variables

/* Swamp Thing to Turquoise Pearl — https://swatchly.xyz/palette/002d26-005344-007c6d-00a892-6ecdb7-81f9d7 */
:root {
  --swamp-thing: #002d26;
  --cape-verde: #005344;
  --emperor-jade: #007c6d;
  --hobgoblin: #00a892;
  --jolly-jade: #6ecdb7;
  --turquoise-pearl: #81f9d7;
}

Tailwind CSS v4

/* Swamp Thing to Turquoise Pearl — https://swatchly.xyz/palette/002d26-005344-007c6d-00a892-6ecdb7-81f9d7 */
@theme {
  --color-swamp-thing: #002d26;
  --color-swamp-thing-50: #e3fbf5;
  --color-swamp-thing-100: #d7f2eb;
  --color-swamp-thing-200: #bfe0d8;
  --color-swamp-thing-300: #a5cac1;
  --color-swamp-thing-400: #82aba2;
  --color-swamp-thing-500: #679188;
  --color-swamp-thing-600: #4f786f;
  --color-swamp-thing-700: #3b6159;
  --color-swamp-thing-800: #2c4f47;
  --color-swamp-thing-900: #213f39;
  --color-swamp-thing-950: #002d26;
  --color-cape-verde: #005344;
  --color-cape-verde-50: #dafff3;
  --color-cape-verde-100: #ccf6e9;
  --color-cape-verde-200: #b2e4d5;
  --color-cape-verde-300: #97d0bf;
  --color-cape-verde-400: #72b2a0;
  --color-cape-verde-500: #549786;
  --color-cape-verde-600: #3a7d6c;
  --color-cape-verde-700: #256556;
  --color-cape-verde-800: #005344;
  --color-cape-verde-900: #0b3f34;
  --color-cape-verde-950: #032820;
  --color-emperor-jade: #007c6d;
  --color-emperor-jade-50: #d8fff6;
  --color-emperor-jade-100: #c1f9ed;
  --color-emperor-jade-200: #a3e7d9;
  --color-emperor-jade-300: #83d2c3;
  --color-emperor-jade-400: #58b3a3;
  --color-emperor-jade-500: #339888;
  --color-emperor-jade-600: #007c6d;
  --color-emperor-jade-700: #006356;
  --color-emperor-jade-800: #004d43;
  --color-emperor-jade-900: #003c34;
  --color-emperor-jade-950: #002520;
  --color-hobgoblin: #00a892;
  --color-hobgoblin-50: #e0fff7;
  --color-hobgoblin-100: #bdfff0;
  --color-hobgoblin-200: #9df0de;
  --color-hobgoblin-300: #7bdec9;
  --color-hobgoblin-400: #48c2ac;
  --color-hobgoblin-500: #00a892;
  --color-hobgoblin-600: #008775;
  --color-hobgoblin-700: #006b5d;
  --color-hobgoblin-800: #005348;
  --color-hobgoblin-900: #004036;
  --color-hobgoblin-950: #002721;
  --color-jolly-jade: #6ecdb7;
  --color-jolly-jade-50: #cafef0;
  --color-jolly-jade-100: #b9f4e4;
  --color-jolly-jade-200: #9ae1cf;
  --color-jolly-jade-300: #6ecdb7;
  --color-jolly-jade-400: #51ae99;
  --color-jolly-jade-500: #2f9480;
  --color-jolly-jade-600: #077967;
  --color-jolly-jade-700: #006152;
  --color-jolly-jade-800: #004d40;
  --color-jolly-jade-900: #003c32;
  --color-jolly-jade-950: #00261f;
  --color-turquoise-pearl: #81f9d7;
  --color-turquoise-pearl-50: #edfff9;
  --color-turquoise-pearl-100: #caffed;
  --color-turquoise-pearl-200: #81f9d7;
  --color-turquoise-pearl-300: #7edcc1;
  --color-turquoise-pearl-400: #4abd9f;
  --color-turquoise-pearl-500: #0da082;
  --color-turquoise-pearl-600: #008168;
  --color-turquoise-pearl-700: #006651;
  --color-turquoise-pearl-800: #004f3e;
  --color-turquoise-pearl-900: #003d30;
  --color-turquoise-pearl-950: #00261d;
}