Puff of Pink to Cosmic Explorer color palette

FFCDEBPuff of Pink F686D1Bubblegum Beam E05FB4Sugar Rush C11392Vibrant Velvet 7F3D64Midnight Aubergine 62004CCosmic Explorer

Open in generator Export PNG, PDF, ASE…

About this palette

Puff of Pink to Cosmic Explorer is a 6-color vibrant, warm, neon, monochromatic, gradient palette: #FFCDEB (Puff of Pink), #F686D1 (Bubblegum Beam), #E05FB4 (Sugar Rush), #C11392 (Vibrant Velvet), #7F3D64 (Midnight Aubergine), #62004C (Cosmic Explorer). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFCDEB on #62004C with a contrast ratio of 9.35:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puff of Pink	rgb(255, 205, 235)	hsl(324, 100%, 90%)
Bubblegum Beam	rgb(246, 134, 209)	hsl(320, 86%, 75%)
Sugar Rush	rgb(224, 95, 180)	hsl(320, 68%, 63%)
Vibrant Velvet	rgb(193, 19, 146)	hsl(316, 82%, 42%)
Midnight Aubergine	rgb(127, 61, 100)	hsl(325, 35%, 37%)
Cosmic Explorer	rgb(98, 0, 76)	hsl(313, 100%, 19%)

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.

Aa9.35:1 Very good#FFCDEB on #62004C
Aa9.35:1 Very good#62004C on #FFCDEB
Aa5.70:1 Good#F686D1 on #62004C
Aa5.70:1 Good#62004C on #F686D1
Aa5.51:1 Good#FFCDEB on #7F3D64
Aa5.51:1 Good#7F3D64 on #FFCDEB
Aa4.02:1 Poor#FFCDEB on #C11392
Aa4.02:1 Poor#C11392 on #FFCDEB

Color blindness preview

CSS variables

/* Puff of Pink to Cosmic Explorer — https://swatchly.xyz/palette/ffcdeb-f686d1-e05fb4-c11392-7f3d64-62004c */
:root {
  --puff-of-pink: #ffcdeb;
  --bubblegum-beam: #f686d1;
  --sugar-rush: #e05fb4;
  --vibrant-velvet: #c11392;
  --midnight-aubergine: #7f3d64;
  --cosmic-explorer: #62004c;
}

Tailwind CSS v4

/* Puff of Pink to Cosmic Explorer — https://swatchly.xyz/palette/ffcdeb-f686d1-e05fb4-c11392-7f3d64-62004c */
@theme {
  --color-puff-of-pink: #ffcdeb;
  --color-puff-of-pink-50: #fff7fc;
  --color-puff-of-pink-100: #ffeaf6;
  --color-puff-of-pink-200: #ffcdeb;
  --color-puff-of-pink-300: #e1b8d1;
  --color-puff-of-pink-400: #c396b1;
  --color-puff-of-pink-500: #a67995;
  --color-puff-of-pink-600: #895e79;
  --color-puff-of-pink-700: #6f4860;
  --color-puff-of-pink-800: #57364b;
  --color-puff-of-pink-900: #44283a;
  --color-puff-of-pink-950: #2c1824;
  --color-bubblegum-beam: #f686d1;
  --color-bubblegum-beam-50: #ffe5f5;
  --color-bubblegum-beam-100: #ffd2ee;
  --color-bubblegum-beam-200: #ffade2;
  --color-bubblegum-beam-300: #f686d1;
  --color-bubblegum-beam-400: #d56ab3;
  --color-bubblegum-beam-500: #ba5099;
  --color-bubblegum-beam-600: #9d3880;
  --color-bubblegum-beam-700: #832669;
  --color-bubblegum-beam-800: #6b1855;
  --color-bubblegum-beam-900: #580f44;
  --color-bubblegum-beam-950: #39052c;
  --color-sugar-rush: #e05fb4;
  --color-sugar-rush-50: #ffeaf6;
  --color-sugar-rush-100: #ffd8ee;
  --color-sugar-rush-200: #ffb5e1;
  --color-sugar-rush-300: #fe88d3;
  --color-sugar-rush-400: #e05fb4;
  --color-sugar-rush-500: #c3449a;
  --color-sugar-rush-600: #a52a7f;
  --color-sugar-rush-700: #891668;
  --color-sugar-rush-800: #700654;
  --color-sugar-rush-900: #5a0043;
  --color-sugar-rush-950: #3d002c;
  --color-vibrant-velvet: #c11392;
  --color-vibrant-velvet-50: #fff0f8;
  --color-vibrant-velvet-100: #ffe3f3;
  --color-vibrant-velvet-200: #ffc6e7;
  --color-vibrant-velvet-300: #ffa0da;
  --color-vibrant-velvet-400: #fb62c7;
  --color-vibrant-velvet-500: #e03dad;
  --color-vibrant-velvet-600: #c11392;
  --color-vibrant-velvet-700: #9d0075;
  --color-vibrant-velvet-800: #7c005c;
  --color-vibrant-velvet-900: #610047;
  --color-vibrant-velvet-950: #3f002d;
  --color-midnight-aubergine: #7f3d64;
  --color-midnight-aubergine-50: #fff0f8;
  --color-midnight-aubergine-100: #ffe2f1;
  --color-midnight-aubergine-200: #fec4e3;
  --color-midnight-aubergine-300: #ecabce;
  --color-midnight-aubergine-400: #d089b0;
  --color-midnight-aubergine-500: #b46d95;
  --color-midnight-aubergine-600: #97547b;
  --color-midnight-aubergine-700: #7f3d64;
  --color-midnight-aubergine-800: #642f4e;
  --color-midnight-aubergine-900: #4f223d;
  --color-midnight-aubergine-950: #341326;
  --color-cosmic-explorer: #62004c;
  --color-cosmic-explorer-50: #fff0f9;
  --color-cosmic-explorer-100: #ffe1f3;
  --color-cosmic-explorer-200: #ffc2e8;
  --color-cosmic-explorer-300: #f7a1d9;
  --color-cosmic-explorer-400: #db7dbc;
  --color-cosmic-explorer-500: #c061a1;
  --color-cosmic-explorer-600: #a24786;
  --color-cosmic-explorer-700: #87336e;
  --color-cosmic-explorer-800: #6e2359;
  --color-cosmic-explorer-900: #62004c;
  --color-cosmic-explorer-950: #3b0b2e;
}