Glaucous Green to Tropical Forest color palette

B4E3BFGlaucous Green C86097Llilacquered 007B40Gale of the Wind EF78A6Embarrassed 004849Tropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Glaucous Green to Tropical Forest is a 5-color cool palette: #B4E3BF (Glaucous Green), #C86097 (Llilacquered), #007B40 (Gale of the Wind), #EF78A6 (Embarrassed), #004849 (Tropical Forest). It mixes green, pink, turquoise tones and feels cool overall. The strongest text pairing is #B4E3BF on #004849 with a contrast ratio of 7.26:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glaucous Green	rgb(180, 227, 191)	hsl(134, 46%, 80%)
Llilacquered	rgb(200, 96, 151)	hsl(328, 49%, 58%)
Gale of the Wind	rgb(0, 123, 64)	hsl(151, 100%, 24%)
Embarrassed	rgb(239, 120, 166)	hsl(337, 79%, 70%)
Tropical Forest	rgb(0, 72, 73)	hsl(181, 100%, 14%)

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.

Aa7.26:1 Very good#B4E3BF on #004849
Aa7.26:1 Very good#004849 on #B4E3BF
Aa3.91:1 Poor#EF78A6 on #004849
Aa3.91:1 Poor#004849 on #EF78A6
Aa3.76:1 Poor#B4E3BF on #007B40
Aa3.76:1 Poor#007B40 on #B4E3BF

Color blindness preview

CSS variables

/* Glaucous Green to Tropical Forest — https://swatchly.xyz/palette/b4e3bf-c86097-007b40-ef78a6-004849 */
:root {
  --glaucous-green: #b4e3bf;
  --llilacquered: #c86097;
  --gale-of-the-wind: #007b40;
  --embarrassed: #ef78a6;
  --tropical-forest: #004849;
}

Tailwind CSS v4

/* Glaucous Green to Tropical Forest — https://swatchly.xyz/palette/b4e3bf-c86097-007b40-ef78a6-004849 */
@theme {
  --color-glaucous-green: #b4e3bf;
  --color-glaucous-green-50: #e1fce7;
  --color-glaucous-green-100: #d5f2db;
  --color-glaucous-green-200: #b4e3bf;
  --color-glaucous-green-300: #a3cbac;
  --color-glaucous-green-400: #81ad8c;
  --color-glaucous-green-500: #659170;
  --color-glaucous-green-600: #4c7757;
  --color-glaucous-green-700: #385f43;
  --color-glaucous-green-800: #294b33;
  --color-glaucous-green-900: #1d3a26;
  --color-glaucous-green-950: #0f2516;
  --color-llilacquered: #c86097;
  --color-llilacquered-50: #fff1f7;
  --color-llilacquered-100: #ffe4f0;
  --color-llilacquered-200: #ffc6e1;
  --color-llilacquered-300: #ffa1d0;
  --color-llilacquered-400: #e47eb2;
  --color-llilacquered-500: #c86097;
  --color-llilacquered-600: #a9457b;
  --color-llilacquered-700: #8b3063;
  --color-llilacquered-800: #70204e;
  --color-llilacquered-900: #59143c;
  --color-llilacquered-950: #3a0826;
  --color-gale-of-the-wind: #007b40;
  --color-gale-of-the-wind-50: #deffe7;
  --color-gale-of-the-wind-100: #c1fbd1;
  --color-gale-of-the-wind-200: #a2e9b7;
  --color-gale-of-the-wind-300: #82d39b;
  --color-gale-of-the-wind-400: #57b477;
  --color-gale-of-the-wind-500: #32975b;
  --color-gale-of-the-wind-600: #007b40;
  --color-gale-of-the-wind-700: #006232;
  --color-gale-of-the-wind-800: #004d26;
  --color-gale-of-the-wind-900: #003c1c;
  --color-gale-of-the-wind-950: #00260f;
  --color-embarrassed: #ef78a6;
  --color-embarrassed-50: #fff3f6;
  --color-embarrassed-100: #ffe5ed;
  --color-embarrassed-200: #ffc9da;
  --color-embarrassed-300: #ffa5c5;
  --color-embarrassed-400: #ef78a6;
  --color-embarrassed-500: #cf5c8a;
  --color-embarrassed-600: #af406f;
  --color-embarrassed-700: #912a58;
  --color-embarrassed-800: #751a44;
  --color-embarrassed-900: #5d0f34;
  --color-embarrassed-950: #3d0520;
  --color-tropical-forest: #004849;
  --color-tropical-forest-50: #dcfdfd;
  --color-tropical-forest-100: #cff4f4;
  --color-tropical-forest-200: #b5e1e1;
  --color-tropical-forest-300: #98cbcb;
  --color-tropical-forest-400: #73acac;
  --color-tropical-forest-500: #549090;
  --color-tropical-forest-600: #3a7474;
  --color-tropical-forest-700: #265b5c;
  --color-tropical-forest-800: #004849;
  --color-tropical-forest-900: #0d3637;
  --color-tropical-forest-950: #052222;
}