Exhilarating Green to Blister Pearl color palette

About this palette

Exhilarating Green to Blister Pearl is a 5-color cool palette: #8FC784 (Exhilarating Green), #08350A (Haunted Hills), #00A791 (Hobgoblin), #006772 (Wakame Green), #B0FCE3 (Blister Pearl). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #08350A on #B0FCE3 with a contrast ratio of 11.73:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Exhilarating Greenrgb(143, 199, 132)hsl(110, 37%, 65%)
Haunted Hillsrgb(8, 53, 10)hsl(123, 74%, 12%)
Hobgoblinrgb(0, 167, 145)hsl(172, 100%, 33%)
Wakame Greenrgb(0, 103, 114)hsl(186, 100%, 22%)
Blister Pearlrgb(176, 252, 227)hsl(160, 93%, 84%)

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#08350A on #B0FCE3
  • Aa11.73:1 Very good#B0FCE3 on #08350A
  • Aa7.00:1 Very good#8FC784 on #08350A
  • Aa7.00:1 Very good#08350A on #8FC784
  • Aa5.62:1 Good#006772 on #B0FCE3
  • Aa5.62:1 Good#B0FCE3 on #006772
  • Aa4.55:1 Good#08350A on #00A791
  • Aa4.55:1 Good#00A791 on #08350A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Exhilarating Green to Blister Pearl — https://swatchly.xyz/palette/8fc784-08350a-00a791-006772-b0fce3 */
:root {
  --exhilarating-green: #8fc784;
  --haunted-hills: #08350a;
  --hobgoblin: #00a791;
  --wakame-green: #006772;
  --blister-pearl: #b0fce3;
}

Tailwind CSS v4

/* Exhilarating Green to Blister Pearl — https://swatchly.xyz/palette/8fc784-08350a-00a791-006772-b0fce3 */
@theme {
  --color-exhilarating-green: #8fc784;
  --color-exhilarating-green-50: #d9fbd2;
  --color-exhilarating-green-100: #caf0c2;
  --color-exhilarating-green-200: #b0dca7;
  --color-exhilarating-green-300: #8fc784;
  --color-exhilarating-green-400: #73a969;
  --color-exhilarating-green-500: #598f4f;
  --color-exhilarating-green-600: #427538;
  --color-exhilarating-green-700: #305f27;
  --color-exhilarating-green-800: #234c1a;
  --color-exhilarating-green-900: #193c11;
  --color-exhilarating-green-950: #0c2607;
  --color-haunted-hills: #08350a;
  --color-haunted-hills-50: #e3fee2;
  --color-haunted-hills-100: #d7f5d5;
  --color-haunted-hills-200: #c0e3be;
  --color-haunted-hills-300: #a6cea3;
  --color-haunted-hills-400: #81ad7f;
  --color-haunted-hills-500: #649062;
  --color-haunted-hills-600: #497448;
  --color-haunted-hills-700: #345a33;
  --color-haunted-hills-800: #244523;
  --color-haunted-hills-900: #08350a;
  --color-haunted-hills-950: #0c1e0c;
  --color-hobgoblin: #00a791;
  --color-hobgoblin-50: #e0fff7;
  --color-hobgoblin-100: #bbffef;
  --color-hobgoblin-200: #9df0de;
  --color-hobgoblin-300: #7addc9;
  --color-hobgoblin-400: #48c1ab;
  --color-hobgoblin-500: #00a791;
  --color-hobgoblin-600: #008774;
  --color-hobgoblin-700: #006b5c;
  --color-hobgoblin-800: #005347;
  --color-hobgoblin-900: #003f36;
  --color-hobgoblin-950: #002721;
  --color-wakame-green: #006772;
  --color-wakame-green-50: #e0fbff;
  --color-wakame-green-100: #c5f5fc;
  --color-wakame-green-200: #abe4ed;
  --color-wakame-green-300: #8ed0da;
  --color-wakame-green-400: #67b2bd;
  --color-wakame-green-500: #4798a3;
  --color-wakame-green-600: #2a7d89;
  --color-wakame-green-700: #006772;
  --color-wakame-green-800: #00515a;
  --color-wakame-green-900: #003e45;
  --color-wakame-green-950: #00272c;
  --color-blister-pearl: #b0fce3;
  --color-blister-pearl-50: #d6fef0;
  --color-blister-pearl-100: #b0fce3;
  --color-blister-pearl-200: #ade4d1;
  --color-blister-pearl-300: #90cfba;
  --color-blister-pearl-400: #6ab19b;
  --color-blister-pearl-500: #4c9680;
  --color-blister-pearl-600: #307b66;
  --color-blister-pearl-700: #1b6350;
  --color-blister-pearl-800: #0a4e3e;
  --color-blister-pearl-900: #023d2f;
  --color-blister-pearl-950: #00261d;
}

Similar palettes