Cinderella to Black Stallion Color Palette

About this palette

Cinderella to Black Stallion is a 5-color cool, vintage palette: #FFD5C4 (Cinderella), #8EBEFF (Pastel Blue), #B46243 (Caramel Dream), #005E5A (Mosque), #001F1D (Black Stallion). It mixes orange, blue, turquoise tones and feels cool overall. The strongest text pairing is #FFD5C4 on #001F1D with a contrast ratio of 12.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cinderella	rgb(255, 213, 196)	hsl(17, 100%, 88%)
Pastel Blue	rgb(142, 190, 255)	hsl(215, 100%, 78%)
Caramel Dream	rgb(180, 98, 67)	hsl(16, 46%, 48%)
Mosque	rgb(0, 94, 90)	hsl(177, 100%, 18%)
Black Stallion	rgb(0, 31, 29)	hsl(176, 100%, 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.

Aa12.83:1 Super#FFD5C4 on #001F1D
Aa12.83:1 Super#001F1D on #FFD5C4
Aa9.03:1 Very good#8EBEFF on #001F1D
Aa9.03:1 Very good#001F1D on #8EBEFF
Aa5.66:1 Good#FFD5C4 on #005E5A
Aa5.66:1 Good#005E5A on #FFD5C4
Aa3.99:1 Poor#8EBEFF on #005E5A
Aa3.99:1 Poor#005E5A on #8EBEFF

Color blindness preview

CSS variables

/* Cinderella to Black Stallion — https://swatchly.xyz/palette/ffd5c4-8ebeff-b46243-005e5a-001f1d */
:root {
  --cinderella: #ffd5c4;
  --pastel-blue: #8ebeff;
  --caramel-dream: #b46243;
  --mosque: #005e5a;
  --black-stallion: #001f1d;
}

Tailwind CSS v4

/* Cinderella to Black Stallion — https://swatchly.xyz/palette/ffd5c4-8ebeff-b46243-005e5a-001f1d */
@theme {
  --color-cinderella: #ffd5c4;
  --color-cinderella-50: #fff9f7;
  --color-cinderella-100: #ffeee7;
  --color-cinderella-200: #ffd5c4;
  --color-cinderella-300: #e1bfb1;
  --color-cinderella-400: #c39d8e;
  --color-cinderella-500: #a68070;
  --color-cinderella-600: #896556;
  --color-cinderella-700: #6e4e40;
  --color-cinderella-800: #573b2f;
  --color-cinderella-900: #442c23;
  --color-cinderella-950: #2b1b14;
  --color-pastel-blue: #8ebeff;
  --color-pastel-blue-50: #eaf3ff;
  --color-pastel-blue-100: #d9e9ff;
  --color-pastel-blue-200: #b7d5ff;
  --color-pastel-blue-300: #8ebeff;
  --color-pastel-blue-400: #729fdc;
  --color-pastel-blue-500: #5784c1;
  --color-pastel-blue-600: #3f6aa4;
  --color-pastel-blue-700: #2d5489;
  --color-pastel-blue-800: #1f4270;
  --color-pastel-blue-900: #15335a;
  --color-pastel-blue-950: #0a1f3b;
  --color-caramel-dream: #b46243;
  --color-caramel-dream-50: #ffefea;
  --color-caramel-dream-100: #ffe0d4;
  --color-caramel-dream-200: #ffc1ab;
  --color-caramel-dream-300: #f2a386;
  --color-caramel-dream-400: #d38061;
  --color-caramel-dream-500: #b46243;
  --color-caramel-dream-600: #974a2d;
  --color-caramel-dream-700: #7c381c;
  --color-caramel-dream-800: #652911;
  --color-caramel-dream-900: #511e09;
  --color-caramel-dream-950: #361103;
  --color-mosque: #005e5a;
  --color-mosque-50: #d7fffb;
  --color-mosque-100: #c9f6f2;
  --color-mosque-200: #ade3df;
  --color-mosque-300: #8ecdc8;
  --color-mosque-400: #67aea9;
  --color-mosque-500: #47928d;
  --color-mosque-600: #2a7671;
  --color-mosque-700: #005e5a;
  --color-mosque-800: #044946;
  --color-mosque-900: #003936;
  --color-mosque-950: #002322;
  --color-black-stallion: #001f1d;
  --color-black-stallion-50: #e7faf8;
  --color-black-stallion-100: #dbf1ee;
  --color-black-stallion-200: #c4dedb;
  --color-black-stallion-300: #abc8c5;
  --color-black-stallion-400: #89a9a6;
  --color-black-stallion-500: #6c8d89;
  --color-black-stallion-600: #51716e;
  --color-black-stallion-700: #3c5856;
  --color-black-stallion-800: #2b4341;
  --color-black-stallion-900: #1e3230;
  --color-black-stallion-950: #001f1d;
}