Swamp Thing to Caribbean Blue Color Palette

About this palette

Swamp Thing to Caribbean Blue is a 5-color cool palette: #002925 (Swamp Thing), #00867C (Go Go Green), #97DC95 (Leek), #005229 (O Tannenbaum), #00C2CE (Caribbean Blue). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #002925 on #97DC95 with a contrast ratio of 9.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 41, 37)	hsl(174, 100%, 8%)
Go Go Green	rgb(0, 134, 124)	hsl(176, 100%, 26%)
Leek	rgb(151, 220, 149)	hsl(118, 50%, 72%)
O Tannenbaum	rgb(0, 82, 41)	hsl(150, 100%, 16%)
Caribbean Blue	rgb(0, 194, 206)	hsl(183, 100%, 40%)

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.

Aa9.66:1 Very good#002925 on #97DC95
Aa9.66:1 Very good#97DC95 on #002925
Aa7.15:1 Very good#002925 on #00C2CE
Aa7.15:1 Very good#00C2CE on #002925
Aa5.80:1 Good#97DC95 on #005229
Aa5.80:1 Good#005229 on #97DC95
Aa4.29:1 Poor#005229 on #00C2CE
Aa4.29:1 Poor#00C2CE on #005229

Color blindness preview

CSS variables

/* Swamp Thing to Caribbean Blue — https://swatchly.xyz/palette/002925-00867c-97dc95-005229-00c2ce */
:root {
  --swamp-thing: #002925;
  --go-go-green: #00867c;
  --leek: #97dc95;
  --o-tannenbaum: #005229;
  --caribbean-blue: #00c2ce;
}

Tailwind CSS v4

/* Swamp Thing to Caribbean Blue — https://swatchly.xyz/palette/002925-00867c-97dc95-005229-00c2ce */
@theme {
  --color-swamp-thing: #002925;
  --color-swamp-thing-50: #e4fbf7;
  --color-swamp-thing-100: #d8f2ed;
  --color-swamp-thing-200: #c0dfda;
  --color-swamp-thing-300: #a6c9c4;
  --color-swamp-thing-400: #84aba5;
  --color-swamp-thing-500: #68908a;
  --color-swamp-thing-600: #4f7670;
  --color-swamp-thing-700: #3c5f5a;
  --color-swamp-thing-800: #2c4b47;
  --color-swamp-thing-900: #203b38;
  --color-swamp-thing-950: #002925;
  --color-go-go-green: #00867c;
  --color-go-go-green-50: #d7fff9;
  --color-go-go-green-100: #c0faf2;
  --color-go-go-green-200: #a4eae1;
  --color-go-go-green-300: #85d7cd;
  --color-go-go-green-400: #5abaaf;
  --color-go-go-green-500: #34a096;
  --color-go-go-green-600: #00867c;
  --color-go-go-green-700: #006a62;
  --color-go-go-green-800: #00534d;
  --color-go-go-green-900: #00403b;
  --color-go-go-green-950: #002824;
  --color-leek: #97dc95;
  --color-leek-50: #ecffeb;
  --color-leek-100: #d4fdd2;
  --color-leek-200: #bcecba;
  --color-leek-300: #97dc95;
  --color-leek-400: #7ab978;
  --color-leek-500: #5a9d5a;
  --color-leek-600: #3f803f;
  --color-leek-700: #2a672b;
  --color-leek-800: #1a501b;
  --color-leek-900: #0f3e11;
  --color-leek-950: #052707;
  --color-o-tannenbaum: #005229;
  --color-o-tannenbaum-50: #deffe7;
  --color-o-tannenbaum-100: #cdf8d8;
  --color-o-tannenbaum-200: #b3e6c1;
  --color-o-tannenbaum-300: #97d1a8;
  --color-o-tannenbaum-400: #72b386;
  --color-o-tannenbaum-500: #54986b;
  --color-o-tannenbaum-600: #3a7d52;
  --color-o-tannenbaum-700: #26653d;
  --color-o-tannenbaum-800: #005229;
  --color-o-tannenbaum-900: #0c3e21;
  --color-o-tannenbaum-950: #042712;
  --color-caribbean-blue: #00c2ce;
  --color-caribbean-blue-50: #e9fdff;
  --color-caribbean-blue-100: #cbfbff;
  --color-caribbean-blue-200: #94f0f8;
  --color-caribbean-blue-300: #6ddde7;
  --color-caribbean-blue-400: #00c2ce;
  --color-caribbean-blue-500: #00a1ab;
  --color-caribbean-blue-600: #00828a;
  --color-caribbean-blue-700: #00666d;
  --color-caribbean-blue-800: #004f55;
  --color-caribbean-blue-900: #003c41;
  --color-caribbean-blue-950: #002528;
}