Blister Pearl to Philodendron Color Palette

About this palette

Blister Pearl to Philodendron is a 4-color cool, monochromatic palette: #B3FDE7 (Blister Pearl), #00AC8D (Hobgoblin), #062720 (Swamp Thing), #006656 (Philodendron). It mixes turquoise tones and feels cool overall. The strongest text pairing is #B3FDE7 on #062720 with a contrast ratio of 13.74:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blister Pearl	rgb(179, 253, 231)	hsl(162, 95%, 85%)
Hobgoblin	rgb(0, 172, 141)	hsl(169, 100%, 34%)
Swamp Thing	rgb(6, 39, 32)	hsl(167, 73%, 9%)
Philodendron	rgb(0, 102, 86)	hsl(171, 100%, 20%)

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.

Aa13.74:1 Super#B3FDE7 on #062720
Aa13.74:1 Super#062720 on #B3FDE7
Aa5.97:1 Good#B3FDE7 on #006656
Aa5.97:1 Good#006656 on #B3FDE7
Aa5.52:1 Good#00AC8D on #062720
Aa5.52:1 Good#062720 on #00AC8D

Color blindness preview

CSS variables

/* Blister Pearl to Philodendron — https://swatchly.xyz/palette/b3fde7-00ac8d-062720-006656 */
:root {
  --blister-pearl: #b3fde7;
  --hobgoblin: #00ac8d;
  --swamp-thing: #062720;
  --philodendron: #006656;
}

Tailwind CSS v4

/* Blister Pearl to Philodendron — https://swatchly.xyz/palette/b3fde7-00ac8d-062720-006656 */
@theme {
  --color-blister-pearl: #b3fde7;
  --color-blister-pearl-50: #d9fff3;
  --color-blister-pearl-100: #b3fde7;
  --color-blister-pearl-200: #b0e5d4;
  --color-blister-pearl-300: #93d0bd;
  --color-blister-pearl-400: #6db19e;
  --color-blister-pearl-500: #4e9682;
  --color-blister-pearl-600: #327a68;
  --color-blister-pearl-700: #1d6252;
  --color-blister-pearl-800: #0e4e40;
  --color-blister-pearl-900: #043c31;
  --color-blister-pearl-950: #00261e;
  --color-hobgoblin: #00ac8d;
  --color-hobgoblin-50: #e3fff6;
  --color-hobgoblin-100: #c4ffec;
  --color-hobgoblin-200: #9ff2da;
  --color-hobgoblin-300: #7de0c5;
  --color-hobgoblin-400: #4ac5a7;
  --color-hobgoblin-500: #00ac8d;
  --color-hobgoblin-600: #008b71;
  --color-hobgoblin-700: #006e59;
  --color-hobgoblin-800: #005545;
  --color-hobgoblin-900: #004134;
  --color-hobgoblin-950: #00281f;
  --color-swamp-thing: #062720;
  --color-swamp-thing-50: #e7faf4;
  --color-swamp-thing-100: #dbf1ea;
  --color-swamp-thing-200: #c4ded7;
  --color-swamp-thing-300: #abc9c0;
  --color-swamp-thing-400: #89aaa0;
  --color-swamp-thing-500: #6d8f85;
  --color-swamp-thing-600: #54746b;
  --color-swamp-thing-700: #405d55;
  --color-swamp-thing-800: #304a43;
  --color-swamp-thing-900: #233934;
  --color-swamp-thing-950: #062720;
  --color-philodendron: #006656;
  --color-philodendron-50: #d9fff4;
  --color-philodendron-100: #c7f7ea;
  --color-philodendron-200: #ace6d7;
  --color-philodendron-300: #8ed1c1;
  --color-philodendron-400: #67b3a1;
  --color-philodendron-500: #479886;
  --color-philodendron-600: #2a7d6c;
  --color-philodendron-700: #006656;
  --color-philodendron-800: #005043;
  --color-philodendron-900: #003e33;
  --color-philodendron-950: #002720;
}