Fennel Flower to Illicit Purple Color Palette

About this palette

Fennel Flower to Illicit Purple is a 5-color vibrant, cool, neon palette: #7DA6FF (Fennel Flower), #00DCDD (Fish Boy), #0099C5 (Blue Ocean), #A100D1 (Prom Queen), #B378FA (Illicit Purple). It mixes blue, turquoise, purple tones and feels cool overall. The strongest text pairing is #00DCDD on #A100D1 with a contrast ratio of 3.57:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fennel Flower	rgb(125, 166, 255)	hsl(221, 100%, 75%)
Fish Boy	rgb(0, 220, 221)	hsl(180, 100%, 43%)
Blue Ocean	rgb(0, 153, 197)	hsl(193, 100%, 39%)
Prom Queen	rgb(161, 0, 209)	hsl(286, 100%, 41%)
Illicit Purple	rgb(179, 120, 250)	hsl(267, 93%, 73%)

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.

Aa3.57:1 Poor#00DCDD on #A100D1
Aa3.57:1 Poor#A100D1 on #00DCDD

Color blindness preview

CSS variables

/* Fennel Flower to Illicit Purple — https://swatchly.xyz/palette/7da6ff-00dcdd-0099c5-a100d1-b378fa */
:root {
  --fennel-flower: #7da6ff;
  --fish-boy: #00dcdd;
  --blue-ocean: #0099c5;
  --prom-queen: #a100d1;
  --illicit-purple: #b378fa;
}

Tailwind CSS v4

/* Fennel Flower to Illicit Purple — https://swatchly.xyz/palette/7da6ff-00dcdd-0099c5-a100d1-b378fa */
@theme {
  --color-fennel-flower: #7da6ff;
  --color-fennel-flower-50: #f4f8ff;
  --color-fennel-flower-100: #e7efff;
  --color-fennel-flower-200: #ccddff;
  --color-fennel-flower-300: #acc7ff;
  --color-fennel-flower-400: #7da6ff;
  --color-fennel-flower-500: #6289df;
  --color-fennel-flower-600: #486cbf;
  --color-fennel-flower-700: #33549f;
  --color-fennel-flower-800: #244082;
  --color-fennel-flower-900: #182f67;
  --color-fennel-flower-950: #0c1c44;
  --color-fish-boy: #00dcdd;
  --color-fish-boy-50: #d4fffe;
  --color-fish-boy-100: #a5fefd;
  --color-fish-boy-200: #7eeded;
  --color-fish-boy-300: #00dcdd;
  --color-fish-boy-400: #00b8b9;
  --color-fish-boy-500: #009a9a;
  --color-fish-boy-600: #007c7c;
  --color-fish-boy-700: #006263;
  --color-fish-boy-800: #004d4d;
  --color-fish-boy-900: #003b3c;
  --color-fish-boy-950: #002525;
  --color-blue-ocean: #0099c5;
  --color-blue-ocean-50: #ebf9ff;
  --color-blue-ocean-100: #d7f2ff;
  --color-blue-ocean-200: #a9e4ff;
  --color-blue-ocean-300: #76d2f9;
  --color-blue-ocean-400: #44b4df;
  --color-blue-ocean-500: #0099c5;
  --color-blue-ocean-600: #007b9f;
  --color-blue-ocean-700: #00627f;
  --color-blue-ocean-800: #004c64;
  --color-blue-ocean-900: #003a4d;
  --color-blue-ocean-950: #002431;
  --color-prom-queen: #a100d1;
  --color-prom-queen-50: #faf1ff;
  --color-prom-queen-100: #f6e4ff;
  --color-prom-queen-200: #edc7ff;
  --color-prom-queen-300: #e2a5ff;
  --color-prom-queen-400: #d36dff;
  --color-prom-queen-500: #be3af0;
  --color-prom-queen-600: #a100d1;
  --color-prom-queen-700: #8100a8;
  --color-prom-queen-800: #650085;
  --color-prom-queen-900: #4f0069;
  --color-prom-queen-950: #330045;
  --color-illicit-purple: #b378fa;
  --color-illicit-purple-50: #f5f0ff;
  --color-illicit-purple-100: #ede2ff;
  --color-illicit-purple-200: #ddc7ff;
  --color-illicit-purple-300: #cba7ff;
  --color-illicit-purple-400: #b378fa;
  --color-illicit-purple-500: #985ddc;
  --color-illicit-purple-600: #7e43bd;
  --color-illicit-purple-700: #672e9f;
  --color-illicit-purple-800: #521f83;
  --color-illicit-purple-900: #41146a;
  --color-illicit-purple-950: #2a0948;
}