Swamp Thing to Blister Pearl color palette

002D2BSwamp Thing 7649A2Royal Lavender BA6E00Indocile Tiger FFB86EDesert Dessert B4FDF2Blister Pearl

Open in generator Export PNG, PDF, ASE…

About this palette

Swamp Thing to Blister Pearl is a 5-color cool palette: #002D2B (Swamp Thing), #7649A2 (Royal Lavender), #BA6E00 (Indocile Tiger), #FFB86E (Desert Dessert), #B4FDF2 (Blister Pearl). It mixes turquoise, purple, orange tones and feels cool overall. The strongest text pairing is #002D2B on #B4FDF2 with a contrast ratio of 12.96:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Swamp Thing	rgb(0, 45, 43)	hsl(177, 100%, 9%)
Royal Lavender	rgb(118, 73, 162)	hsl(270, 38%, 46%)
Indocile Tiger	rgb(186, 110, 0)	hsl(35, 100%, 36%)
Desert Dessert	rgb(255, 184, 110)	hsl(31, 100%, 72%)
Blister Pearl	rgb(180, 253, 242)	hsl(171, 95%, 85%)

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.

Aa12.96:1 Super#002D2B on #B4FDF2
Aa12.96:1 Super#B4FDF2 on #002D2B
Aa8.75:1 Very good#002D2B on #FFB86E
Aa8.75:1 Very good#FFB86E on #002D2B
Aa5.63:1 Good#7649A2 on #B4FDF2
Aa5.63:1 Good#B4FDF2 on #7649A2
Aa3.80:1 Poor#7649A2 on #FFB86E
Aa3.80:1 Poor#FFB86E on #7649A2

Color blindness preview

CSS variables

/* Swamp Thing to Blister Pearl — https://swatchly.xyz/palette/002d2b-7649a2-ba6e00-ffb86e-b4fdf2 */
:root {
  --swamp-thing: #002d2b;
  --royal-lavender: #7649a2;
  --indocile-tiger: #ba6e00;
  --desert-dessert: #ffb86e;
  --blister-pearl: #b4fdf2;
}

Tailwind CSS v4

/* Swamp Thing to Blister Pearl — https://swatchly.xyz/palette/002d2b-7649a2-ba6e00-ffb86e-b4fdf2 */
@theme {
  --color-swamp-thing: #002d2b;
  --color-swamp-thing-50: #e3fbf9;
  --color-swamp-thing-100: #d7f2ef;
  --color-swamp-thing-200: #bfdfdc;
  --color-swamp-thing-300: #a5cac6;
  --color-swamp-thing-400: #82aba8;
  --color-swamp-thing-500: #67918e;
  --color-swamp-thing-600: #4f7774;
  --color-swamp-thing-700: #3b615f;
  --color-swamp-thing-800: #2c4e4c;
  --color-swamp-thing-900: #213f3d;
  --color-swamp-thing-950: #002d2b;
  --color-royal-lavender: #7649a2;
  --color-royal-lavender-50: #f8f2ff;
  --color-royal-lavender-100: #efe3ff;
  --color-royal-lavender-200: #e0c7ff;
  --color-royal-lavender-300: #cfa7fc;
  --color-royal-lavender-400: #af83df;
  --color-royal-lavender-500: #9265c1;
  --color-royal-lavender-600: #7649a2;
  --color-royal-lavender-700: #5f3784;
  --color-royal-lavender-800: #4b286c;
  --color-royal-lavender-900: #3b1d56;
  --color-royal-lavender-950: #251039;
  --color-indocile-tiger: #ba6e00;
  --color-indocile-tiger-50: #fff2e6;
  --color-indocile-tiger-100: #ffe5cd;
  --color-indocile-tiger-200: #ffca98;
  --color-indocile-tiger-300: #f4ae69;
  --color-indocile-tiger-400: #d78b39;
  --color-indocile-tiger-500: #ba6e00;
  --color-indocile-tiger-600: #975800;
  --color-indocile-tiger-700: #784500;
  --color-indocile-tiger-800: #5f3500;
  --color-indocile-tiger-900: #4a2900;
  --color-indocile-tiger-950: #301800;
  --color-desert-dessert: #ffb86e;
  --color-desert-dessert-50: #fff8f1;
  --color-desert-dessert-100: #ffeddc;
  --color-desert-dessert-200: #ffd5ad;
  --color-desert-dessert-300: #ffb86e;
  --color-desert-dessert-400: #d99853;
  --color-desert-dessert-500: #bc7a2d;
  --color-desert-dessert-600: #9e5e00;
  --color-desert-dessert-700: #7d4a00;
  --color-desert-dessert-800: #623800;
  --color-desert-dessert-900: #4b2a00;
  --color-desert-dessert-950: #301900;
  --color-blister-pearl: #b4fdf2;
  --color-blister-pearl-50: #dbfff9;
  --color-blister-pearl-100: #b4fdf2;
  --color-blister-pearl-200: #b1e5dc;
  --color-blister-pearl-300: #94cfc6;
  --color-blister-pearl-400: #6db1a7;
  --color-blister-pearl-500: #4e958c;
  --color-blister-pearl-600: #337a71;
  --color-blister-pearl-700: #1d615a;
  --color-blister-pearl-800: #0d4d46;
  --color-blister-pearl-900: #043c36;
  --color-blister-pearl-950: #002622;
}