Emerald Bliss to Trapped Darkness color palette

50BAA7Emerald Bliss 004E49Tropical Forest FFE3E7Pink Pleasure 927E31Fernweh 131C2ETrapped Darkness

About this palette

Emerald Bliss to Trapped Darkness is a 5-color cool palette: #50BAA7 (Emerald Bliss), #004E49 (Tropical Forest), #FFE3E7 (Pink Pleasure), #927E31 (Fernweh), #131C2E (Trapped Darkness). It mixes turquoise, white, yellow, blue tones and feels cool overall. The strongest text pairing is #FFE3E7 on #131C2E with a contrast ratio of 14.10:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Emerald Bliss	rgb(80, 186, 167)	hsl(169, 43%, 52%)
Tropical Forest	rgb(0, 78, 73)	hsl(176, 100%, 15%)
Pink Pleasure	rgb(255, 227, 231)	hsl(351, 100%, 95%)
Fernweh	rgb(146, 126, 49)	hsl(48, 50%, 38%)
Trapped Darkness	rgb(19, 28, 46)	hsl(220, 42%, 13%)

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.

Aa14.10:1 Super#FFE3E7 on #131C2E
Aa14.10:1 Super#131C2E on #FFE3E7
Aa7.96:1 Very good#004E49 on #FFE3E7
Aa7.96:1 Very good#FFE3E7 on #004E49
Aa7.24:1 Very good#50BAA7 on #131C2E
Aa7.24:1 Very good#131C2E on #50BAA7
Aa4.26:1 Poor#927E31 on #131C2E
Aa4.26:1 Poor#131C2E on #927E31

Color blindness preview

CSS variables

/* Emerald Bliss to Trapped Darkness — https://swatchly.xyz/palette/50baa7-004e49-ffe3e7-927e31-131c2e */
:root {
  --emerald-bliss: #50baa7;
  --tropical-forest: #004e49;
  --pink-pleasure: #ffe3e7;
  --fernweh: #927e31;
  --trapped-darkness: #131c2e;
}

Tailwind CSS v4

/* Emerald Bliss to Trapped Darkness — https://swatchly.xyz/palette/50baa7-004e49-ffe3e7-927e31-131c2e */
@theme {
  --color-emerald-bliss: #50baa7;
  --color-emerald-bliss-50: #ddfff7;
  --color-emerald-bliss-100: #c1fbee;
  --color-emerald-bliss-200: #a4ebdb;
  --color-emerald-bliss-300: #83d7c6;
  --color-emerald-bliss-400: #50baa7;
  --color-emerald-bliss-500: #2d9d8b;
  --color-emerald-bliss-600: #008070;
  --color-emerald-bliss-700: #006658;
  --color-emerald-bliss-800: #004f44;
  --color-emerald-bliss-900: #003d34;
  --color-emerald-bliss-950: #002620;
  --color-tropical-forest: #004e49;
  --color-tropical-forest-50: #dbfef9;
  --color-tropical-forest-100: #cdf5f0;
  --color-tropical-forest-200: #b3e3dd;
  --color-tropical-forest-300: #97cdc7;
  --color-tropical-forest-400: #72afa9;
  --color-tropical-forest-500: #54948d;
  --color-tropical-forest-600: #3a7973;
  --color-tropical-forest-700: #26615c;
  --color-tropical-forest-800: #004e49;
  --color-tropical-forest-900: #0c3b38;
  --color-tropical-forest-950: #042523;
  --color-pink-pleasure: #ffe3e7;
  --color-pink-pleasure-50: #fff1f3;
  --color-pink-pleasure-100: #ffe3e7;
  --color-pink-pleasure-200: #e6d1d4;
  --color-pink-pleasure-300: #d1babd;
  --color-pink-pleasure-400: #b39a9e;
  --color-pink-pleasure-500: #987f82;
  --color-pink-pleasure-600: #7c6568;
  --color-pink-pleasure-700: #644f52;
  --color-pink-pleasure-800: #4f3d40;
  --color-pink-pleasure-900: #3e2e31;
  --color-pink-pleasure-950: #271c1e;
  --color-fernweh: #927e31;
  --color-fernweh-50: #fff4cc;
  --color-fernweh-100: #f6e9b9;
  --color-fernweh-200: #e3d49b;
  --color-fernweh-300: #cdbc7b;
  --color-fernweh-400: #ae9b52;
  --color-fernweh-500: #927e31;
  --color-fernweh-600: #786515;
  --color-fernweh-700: #615000;
  --color-fernweh-800: #4c3e00;
  --color-fernweh-900: #3b3000;
  --color-fernweh-950: #261e00;
  --color-trapped-darkness: #131c2e;
  --color-trapped-darkness-50: #f0f5ff;
  --color-trapped-darkness-100: #e3ecfb;
  --color-trapped-darkness-200: #ced8eb;
  --color-trapped-darkness-300: #b6c1d6;
  --color-trapped-darkness-400: #96a2b9;
  --color-trapped-darkness-500: #7a869d;
  --color-trapped-darkness-600: #606b81;
  --color-trapped-darkness-700: #4a5467;
  --color-trapped-darkness-800: #384051;
  --color-trapped-darkness-900: #29303e;
  --color-trapped-darkness-950: #131c2e;
}