Pink Glitter to Nightmare Color Palette

About this palette

Pink Glitter to Nightmare is a 4-color vintage palette: #FFDFD8 (Pink Glitter), #EB7C73 (You’re Blushing), #0B68AE (Wing Commander), #031E17 (Nightmare). It mixes pink, red, blue, turquoise tones and feels balanced overall. The strongest text pairing is #FFDFD8 on #031E17 with a contrast ratio of 13.98:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pink Glitter	rgb(255, 223, 216)	hsl(11, 100%, 92%)
You’re Blushing	rgb(235, 124, 115)	hsl(4, 75%, 69%)
Wing Commander	rgb(11, 104, 174)	hsl(206, 88%, 36%)
Nightmare	rgb(3, 30, 23)	hsl(164, 82%, 6%)

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.

Aa13.98:1 Super#FFDFD8 on #031E17
Aa13.98:1 Super#031E17 on #FFDFD8
Aa6.38:1 Good#EB7C73 on #031E17
Aa6.38:1 Good#031E17 on #EB7C73
Aa4.66:1 Good#FFDFD8 on #0B68AE
Aa4.66:1 Good#0B68AE on #FFDFD8

Color blindness preview

CSS variables

/* Pink Glitter to Nightmare — https://swatchly.xyz/palette/ffdfd8-eb7c73-0b68ae-031e17 */
:root {
  --pink-glitter: #ffdfd8;
  --you-re-blushing: #eb7c73;
  --wing-commander: #0b68ae;
  --nightmare: #031e17;
}

Tailwind CSS v4

/* Pink Glitter to Nightmare — https://swatchly.xyz/palette/ffdfd8-eb7c73-0b68ae-031e17 */
@theme {
  --color-pink-glitter: #ffdfd8;
  --color-pink-glitter-50: #ffede9;
  --color-pink-glitter-100: #ffdfd8;
  --color-pink-glitter-200: #e6cec9;
  --color-pink-glitter-300: #d2b7b2;
  --color-pink-glitter-400: #b59892;
  --color-pink-glitter-500: #9a7d77;
  --color-pink-glitter-600: #7f645e;
  --color-pink-glitter-700: #674f49;
  --color-pink-glitter-800: #523d38;
  --color-pink-glitter-900: #402e2a;
  --color-pink-glitter-950: #281c19;
  --color-you-re-blushing: #eb7c73;
  --color-you-re-blushing-50: #fff1f0;
  --color-you-re-blushing-100: #ffe4e1;
  --color-you-re-blushing-200: #ffc8c2;
  --color-you-re-blushing-300: #ffa59c;
  --color-you-re-blushing-400: #eb7c73;
  --color-you-re-blushing-500: #cc6059;
  --color-you-re-blushing-600: #ac4640;
  --color-you-re-blushing-700: #8f312d;
  --color-you-re-blushing-800: #74211f;
  --color-you-re-blushing-900: #5c1615;
  --color-you-re-blushing-950: #3d0a09;
  --color-wing-commander: #0b68ae;
  --color-wing-commander-50: #eef6ff;
  --color-wing-commander-100: #daecff;
  --color-wing-commander-200: #b4d9ff;
  --color-wing-commander-300: #86c3ff;
  --color-wing-commander-400: #55a2ea;
  --color-wing-commander-500: #3385cd;
  --color-wing-commander-600: #0b68ae;
  --color-wing-commander-700: #00528d;
  --color-wing-commander-800: #004070;
  --color-wing-commander-900: #003158;
  --color-wing-commander-950: #001e3a;
  --color-nightmare: #031e17;
  --color-nightmare-50: #e8faf4;
  --color-nightmare-100: #ddf0ea;
  --color-nightmare-200: #c6ded6;
  --color-nightmare-300: #adc8bf;
  --color-nightmare-400: #8ca99f;
  --color-nightmare-500: #6f8c83;
  --color-nightmare-600: #547067;
  --color-nightmare-700: #3e5850;
  --color-nightmare-800: #2d433c;
  --color-nightmare-900: #1f312c;
  --color-nightmare-950: #031e17;
}