Fuchsia Pheromone to Sugar Glaze color palette

9850B2Fuchsia Pheromone 005B54Mosque 00D9D2Fish Boy 1C1224Shot in the Dark FFF0E1Sugar Glaze

About this palette

Fuchsia Pheromone to Sugar Glaze is a 5-color cool palette: #9850B2 (Fuchsia Pheromone), #005B54 (Mosque), #00D9D2 (Fish Boy), #1C1224 (Shot in the Dark), #FFF0E1 (Sugar Glaze). It mixes purple, turquoise, white tones and feels cool overall. The strongest text pairing is #1C1224 on #FFF0E1 with a contrast ratio of 16.19:1, and 5 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fuchsia Pheromone	rgb(152, 80, 178)	hsl(284, 39%, 51%)
Mosque	rgb(0, 91, 84)	hsl(175, 100%, 18%)
Fish Boy	rgb(0, 217, 210)	hsl(178, 100%, 43%)
Shot in the Dark	rgb(28, 18, 36)	hsl(273, 33%, 11%)
Sugar Glaze	rgb(255, 240, 225)	hsl(30, 100%, 94%)

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.

Aa16.19:1 Super#1C1224 on #FFF0E1
Aa16.19:1 Super#FFF0E1 on #1C1224
Aa10.21:1 Very good#00D9D2 on #1C1224
Aa10.21:1 Very good#1C1224 on #00D9D2
Aa7.16:1 Very good#005B54 on #FFF0E1
Aa7.16:1 Very good#FFF0E1 on #005B54
Aa4.56:1 Good#9850B2 on #FFF0E1
Aa4.56:1 Good#FFF0E1 on #9850B2

Color blindness preview

CSS variables

/* Fuchsia Pheromone to Sugar Glaze — https://swatchly.xyz/palette/9850b2-005b54-00d9d2-1c1224-fff0e1 */
:root {
  --fuchsia-pheromone: #9850b2;
  --mosque: #005b54;
  --fish-boy: #00d9d2;
  --shot-in-the-dark: #1c1224;
  --sugar-glaze: #fff0e1;
}

Tailwind CSS v4

/* Fuchsia Pheromone to Sugar Glaze — https://swatchly.xyz/palette/9850b2-005b54-00d9d2-1c1224-fff0e1 */
@theme {
  --color-fuchsia-pheromone: #9850b2;
  --color-fuchsia-pheromone-50: #fbf1ff;
  --color-fuchsia-pheromone-100: #f8e5ff;
  --color-fuchsia-pheromone-200: #f0cbff;
  --color-fuchsia-pheromone-300: #e7aaff;
  --color-fuchsia-pheromone-400: #cd87e7;
  --color-fuchsia-pheromone-500: #b36ace;
  --color-fuchsia-pheromone-600: #9850b2;
  --color-fuchsia-pheromone-700: #7c3994;
  --color-fuchsia-pheromone-800: #642878;
  --color-fuchsia-pheromone-900: #4e1a60;
  --color-fuchsia-pheromone-950: #330d3f;
  --color-mosque: #005b54;
  --color-mosque-50: #d8fff9;
  --color-mosque-100: #caf6f0;
  --color-mosque-200: #ade3db;
  --color-mosque-300: #8eccc4;
  --color-mosque-400: #66aca4;
  --color-mosque-500: #479087;
  --color-mosque-600: #2a736c;
  --color-mosque-700: #005b54;
  --color-mosque-800: #064741;
  --color-mosque-900: #013732;
  --color-mosque-950: #00221f;
  --color-fish-boy: #00d9d2;
  --color-fish-boy-50: #cdfffb;
  --color-fish-boy-100: #a1fcf6;
  --color-fish-boy-200: #79ebe4;
  --color-fish-boy-300: #00d9d2;
  --color-fish-boy-400: #00b6b0;
  --color-fish-boy-500: #009893;
  --color-fish-boy-600: #007a76;
  --color-fish-boy-700: #00625e;
  --color-fish-boy-800: #004d4a;
  --color-fish-boy-900: #003c39;
  --color-fish-boy-950: #002524;
  --color-shot-in-the-dark: #1c1224;
  --color-shot-in-the-dark-50: #f9f2ff;
  --color-shot-in-the-dark-100: #f0e7f7;
  --color-shot-in-the-dark-200: #ddd3e6;
  --color-shot-in-the-dark-300: #c7bcd1;
  --color-shot-in-the-dark-400: #a89cb3;
  --color-shot-in-the-dark-500: #8b7f96;
  --color-shot-in-the-dark-600: #6f6379;
  --color-shot-in-the-dark-700: #564b5f;
  --color-shot-in-the-dark-800: #413848;
  --color-shot-in-the-dark-900: #2f2835;
  --color-shot-in-the-dark-950: #1c1224;
  --color-sugar-glaze: #fff0e1;
  --color-sugar-glaze-50: #fff0e1;
  --color-sugar-glaze-100: #f1e7de;
  --color-sugar-glaze-200: #dfd4c9;
  --color-sugar-glaze-300: #cabdb1;
  --color-sugar-glaze-400: #ac9e91;
  --color-sugar-glaze-500: #918376;
  --color-sugar-glaze-600: #76695d;
  --color-sugar-glaze-700: #5e5347;
  --color-sugar-glaze-800: #4a4036;
  --color-sugar-glaze-900: #3a3129;
  --color-sugar-glaze-950: #241e18;
}