Illicit Purple to Cruising Color Palette

About this palette

Illicit Purple to Cruising is a 5-color vibrant, cool palette: #BA72EC (Illicit Purple), #00CDB4 (Pristine Oceanic), #109E1E (Sacro Bosco), #FFA58D (Frozen Salmon), #008398 (Cruising). It mixes purple, turquoise, green, pink tones and feels cool overall. The strongest text pairing is #FFA58D on #008398 with a contrast ratio of 2.34:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Illicit Purple	rgb(186, 114, 236)	hsl(275, 76%, 69%)
Pristine Oceanic	rgb(0, 205, 180)	hsl(173, 100%, 40%)
Sacro Bosco	rgb(16, 158, 30)	hsl(126, 82%, 34%)
Frozen Salmon	rgb(255, 165, 141)	hsl(13, 100%, 78%)
Cruising	rgb(0, 131, 152)	hsl(188, 100%, 30%)

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

/* Illicit Purple to Cruising — https://swatchly.xyz/palette/ba72ec-00cdb4-109e1e-ffa58d-008398 */
:root {
  --illicit-purple: #ba72ec;
  --pristine-oceanic: #00cdb4;
  --sacro-bosco: #109e1e;
  --frozen-salmon: #ffa58d;
  --cruising: #008398;
}

Tailwind CSS v4

/* Illicit Purple to Cruising — https://swatchly.xyz/palette/ba72ec-00cdb4-109e1e-ffa58d-008398 */
@theme {
  --color-illicit-purple: #ba72ec;
  --color-illicit-purple-50: #f7edff;
  --color-illicit-purple-100: #f0deff;
  --color-illicit-purple-200: #e3c0ff;
  --color-illicit-purple-300: #d59dff;
  --color-illicit-purple-400: #ba72ec;
  --color-illicit-purple-500: #9f57cf;
  --color-illicit-purple-600: #843eb1;
  --color-illicit-purple-700: #6c2b94;
  --color-illicit-purple-800: #571c7a;
  --color-illicit-purple-900: #461263;
  --color-illicit-purple-950: #2e0843;
  --color-pristine-oceanic: #00cdb4;
  --color-pristine-oceanic-50: #eefffb;
  --color-pristine-oceanic-100: #d1fff4;
  --color-pristine-oceanic-200: #9af7e4;
  --color-pristine-oceanic-300: #74e6d1;
  --color-pristine-oceanic-400: #00cdb4;
  --color-pristine-oceanic-500: #00aa95;
  --color-pristine-oceanic-600: #008977;
  --color-pristine-oceanic-700: #006c5e;
  --color-pristine-oceanic-800: #005348;
  --color-pristine-oceanic-900: #003f36;
  --color-pristine-oceanic-950: #002620;
  --color-sacro-bosco: #109e1e;
  --color-sacro-bosco-50: #dfffdd;
  --color-sacro-bosco-100: #baffb6;
  --color-sacro-bosco-200: #98ee95;
  --color-sacro-bosco-300: #75da73;
  --color-sacro-bosco-400: #44bb46;
  --color-sacro-bosco-500: #109e1e;
  --color-sacro-bosco-600: #008011;
  --color-sacro-bosco-700: #00660b;
  --color-sacro-bosco-800: #005007;
  --color-sacro-bosco-900: #003e04;
  --color-sacro-bosco-950: #002701;
  --color-frozen-salmon: #ffa58d;
  --color-frozen-salmon-50: #fff1ed;
  --color-frozen-salmon-100: #ffe3dc;
  --color-frozen-salmon-200: #ffc7b8;
  --color-frozen-salmon-300: #ffa58d;
  --color-frozen-salmon-400: #db8771;
  --color-frozen-salmon-500: #bf6b55;
  --color-frozen-salmon-600: #a1513c;
  --color-frozen-salmon-700: #843c2a;
  --color-frozen-salmon-800: #6b2c1c;
  --color-frozen-salmon-900: #552012;
  --color-frozen-salmon-950: #381107;
  --color-cruising: #008398;
  --color-cruising-50: #e4faff;
  --color-cruising-100: #cdf5ff;
  --color-cruising-200: #a4e8f8;
  --color-cruising-300: #85d4e7;
  --color-cruising-400: #59b7cc;
  --color-cruising-500: #349db2;
  --color-cruising-600: #008398;
  --color-cruising-700: #006879;
  --color-cruising-800: #00515f;
  --color-cruising-900: #003e49;
  --color-cruising-950: #00272f;
}