Midnight Dreams to Pink Horror Color Palette

About this palette

Midnight Dreams to Pink Horror is a 4-color warm, vintage palette: #00212F (Midnight Dreams), #D8D687 (Treasury), #BE809C (Romanov Mauve), #8C2E66 (Pink Horror). It mixes blue, yellow, pink, red tones and feels warm overall. The strongest text pairing is #00212F on #D8D687 with a contrast ratio of 11.03:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Dreams	rgb(0, 33, 47)	hsl(198, 100%, 9%)
Treasury	rgb(216, 214, 135)	hsl(59, 51%, 69%)
Romanov Mauve	rgb(190, 128, 156)	hsl(333, 32%, 62%)
Pink Horror	rgb(140, 46, 102)	hsl(324, 51%, 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.

Aa11.03:1 Very good#00212F on #D8D687
Aa11.03:1 Very good#D8D687 on #00212F
Aa5.37:1 Good#00212F on #BE809C
Aa5.37:1 Good#BE809C on #00212F
Aa5.15:1 Good#D8D687 on #8C2E66
Aa5.15:1 Good#8C2E66 on #D8D687

Color blindness preview

CSS variables

/* Midnight Dreams to Pink Horror — https://swatchly.xyz/palette/00212f-d8d687-be809c-8c2e66 */
:root {
  --midnight-dreams: #00212f;
  --treasury: #d8d687;
  --romanov-mauve: #be809c;
  --pink-horror: #8c2e66;
}

Tailwind CSS v4

/* Midnight Dreams to Pink Horror — https://swatchly.xyz/palette/00212f-d8d687-be809c-8c2e66 */
@theme {
  --color-midnight-dreams: #00212f;
  --color-midnight-dreams-50: #eaf8ff;
  --color-midnight-dreams-100: #d9effb;
  --color-midnight-dreams-200: #c2dcea;
  --color-midnight-dreams-300: #a8c6d6;
  --color-midnight-dreams-400: #86a7b8;
  --color-midnight-dreams-500: #698b9d;
  --color-midnight-dreams-600: #507081;
  --color-midnight-dreams-700: #3b5968;
  --color-midnight-dreams-800: #2b4552;
  --color-midnight-dreams-900: #1e343f;
  --color-midnight-dreams-950: #00212f;
  --color-treasury: #d8d687;
  --color-treasury-50: #f4f4c7;
  --color-treasury-100: #eae9b7;
  --color-treasury-200: #d8d687;
  --color-treasury-300: #c2c07d;
  --color-treasury-400: #a4a257;
  --color-treasury-500: #8a8739;
  --color-treasury-600: #716d1e;
  --color-treasury-700: #5a5707;
  --color-treasury-800: #484500;
  --color-treasury-900: #373500;
  --color-treasury-950: #222100;
  --color-romanov-mauve: #be809c;
  --color-romanov-mauve-50: #ffeaf3;
  --color-romanov-mauve-100: #ffd8e9;
  --color-romanov-mauve-200: #f2bed4;
  --color-romanov-mauve-300: #dda3bd;
  --color-romanov-mauve-400: #be809c;
  --color-romanov-mauve-500: #a36783;
  --color-romanov-mauve-600: #88506a;
  --color-romanov-mauve-700: #6f3d55;
  --color-romanov-mauve-800: #5a2f43;
  --color-romanov-mauve-900: #482335;
  --color-romanov-mauve-950: #301522;
  --color-pink-horror: #8c2e66;
  --color-pink-horror-50: #fff1f7;
  --color-pink-horror-100: #ffe2f0;
  --color-pink-horror-200: #ffc4e1;
  --color-pink-horror-300: #fba1d0;
  --color-pink-horror-400: #df7eb2;
  --color-pink-horror-500: #c36198;
  --color-pink-horror-600: #a5477d;
  --color-pink-horror-700: #8c2e66;
  --color-pink-horror-800: #6f2250;
  --color-pink-horror-900: #58173e;
  --color-pink-horror-950: #3a0a27;
}