Pink Pride to Neon Boneyard color palette

F700E5Pink Pride 92BF00Walk in the Park FFA6B5Ballet Slippers 80E9FFShallow Water D9CBFFNeon Boneyard

Open in generator Export PNG, PDF, ASE…

About this palette

Pink Pride to Neon Boneyard is a 5-color vibrant, light, cool, neon palette: #F700E5 (Pink Pride), #92BF00 (Walk in the Park), #FFA6B5 (Ballet Slippers), #80E9FF (Shallow Water), #D9CBFF (Neon Boneyard). It mixes pink, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #F700E5 on #80E9FF with a contrast ratio of 2.47:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Pride	rgb(247, 0, 229)	hsl(304, 100%, 48%)
Walk in the Park	rgb(146, 191, 0)	hsl(74, 100%, 37%)
Ballet Slippers	rgb(255, 166, 181)	hsl(350, 100%, 83%)
Shallow Water	rgb(128, 233, 255)	hsl(190, 100%, 75%)
Neon Boneyard	rgb(217, 203, 255)	hsl(256, 100%, 90%)

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

/* Pink Pride to Neon Boneyard — https://swatchly.xyz/palette/f700e5-92bf00-ffa6b5-80e9ff-d9cbff */
:root {
  --pink-pride: #f700e5;
  --walk-in-the-park: #92bf00;
  --ballet-slippers: #ffa6b5;
  --shallow-water: #80e9ff;
  --neon-boneyard: #d9cbff;
}

Tailwind CSS v4

/* Pink Pride to Neon Boneyard — https://swatchly.xyz/palette/f700e5-92bf00-ffa6b5-80e9ff-d9cbff */
@theme {
  --color-pink-pride: #f700e5;
  --color-pink-pride-50: #ffeafb;
  --color-pink-pride-100: #ffd7f8;
  --color-pink-pride-200: #ffb2f2;
  --color-pink-pride-300: #ff81ee;
  --color-pink-pride-400: #f700e5;
  --color-pink-pride-500: #cf00c0;
  --color-pink-pride-600: #a8009c;
  --color-pink-pride-700: #88007d;
  --color-pink-pride-800: #6c0064;
  --color-pink-pride-900: #560050;
  --color-pink-pride-950: #3a0035;
  --color-walk-in-the-park: #92bf00;
  --color-walk-in-the-park-50: #f2ffde;
  --color-walk-in-the-park-100: #e0feae;
  --color-walk-in-the-park-200: #ccee8c;
  --color-walk-in-the-park-300: #b4db66;
  --color-walk-in-the-park-400: #92bf00;
  --color-walk-in-the-park-500: #799f00;
  --color-walk-in-the-park-600: #607f00;
  --color-walk-in-the-park-700: #4b6500;
  --color-walk-in-the-park-800: #3a4e00;
  --color-walk-in-the-park-900: #2b3b00;
  --color-walk-in-the-park-950: #192400;
  --color-ballet-slippers: #ffa6b5;
  --color-ballet-slippers-50: #fff3f4;
  --color-ballet-slippers-100: #ffe5e9;
  --color-ballet-slippers-200: #ffc9d1;
  --color-ballet-slippers-300: #ffa6b5;
  --color-ballet-slippers-400: #da8896;
  --color-ballet-slippers-500: #be6b7a;
  --color-ballet-slippers-600: #9f5160;
  --color-ballet-slippers-700: #833c4b;
  --color-ballet-slippers-800: #692b39;
  --color-ballet-slippers-900: #531f2b;
  --color-ballet-slippers-950: #361119;
  --color-shallow-water: #80e9ff;
  --color-shallow-water-50: #e3faff;
  --color-shallow-water-100: #c5f4ff;
  --color-shallow-water-200: #80e9ff;
  --color-shallow-water-300: #79d0e2;
  --color-shallow-water-400: #4bb1c5;
  --color-shallow-water-500: #1e96aa;
  --color-shallow-water-600: #00798b;
  --color-shallow-water-700: #00606f;
  --color-shallow-water-800: #004b57;
  --color-shallow-water-900: #003a44;
  --color-shallow-water-950: #00242b;
  --color-neon-boneyard: #d9cbff;
  --color-neon-boneyard-50: #f4f1ff;
  --color-neon-boneyard-100: #ebe4ff;
  --color-neon-boneyard-200: #d9cbff;
  --color-neon-boneyard-300: #c2b6e3;
  --color-neon-boneyard-400: #a497c6;
  --color-neon-boneyard-500: #897cab;
  --color-neon-boneyard-600: #6f628f;
  --color-neon-boneyard-700: #594d76;
  --color-neon-boneyard-800: #463b5f;
  --color-neon-boneyard-900: #362d4b;
  --color-neon-boneyard-950: #211b30;
}