Viridian to Aromatic Herbs Color Palette

About this palette

Viridian to Aromatic Herbs is a 5-color vibrant, cool palette: #008F61 (Viridian), #009BAD (Baltic), #EA69B2 (Fugitive Flamingo), #F082F0 (Pinkling), #9ACB37 (Aromatic Herbs). It mixes green, turquoise, pink tones and feels cool overall. The strongest text pairing is #008F61 on #9ACB37 with a contrast ratio of 2.15:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Viridian	rgb(0, 143, 97)	hsl(161, 100%, 28%)
Baltic	rgb(0, 155, 173)	hsl(186, 100%, 34%)
Fugitive Flamingo	rgb(234, 105, 178)	hsl(326, 75%, 66%)
Pinkling	rgb(240, 130, 240)	hsl(300, 79%, 73%)
Aromatic Herbs	rgb(154, 203, 55)	hsl(80, 59%, 51%)

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.

Color blindness preview

CSS variables

/* Viridian to Aromatic Herbs — https://swatchly.xyz/palette/008f61-009bad-ea69b2-f082f0-9acb37 */
:root {
  --viridian: #008f61;
  --baltic: #009bad;
  --fugitive-flamingo: #ea69b2;
  --pinkling: #f082f0;
  --aromatic-herbs: #9acb37;
}

Tailwind CSS v4

/* Viridian to Aromatic Herbs — https://swatchly.xyz/palette/008f61-009bad-ea69b2-f082f0-9acb37 */
@theme {
  --color-viridian: #008f61;
  --color-viridian-50: #dcffec;
  --color-viridian-100: #c0fede;
  --color-viridian-200: #a6efca;
  --color-viridian-300: #87ddb3;
  --color-viridian-400: #5cc294;
  --color-viridian-500: #36a979;
  --color-viridian-600: #008f61;
  --color-viridian-700: #00724c;
  --color-viridian-800: #00593b;
  --color-viridian-900: #00442c;
  --color-viridian-950: #002b1a;
  --color-baltic: #009bad;
  --color-baltic-50: #e3fbff;
  --color-baltic-100: #c6f7ff;
  --color-baltic-200: #99e8f6;
  --color-baltic-300: #76d4e3;
  --color-baltic-400: #44b6c7;
  --color-baltic-500: #009bad;
  --color-baltic-600: #007d8c;
  --color-baltic-700: #00636f;
  --color-baltic-800: #004d57;
  --color-baltic-900: #003b43;
  --color-baltic-950: #00252a;
  --color-fugitive-flamingo: #ea69b2;
  --color-fugitive-flamingo-50: #ffeff6;
  --color-fugitive-flamingo-100: #ffdfee;
  --color-fugitive-flamingo-200: #ffbfdf;
  --color-fugitive-flamingo-300: #ff97ce;
  --color-fugitive-flamingo-400: #ea69b2;
  --color-fugitive-flamingo-500: #cb4d97;
  --color-fugitive-flamingo-600: #ac327c;
  --color-fugitive-flamingo-700: #8e1c64;
  --color-fugitive-flamingo-800: #740c4f;
  --color-fugitive-flamingo-900: #5d023e;
  --color-fugitive-flamingo-950: #3e0028;
  --color-pinkling: #f082f0;
  --color-pinkling-50: #ffe4fe;
  --color-pinkling-100: #ffcffd;
  --color-pinkling-200: #ffa7fe;
  --color-pinkling-300: #f082f0;
  --color-pinkling-400: #d066d0;
  --color-pinkling-500: #b54ab6;
  --color-pinkling-600: #99329a;
  --color-pinkling-700: #7f1e81;
  --color-pinkling-800: #68106a;
  --color-pinkling-900: #550656;
  --color-pinkling-950: #370139;
  --color-aromatic-herbs: #9acb37;
  --color-aromatic-herbs-50: #defeb1;
  --color-aromatic-herbs-100: #d0f39c;
  --color-aromatic-herbs-200: #b8e077;
  --color-aromatic-herbs-300: #9acb37;
  --color-aromatic-herbs-400: #7eac05;
  --color-aromatic-herbs-500: #689000;
  --color-aromatic-herbs-600: #547400;
  --color-aromatic-herbs-700: #425d00;
  --color-aromatic-herbs-800: #344a00;
  --color-aromatic-herbs-900: #283a00;
  --color-aromatic-herbs-950: #182400;
}