Cupid’s Eye to Hadfield Blue color palette

FF3EEACupid’s Eye E0A400Honeycomb 00874ALater Gator FF9FCDViolet Kiss A79900Lucky 2878FFHadfield Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Cupid’s Eye to Hadfield Blue is a 6-color vibrant, warm, neon palette: #FF3EEA (Cupid’s Eye), #E0A400 (Honeycomb), #00874A (Later Gator), #FF9FCD (Violet Kiss), #A79900 (Lucky), #2878FF (Hadfield Blue). It mixes pink, yellow, green, blue tones and feels warm overall. The strongest text pairing is #00874A on #FF9FCD with a contrast ratio of 2.43:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cupid’s Eye	rgb(255, 62, 234)	hsl(307, 100%, 62%)
Honeycomb	rgb(224, 164, 0)	hsl(44, 100%, 44%)
Later Gator	rgb(0, 135, 74)	hsl(153, 100%, 26%)
Violet Kiss	rgb(255, 159, 205)	hsl(331, 100%, 81%)
Lucky	rgb(167, 153, 0)	hsl(55, 100%, 33%)
Hadfield Blue	rgb(40, 120, 255)	hsl(218, 100%, 58%)

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

/* Cupid’s Eye to Hadfield Blue — https://swatchly.xyz/palette/ff3eea-e0a400-00874a-ff9fcd-a79900-2878ff */
:root {
  --cupid-s-eye: #ff3eea;
  --honeycomb: #e0a400;
  --later-gator: #00874a;
  --violet-kiss: #ff9fcd;
  --lucky: #a79900;
  --hadfield-blue: #2878ff;
}

Tailwind CSS v4

/* Cupid’s Eye to Hadfield Blue — https://swatchly.xyz/palette/ff3eea-e0a400-00874a-ff9fcd-a79900-2878ff */
@theme {
  --color-cupid-s-eye: #ff3eea;
  --color-cupid-s-eye-50: #fff0fc;
  --color-cupid-s-eye-100: #ffe1f9;
  --color-cupid-s-eye-200: #ffc0f3;
  --color-cupid-s-eye-300: #ff96ee;
  --color-cupid-s-eye-400: #ff3eea;
  --color-cupid-s-eye-500: #de00cb;
  --color-cupid-s-eye-600: #b400a5;
  --color-cupid-s-eye-700: #900084;
  --color-cupid-s-eye-800: #720068;
  --color-cupid-s-eye-900: #590051;
  --color-cupid-s-eye-950: #3a0034;
  --color-honeycomb: #e0a400;
  --color-honeycomb-50: #fff9f0;
  --color-honeycomb-100: #fff1d8;
  --color-honeycomb-200: #ffdc9d;
  --color-honeycomb-300: #f5c568;
  --color-honeycomb-400: #e0a400;
  --color-honeycomb-500: #ba8800;
  --color-honeycomb-600: #966c00;
  --color-honeycomb-700: #765500;
  --color-honeycomb-800: #5c4100;
  --color-honeycomb-900: #463100;
  --color-honeycomb-950: #2b1c00;
  --color-later-gator: #00874a;
  --color-later-gator-50: #deffe7;
  --color-later-gator-100: #c0fdd3;
  --color-later-gator-200: #a4edbc;
  --color-later-gator-300: #84daa2;
  --color-later-gator-400: #59bd7f;
  --color-later-gator-500: #34a263;
  --color-later-gator-600: #00874a;
  --color-later-gator-700: #006b3a;
  --color-later-gator-800: #00542c;
  --color-later-gator-900: #004120;
  --color-later-gator-950: #002912;
  --color-violet-kiss: #ff9fcd;
  --color-violet-kiss-50: #fff1f7;
  --color-violet-kiss-100: #ffe3ef;
  --color-violet-kiss-200: #ffc5df;
  --color-violet-kiss-300: #ff9fcd;
  --color-violet-kiss-400: #da81ad;
  --color-violet-kiss-500: #be6491;
  --color-violet-kiss-600: #a04a76;
  --color-violet-kiss-700: #83365e;
  --color-violet-kiss-800: #6a264a;
  --color-violet-kiss-900: #541a39;
  --color-violet-kiss-950: #370d24;
  --color-lucky: #a79900;
  --color-lucky-50: #fbf4b4;
  --color-lucky-100: #f0e99f;
  --color-lucky-200: #ddd37a;
  --color-lucky-300: #c6bb52;
  --color-lucky-400: #a79900;
  --color-lucky-500: #8b7f00;
  --color-lucky-600: #706700;
  --color-lucky-700: #5a5200;
  --color-lucky-800: #474000;
  --color-lucky-900: #383200;
  --color-lucky-950: #242000;
  --color-hadfield-blue: #2878ff;
  --color-hadfield-blue-50: #eef5ff;
  --color-hadfield-blue-100: #deeaff;
  --color-hadfield-blue-200: #bed6ff;
  --color-hadfield-blue-300: #98beff;
  --color-hadfield-blue-400: #619bff;
  --color-hadfield-blue-500: #2878ff;
  --color-hadfield-blue-600: #075cde;
  --color-hadfield-blue-700: #0048b5;
  --color-hadfield-blue-800: #003891;
  --color-hadfield-blue-900: #002a73;
  --color-hadfield-blue-950: #001a4d;
}