Pink Horror to Into the Night color palette

8E3A5EPink Horror F2A87DFlaming Cauldron DD9EAFBlush Bomb C1702ECajeta 007F7FTeal 0C3840Into the Night

Open in generator Export PNG, PDF, ASE…

About this palette

Pink Horror to Into the Night is a 6-color warm, vintage palette: #8E3A5E (Pink Horror), #F2A87D (Flaming Cauldron), #DD9EAF (Blush Bomb), #C1702E (Cajeta), #007F7F (Teal), #0C3840 (Into the Night). It mixes red, orange, pink, turquoise tones and feels warm overall. The strongest text pairing is #F2A87D on #0C3840 with a contrast ratio of 6.45:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Horror	rgb(142, 58, 94)	hsl(334, 42%, 39%)
Flaming Cauldron	rgb(242, 168, 125)	hsl(22, 82%, 72%)
Blush Bomb	rgb(221, 158, 175)	hsl(344, 48%, 74%)
Cajeta	rgb(193, 112, 46)	hsl(27, 62%, 47%)
Teal	rgb(0, 127, 127)	hsl(180, 100%, 25%)
Into the Night	rgb(12, 56, 64)	hsl(189, 68%, 15%)

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.45:1 Good#F2A87D on #0C3840
Aa6.45:1 Good#0C3840 on #F2A87D
Aa5.79:1 Good#DD9EAF on #0C3840
Aa5.79:1 Good#0C3840 on #DD9EAF
Aa3.66:1 Poor#8E3A5E on #F2A87D
Aa3.66:1 Poor#F2A87D on #8E3A5E
Aa3.40:1 Poor#C1702E on #0C3840
Aa3.40:1 Poor#0C3840 on #C1702E

Color blindness preview

CSS variables

/* Pink Horror to Into the Night — https://swatchly.xyz/palette/8e3a5e-f2a87d-dd9eaf-c1702e-007f7f-0c3840 */
:root {
  --pink-horror: #8e3a5e;
  --flaming-cauldron: #f2a87d;
  --blush-bomb: #dd9eaf;
  --cajeta: #c1702e;
  --teal: #007f7f;
  --into-the-night: #0c3840;
}

Tailwind CSS v4

/* Pink Horror to Into the Night — https://swatchly.xyz/palette/8e3a5e-f2a87d-dd9eaf-c1702e-007f7f-0c3840 */
@theme {
  --color-pink-horror: #8e3a5e;
  --color-pink-horror-50: #fff1f5;
  --color-pink-horror-100: #ffe2ec;
  --color-pink-horror-200: #ffc7da;
  --color-pink-horror-300: #f9a8c6;
  --color-pink-horror-400: #de86a7;
  --color-pink-horror-500: #c36a8d;
  --color-pink-horror-600: #a65174;
  --color-pink-horror-700: #8e3a5e;
  --color-pink-horror-800: #712b49;
  --color-pink-horror-900: #5a1e38;
  --color-pink-horror-950: #3b1023;
  --color-flaming-cauldron: #f2a87d;
  --color-flaming-cauldron-50: #ffefe6;
  --color-flaming-cauldron-100: #ffe0d0;
  --color-flaming-cauldron-200: #ffc5a3;
  --color-flaming-cauldron-300: #f2a87d;
  --color-flaming-cauldron-400: #d08a62;
  --color-flaming-cauldron-500: #b46f45;
  --color-flaming-cauldron-600: #97562d;
  --color-flaming-cauldron-700: #7d421b;
  --color-flaming-cauldron-800: #65320e;
  --color-flaming-cauldron-900: #512505;
  --color-flaming-cauldron-950: #351501;
  --color-blush-bomb: #dd9eaf;
  --color-blush-bomb-50: #ffe6ec;
  --color-blush-bomb-100: #ffd4df;
  --color-blush-bomb-200: #efbbc8;
  --color-blush-bomb-300: #dd9eaf;
  --color-blush-bomb-400: #be8293;
  --color-blush-bomb-500: #a4697a;
  --color-blush-bomb-600: #895262;
  --color-blush-bomb-700: #71404e;
  --color-blush-bomb-800: #5c313e;
  --color-blush-bomb-900: #4b2531;
  --color-blush-bomb-950: #30161e;
  --color-cajeta: #c1702e;
  --color-cajeta-50: #fff3eb;
  --color-cajeta-100: #ffe6d6;
  --color-cajeta-200: #ffcca9;
  --color-cajeta-300: #f8af7b;
  --color-cajeta-400: #dd8d51;
  --color-cajeta-500: #c1702e;
  --color-cajeta-600: #a25509;
  --color-cajeta-700: #834200;
  --color-cajeta-800: #673300;
  --color-cajeta-900: #502600;
  --color-cajeta-950: #341600;
  --color-teal: #007f7f;
  --color-teal-50: #d4fffe;
  --color-teal-100: #c0f8f7;
  --color-teal-200: #a3e7e6;
  --color-teal-300: #83d3d2;
  --color-teal-400: #58b5b4;
  --color-teal-500: #339a9a;
  --color-teal-600: #007f7f;
  --color-teal-700: #006565;
  --color-teal-800: #004f4f;
  --color-teal-900: #003d3d;
  --color-teal-950: #002626;
  --color-into-the-night: #0c3840;
  --color-into-the-night-50: #e3faff;
  --color-into-the-night-100: #d6f1f7;
  --color-into-the-night-200: #bedee5;
  --color-into-the-night-300: #a3c8d1;
  --color-into-the-night-400: #80a9b2;
  --color-into-the-night-500: #648e97;
  --color-into-the-night-600: #4a737b;
  --color-into-the-night-700: #365b63;
  --color-into-the-night-800: #26474e;
  --color-into-the-night-900: #0c3840;
  --color-into-the-night-950: #0e2226;
}