Herbal to Cerulean Skies Color Palette

About this palette

Herbal to Cerulean Skies is a 5-color cool palette: #33A984 (Herbal), #43642F (Greenhouse), #00422E (Lost in the Woods), #E1FBD2 (Herbal Vapours), #87C5C0 (Cerulean Skies). It mixes turquoise, green tones and feels cool overall. The strongest text pairing is #00422E on #E1FBD2 with a contrast ratio of 10.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Herbal	rgb(51, 169, 132)	hsl(161, 54%, 43%)
Greenhouse	rgb(67, 100, 47)	hsl(97, 36%, 29%)
Lost in the Woods	rgb(0, 66, 46)	hsl(162, 100%, 13%)
Herbal Vapours	rgb(225, 251, 210)	hsl(98, 84%, 90%)
Cerulean Skies	rgb(135, 197, 192)	hsl(175, 35%, 65%)

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.

Aa10.41:1 Very good#00422E on #E1FBD2
Aa10.41:1 Very good#E1FBD2 on #00422E
Aa6.10:1 Good#43642F on #E1FBD2
Aa6.10:1 Good#E1FBD2 on #43642F
Aa5.93:1 Good#00422E on #87C5C0
Aa5.93:1 Good#87C5C0 on #00422E
Aa3.93:1 Poor#33A984 on #00422E
Aa3.93:1 Poor#00422E on #33A984

Color blindness preview

CSS variables

/* Herbal to Cerulean Skies — https://swatchly.xyz/palette/33a984-43642f-00422e-e1fbd2-87c5c0 */
:root {
  --herbal: #33a984;
  --greenhouse: #43642f;
  --lost-in-the-woods: #00422e;
  --herbal-vapours: #e1fbd2;
  --cerulean-skies: #87c5c0;
}

Tailwind CSS v4

/* Herbal to Cerulean Skies — https://swatchly.xyz/palette/33a984-43642f-00422e-e1fbd2-87c5c0 */
@theme {
  --color-herbal: #33a984;
  --color-herbal-50: #e3fff3;
  --color-herbal-100: #c4ffe7;
  --color-herbal-200: #a8f0d3;
  --color-herbal-300: #88debd;
  --color-herbal-400: #5cc29e;
  --color-herbal-500: #33a984;
  --color-herbal-600: #008a68;
  --color-herbal-700: #006e52;
  --color-herbal-800: #00553f;
  --color-herbal-900: #00412f;
  --color-herbal-950: #00281c;
  --color-greenhouse: #43642f;
  --color-greenhouse-50: #e8fddc;
  --color-greenhouse-100: #dcf4cf;
  --color-greenhouse-200: #c6e3b7;
  --color-greenhouse-300: #aece9d;
  --color-greenhouse-400: #8db07a;
  --color-greenhouse-500: #72955e;
  --color-greenhouse-600: #597b45;
  --color-greenhouse-700: #43642f;
  --color-greenhouse-800: #334e23;
  --color-greenhouse-900: #263d17;
  --color-greenhouse-950: #16260b;
  --color-lost-in-the-woods: #00422e;
  --color-lost-in-the-woods-50: #defeef;
  --color-lost-in-the-woods-100: #d1f5e4;
  --color-lost-in-the-woods-200: #b8e3cf;
  --color-lost-in-the-woods-300: #9dceb8;
  --color-lost-in-the-woods-400: #7ab098;
  --color-lost-in-the-woods-500: #5d967e;
  --color-lost-in-the-woods-600: #447b64;
  --color-lost-in-the-woods-700: #30644f;
  --color-lost-in-the-woods-800: #21503e;
  --color-lost-in-the-woods-900: #00422e;
  --color-lost-in-the-woods-950: #0a291d;
  --color-herbal-vapours: #e1fbd2;
  --color-herbal-vapours-50: #e1fbd2;
  --color-herbal-vapours-100: #deeed4;
  --color-herbal-vapours-200: #c9dcbe;
  --color-herbal-vapours-300: #b2c7a5;
  --color-herbal-vapours-400: #92a984;
  --color-herbal-vapours-500: #778e69;
  --color-herbal-vapours-600: #5e7450;
  --color-herbal-vapours-700: #485c3c;
  --color-herbal-vapours-800: #37482c;
  --color-herbal-vapours-900: #293820;
  --color-herbal-vapours-950: #182312;
  --color-cerulean-skies: #87c5c0;
  --color-cerulean-skies-50: #d5f9f5;
  --color-cerulean-skies-100: #c6eeea;
  --color-cerulean-skies-200: #aadad6;
  --color-cerulean-skies-300: #87c5c0;
  --color-cerulean-skies-400: #6ba7a2;
  --color-cerulean-skies-500: #508d88;
  --color-cerulean-skies-600: #38736f;
  --color-cerulean-skies-700: #255d59;
  --color-cerulean-skies-800: #184a47;
  --color-cerulean-skies-900: #0e3a38;
  --color-cerulean-skies-950: #052523;
}