Fennel Fiasco to Illicit Purple color palette

00A34AFennel Fiasco 00819FAhoy! Blue C2A9FFLilac 00C8B5Pristine Oceanic B55D00Polished Copper AE86FFIllicit Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Fennel Fiasco to Illicit Purple is a 6-color vibrant, cool palette: #00A34A (Fennel Fiasco), #00819F (Ahoy! Blue), #C2A9FF (Lilac), #00C8B5 (Pristine Oceanic), #B55D00 (Polished Copper), #AE86FF (Illicit Purple). It mixes green, blue, purple, turquoise, brown tones and feels cool overall. The strongest text pairing is #C2A9FF on #B55D00 with a contrast ratio of 2.30:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fennel Fiasco	rgb(0, 163, 74)	hsl(147, 100%, 32%)
Ahoy! Blue	rgb(0, 129, 159)	hsl(191, 100%, 31%)
Lilac	rgb(194, 169, 255)	hsl(257, 100%, 83%)
Pristine Oceanic	rgb(0, 200, 181)	hsl(174, 100%, 39%)
Polished Copper	rgb(181, 93, 0)	hsl(31, 100%, 35%)
Illicit Purple	rgb(174, 134, 255)	hsl(260, 100%, 76%)

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

/* Fennel Fiasco to Illicit Purple — https://swatchly.xyz/palette/00a34a-00819f-c2a9ff-00c8b5-b55d00-ae86ff */
:root {
  --fennel-fiasco: #00a34a;
  --ahoy-blue: #00819f;
  --lilac: #c2a9ff;
  --pristine-oceanic: #00c8b5;
  --polished-copper: #b55d00;
  --illicit-purple: #ae86ff;
}

Tailwind CSS v4

/* Fennel Fiasco to Illicit Purple — https://swatchly.xyz/palette/00a34a-00819f-c2a9ff-00c8b5-b55d00-ae86ff */
@theme {
  --color-fennel-fiasco: #00a34a;
  --color-fennel-fiasco-50: #e0ffe5;
  --color-fennel-fiasco-100: #bdffc9;
  --color-fennel-fiasco-200: #99f0ab;
  --color-fennel-fiasco-300: #75dc8e;
  --color-fennel-fiasco-400: #43bf68;
  --color-fennel-fiasco-500: #00a34a;
  --color-fennel-fiasco-600: #00833a;
  --color-fennel-fiasco-700: #00682d;
  --color-fennel-fiasco-800: #005222;
  --color-fennel-fiasco-900: #003f18;
  --color-fennel-fiasco-950: #00280d;
  --color-ahoy-blue: #00819f;
  --color-ahoy-blue-50: #e7f9ff;
  --color-ahoy-blue-100: #d3f3ff;
  --color-ahoy-blue-200: #a3e7fe;
  --color-ahoy-blue-300: #84d3ed;
  --color-ahoy-blue-400: #59b5d3;
  --color-ahoy-blue-500: #349bba;
  --color-ahoy-blue-600: #00819f;
  --color-ahoy-blue-700: #00667f;
  --color-ahoy-blue-800: #005064;
  --color-ahoy-blue-900: #003d4d;
  --color-ahoy-blue-950: #002631;
  --color-lilac: #c2a9ff;
  --color-lilac-50: #f3efff;
  --color-lilac-100: #e9e1ff;
  --color-lilac-200: #d6c8ff;
  --color-lilac-300: #c2a9ff;
  --color-lilac-400: #a48bdd;
  --color-lilac-500: #8a71c2;
  --color-lilac-600: #7058a5;
  --color-lilac-700: #5a4389;
  --color-lilac-800: #483370;
  --color-lilac-900: #38265b;
  --color-lilac-950: #23163c;
  --color-pristine-oceanic: #00c8b5;
  --color-pristine-oceanic-50: #e9fffb;
  --color-pristine-oceanic-100: #c7fff5;
  --color-pristine-oceanic-200: #96f4e5;
  --color-pristine-oceanic-300: #70e2d1;
  --color-pristine-oceanic-400: #00c8b5;
  --color-pristine-oceanic-500: #00a696;
  --color-pristine-oceanic-600: #008578;
  --color-pristine-oceanic-700: #00695f;
  --color-pristine-oceanic-800: #005249;
  --color-pristine-oceanic-900: #003e37;
  --color-pristine-oceanic-950: #002621;
  --color-polished-copper: #b55d00;
  --color-polished-copper-50: #fff2ea;
  --color-polished-copper-100: #ffe9da;
  --color-polished-copper-200: #ffd2b3;
  --color-polished-copper-300: #ffb581;
  --color-polished-copper-400: #e99252;
  --color-polished-copper-500: #d0772e;
  --color-polished-copper-600: #b55d00;
  --color-polished-copper-700: #914900;
  --color-polished-copper-800: #723800;
  --color-polished-copper-900: #582a00;
  --color-polished-copper-950: #391900;
  --color-illicit-purple: #ae86ff;
  --color-illicit-purple-50: #f6f3ff;
  --color-illicit-purple-100: #ede7ff;
  --color-illicit-purple-200: #dbcfff;
  --color-illicit-purple-300: #c8b2ff;
  --color-illicit-purple-400: #ae86ff;
  --color-illicit-purple-500: #936ae0;
  --color-illicit-purple-600: #784fc0;
  --color-illicit-purple-700: #6139a1;
  --color-illicit-purple-800: #4d2884;
  --color-illicit-purple-900: #3c1c6b;
  --color-illicit-purple-950: #260e47;
}