Mad Pinker to Sky Dancer color palette

FF98A1Mad Pinker 008774Go Go Green AAAF00Honey and Thyme 14A440Fennel Fiasco 955EFFOrion Nebula 259BFFSky Dancer

Open in generator Export PNG, PDF, ASE…

About this palette

Mad Pinker to Sky Dancer is a 6-color vibrant, cool, neon palette: #FF98A1 (Mad Pinker), #008774 (Go Go Green), #AAAF00 (Honey and Thyme), #14A440 (Fennel Fiasco), #955EFF (Orion Nebula), #259BFF (Sky Dancer). It mixes pink, turquoise, yellow, green, purple, blue tones and feels cool overall. The strongest text pairing is #FF98A1 on #008774 with a contrast ratio of 2.17:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mad Pinker	rgb(255, 152, 161)	hsl(355, 100%, 80%)
Go Go Green	rgb(0, 135, 116)	hsl(172, 100%, 26%)
Honey and Thyme	rgb(170, 175, 0)	hsl(62, 100%, 34%)
Fennel Fiasco	rgb(20, 164, 64)	hsl(138, 78%, 36%)
Orion Nebula	rgb(149, 94, 255)	hsl(260, 100%, 68%)
Sky Dancer	rgb(37, 155, 255)	hsl(208, 100%, 57%)

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

/* Mad Pinker to Sky Dancer — https://swatchly.xyz/palette/ff98a1-008774-aaaf00-14a440-955eff-259bff */
:root {
  --mad-pinker: #ff98a1;
  --go-go-green: #008774;
  --honey-and-thyme: #aaaf00;
  --fennel-fiasco: #14a440;
  --orion-nebula: #955eff;
  --sky-dancer: #259bff;
}

Tailwind CSS v4

/* Mad Pinker to Sky Dancer — https://swatchly.xyz/palette/ff98a1-008774-aaaf00-14a440-955eff-259bff */
@theme {
  --color-mad-pinker: #ff98a1;
  --color-mad-pinker-50: #ffeced;
  --color-mad-pinker-100: #ffddde;
  --color-mad-pinker-200: #ffbec2;
  --color-mad-pinker-300: #ff98a1;
  --color-mad-pinker-400: #dc7b84;
  --color-mad-pinker-500: #c0606a;
  --color-mad-pinker-600: #a24752;
  --color-mad-pinker-700: #86343f;
  --color-mad-pinker-800: #6e2530;
  --color-mad-pinker-900: #581a24;
  --color-mad-pinker-950: #3a0d14;
  --color-go-go-green: #008774;
  --color-go-go-green-50: #d8fff5;
  --color-go-go-green-100: #c0fbed;
  --color-go-go-green-200: #a5ebdb;
  --color-go-go-green-300: #85d8c5;
  --color-go-go-green-400: #5abba7;
  --color-go-go-green-500: #34a18d;
  --color-go-go-green-600: #008774;
  --color-go-go-green-700: #006b5c;
  --color-go-go-green-800: #005447;
  --color-go-go-green-900: #004036;
  --color-go-go-green-950: #002821;
  --color-honey-and-thyme: #aaaf00;
  --color-honey-and-thyme-50: #f8fdba;
  --color-honey-and-thyme-100: #eff5a9;
  --color-honey-and-thyme-200: #dde387;
  --color-honey-and-thyme-300: #c8ce5f;
  --color-honey-and-thyme-400: #aaaf00;
  --color-honey-and-thyme-500: #8d9100;
  --color-honey-and-thyme-600: #717500;
  --color-honey-and-thyme-700: #595c00;
  --color-honey-and-thyme-800: #454800;
  --color-honey-and-thyme-900: #353700;
  --color-honey-and-thyme-950: #202100;
  --color-fennel-fiasco: #14a440;
  --color-fennel-fiasco-50: #e1ffe4;
  --color-fennel-fiasco-100: #c0ffc6;
  --color-fennel-fiasco-200: #9cf1a6;
  --color-fennel-fiasco-300: #79dd87;
  --color-fennel-fiasco-400: #48bf60;
  --color-fennel-fiasco-500: #14a440;
  --color-fennel-fiasco-600: #00852f;
  --color-fennel-fiasco-700: #006a24;
  --color-fennel-fiasco-800: #00531a;
  --color-fennel-fiasco-900: #004012;
  --color-fennel-fiasco-950: #002808;
  --color-orion-nebula: #955eff;
  --color-orion-nebula-50: #f6f4ff;
  --color-orion-nebula-100: #ece8ff;
  --color-orion-nebula-200: #dad1ff;
  --color-orion-nebula-300: #c6b5ff;
  --color-orion-nebula-400: #ab8aff;
  --color-orion-nebula-500: #955eff;
  --color-orion-nebula-600: #7b40de;
  --color-orion-nebula-700: #6328bc;
  --color-orion-nebula-800: #4f159b;
  --color-orion-nebula-900: #3e087e;
  --color-orion-nebula-950: #270155;
  --color-sky-dancer: #259bff;
  --color-sky-dancer-50: #e8f3ff;
  --color-sky-dancer-100: #d3e8ff;
  --color-sky-dancer-200: #add5ff;
  --color-sky-dancer-300: #7dbeff;
  --color-sky-dancer-400: #259bff;
  --color-sky-dancer-500: #0081dc;
  --color-sky-dancer-600: #0068b3;
  --color-sky-dancer-700: #005291;
  --color-sky-dancer-800: #004174;
  --color-sky-dancer-900: #00335c;
  --color-sky-dancer-950: #00203e;
}