Cinderella to Nightmare Color Palette

About this palette

Cinderella to Nightmare is a 4-color vintage palette: #FED2C4 (Cinderella), #B582A8 (Romanov Mauve), #006D65 (Pine Scented Lagoon), #041F1A (Nightmare). It mixes pink, turquoise, black tones and feels warm overall. The strongest text pairing is #FED2C4 on #041F1A with a contrast ratio of 12.52:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cinderella	rgb(254, 210, 196)	hsl(14, 97%, 88%)
Romanov Mauve	rgb(181, 130, 168)	hsl(315, 26%, 61%)
Pine Scented Lagoon	rgb(0, 109, 101)	hsl(176, 100%, 21%)
Nightmare	rgb(4, 31, 26)	hsl(169, 77%, 7%)

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.

Aa12.52:1 Super#FED2C4 on #041F1A
Aa12.52:1 Super#041F1A on #FED2C4
Aa5.53:1 Good#B582A8 on #041F1A
Aa5.53:1 Good#041F1A on #B582A8
Aa4.51:1 Good#FED2C4 on #006D65
Aa4.51:1 Good#006D65 on #FED2C4

Color blindness preview

CSS variables

/* Cinderella to Nightmare — https://swatchly.xyz/palette/fed2c4-b582a8-006d65-041f1a */
:root {
  --cinderella: #fed2c4;
  --romanov-mauve: #b582a8;
  --pine-scented-lagoon: #006d65;
  --nightmare: #041f1a;
}

Tailwind CSS v4

/* Cinderella to Nightmare — https://swatchly.xyz/palette/fed2c4-b582a8-006d65-041f1a */
@theme {
  --color-cinderella: #fed2c4;
  --color-cinderella-50: #fff7f5;
  --color-cinderella-100: #ffebe5;
  --color-cinderella-200: #fed2c4;
  --color-cinderella-300: #e0bcb1;
  --color-cinderella-400: #c29b8e;
  --color-cinderella-500: #a67e72;
  --color-cinderella-600: #896357;
  --color-cinderella-700: #6f4d42;
  --color-cinderella-800: #573a31;
  --color-cinderella-900: #452c24;
  --color-cinderella-950: #2c1a15;
  --color-romanov-mauve: #b582a8;
  --color-romanov-mauve-50: #ffe9f9;
  --color-romanov-mauve-100: #fdd8f2;
  --color-romanov-mauve-200: #eabfdf;
  --color-romanov-mauve-300: #d5a5c8;
  --color-romanov-mauve-400: #b582a8;
  --color-romanov-mauve-500: #9b698e;
  --color-romanov-mauve-600: #805275;
  --color-romanov-mauve-700: #69405f;
  --color-romanov-mauve-800: #54314c;
  --color-romanov-mauve-900: #44253c;
  --color-romanov-mauve-950: #2d1628;
  --color-pine-scented-lagoon: #006d65;
  --color-pine-scented-lagoon-50: #d7fff9;
  --color-pine-scented-lagoon-100: #c5f7f0;
  --color-pine-scented-lagoon-200: #abe7df;
  --color-pine-scented-lagoon-300: #8ed4cb;
  --color-pine-scented-lagoon-400: #67b7ae;
  --color-pine-scented-lagoon-500: #479d94;
  --color-pine-scented-lagoon-600: #2a837b;
  --color-pine-scented-lagoon-700: #006d65;
  --color-pine-scented-lagoon-800: #00554f;
  --color-pine-scented-lagoon-900: #00423d;
  --color-pine-scented-lagoon-950: #002a26;
  --color-nightmare: #041f1a;
  --color-nightmare-50: #e8faf5;
  --color-nightmare-100: #ddf0eb;
  --color-nightmare-200: #c6ddd8;
  --color-nightmare-300: #adc8c1;
  --color-nightmare-400: #8ca9a2;
  --color-nightmare-500: #6f8c85;
  --color-nightmare-600: #55706a;
  --color-nightmare-700: #3f5852;
  --color-nightmare-800: #2e433e;
  --color-nightmare-900: #20322e;
  --color-nightmare-950: #041f1a;
}