Dark Pink to Nebula Color Palette

About this palette

Dark Pink to Nebula is a 5-color vibrant, warm, neon palette: #D04974 (Dark Pink), #720041 (Merlot), #ECB0ED (Candy Dreams), #FA8774 (Smoked Salmon), #A500B6 (Nebula). It mixes pink, red tones and feels warm overall. The strongest text pairing is #720041 on #ECB0ED with a contrast ratio of 6.70:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Pink	rgb(208, 73, 116)	hsl(341, 59%, 55%)
Merlot	rgb(114, 0, 65)	hsl(326, 100%, 22%)
Candy Dreams	rgb(236, 176, 237)	hsl(299, 63%, 81%)
Smoked Salmon	rgb(250, 135, 116)	hsl(9, 93%, 72%)
Nebula	rgb(165, 0, 182)	hsl(294, 100%, 36%)

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.

Aa6.70:1 Good#720041 on #ECB0ED
Aa6.70:1 Good#ECB0ED on #720041
Aa4.90:1 Good#720041 on #FA8774
Aa4.90:1 Good#FA8774 on #720041
Aa3.66:1 Poor#ECB0ED on #A500B6
Aa3.66:1 Poor#A500B6 on #ECB0ED

Color blindness preview

CSS variables

/* Dark Pink to Nebula — https://swatchly.xyz/palette/d04974-720041-ecb0ed-fa8774-a500b6 */
:root {
  --dark-pink: #d04974;
  --merlot: #720041;
  --candy-dreams: #ecb0ed;
  --smoked-salmon: #fa8774;
  --nebula: #a500b6;
}

Tailwind CSS v4

/* Dark Pink to Nebula — https://swatchly.xyz/palette/d04974-720041-ecb0ed-fa8774-a500b6 */
@theme {
  --color-dark-pink: #d04974;
  --color-dark-pink-50: #fff0f3;
  --color-dark-pink-100: #ffe0e6;
  --color-dark-pink-200: #ffc1cf;
  --color-dark-pink-300: #ff9bb3;
  --color-dark-pink-400: #ef6990;
  --color-dark-pink-500: #d04974;
  --color-dark-pink-600: #b02e5b;
  --color-dark-pink-700: #921847;
  --color-dark-pink-800: #770837;
  --color-dark-pink-900: #600029;
  --color-dark-pink-950: #3f0019;
  --color-merlot: #720041;
  --color-merlot-50: #fff1f6;
  --color-merlot-100: #ffe2ec;
  --color-merlot-200: #ffc5da;
  --color-merlot-300: #ff9dc4;
  --color-merlot-400: #e377a4;
  --color-merlot-500: #c55888;
  --color-merlot-600: #a43d6c;
  --color-merlot-700: #862854;
  --color-merlot-800: #720041;
  --color-merlot-900: #540f31;
  --color-merlot-950: #36061e;
  --color-candy-dreams: #ecb0ed;
  --color-candy-dreams-50: #fff5ff;
  --color-candy-dreams-100: #ffe7ff;
  --color-candy-dreams-200: #f8cdf8;
  --color-candy-dreams-300: #ecb0ed;
  --color-candy-dreams-400: #c891c9;
  --color-candy-dreams-500: #ab73ad;
  --color-candy-dreams-600: #8e588f;
  --color-candy-dreams-700: #734275;
  --color-candy-dreams-800: #5b315d;
  --color-candy-dreams-900: #472348;
  --color-candy-dreams-950: #2d142e;
  --color-smoked-salmon: #fa8774;
  --color-smoked-salmon-50: #fff7f6;
  --color-smoked-salmon-100: #ffece9;
  --color-smoked-salmon-200: #ffd4cc;
  --color-smoked-salmon-300: #ffb5a8;
  --color-smoked-salmon-400: #fa8774;
  --color-smoked-salmon-500: #d86958;
  --color-smoked-salmon-600: #b74c3c;
  --color-smoked-salmon-700: #973427;
  --color-smoked-salmon-800: #7a2317;
  --color-smoked-salmon-900: #60160d;
  --color-smoked-salmon-950: #3e0904;
  --color-nebula: #a500b6;
  --color-nebula-50: #fef0ff;
  --color-nebula-100: #fce0ff;
  --color-nebula-200: #f9bfff;
  --color-nebula-300: #f495ff;
  --color-nebula-400: #e15ef1;
  --color-nebula-500: #c438d5;
  --color-nebula-600: #a500b6;
  --color-nebula-700: #840092;
  --color-nebula-800: #680074;
  --color-nebula-900: #52005b;
  --color-nebula-950: #35003c;
}