Cinderella to Evergreen Color Palette

About this palette

Cinderella to Evergreen is a 5-color cool, vintage palette: #FFD4C2 (Cinderella), #F495C1 (Pastel Magenta), #009BC8 (Blue Ocean), #00765E (Tropical Rainforest), #005B41 (Evergreen). It mixes orange, pink, blue, turquoise tones and feels cool overall. The strongest text pairing is #FFD4C2 on #005B41 with a contrast ratio of 6.00:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cinderella	rgb(255, 212, 194)	hsl(18, 100%, 88%)
Pastel Magenta	rgb(244, 149, 193)	hsl(332, 81%, 77%)
Blue Ocean	rgb(0, 155, 200)	hsl(194, 100%, 39%)
Tropical Rainforest	rgb(0, 118, 94)	hsl(168, 100%, 23%)
Evergreen	rgb(0, 91, 65)	hsl(163, 100%, 18%)

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.00:1 Good#FFD4C2 on #005B41
Aa6.00:1 Good#005B41 on #FFD4C2
Aa4.12:1 Poor#FFD4C2 on #00765E
Aa4.12:1 Poor#00765E on #FFD4C2
Aa3.85:1 Poor#F495C1 on #005B41
Aa3.85:1 Poor#005B41 on #F495C1

Color blindness preview

CSS variables

/* Cinderella to Evergreen — https://swatchly.xyz/palette/ffd4c2-f495c1-009bc8-00765e-005b41 */
:root {
  --cinderella: #ffd4c2;
  --pastel-magenta: #f495c1;
  --blue-ocean: #009bc8;
  --tropical-rainforest: #00765e;
  --evergreen: #005b41;
}

Tailwind CSS v4

/* Cinderella to Evergreen — https://swatchly.xyz/palette/ffd4c2-f495c1-009bc8-00765e-005b41 */
@theme {
  --color-cinderella: #ffd4c2;
  --color-cinderella-50: #fff8f6;
  --color-cinderella-100: #ffede6;
  --color-cinderella-200: #ffd4c2;
  --color-cinderella-300: #e1beb0;
  --color-cinderella-400: #c39c8c;
  --color-cinderella-500: #a67f6f;
  --color-cinderella-600: #896455;
  --color-cinderella-700: #6e4d3f;
  --color-cinderella-800: #573b2e;
  --color-cinderella-900: #442c22;
  --color-cinderella-950: #2c1a13;
  --color-pastel-magenta: #f495c1;
  --color-pastel-magenta-50: #ffe9f2;
  --color-pastel-magenta-100: #ffd8e8;
  --color-pastel-magenta-200: #ffb7d7;
  --color-pastel-magenta-300: #f495c1;
  --color-pastel-magenta-400: #d279a3;
  --color-pastel-magenta-500: #b75e89;
  --color-pastel-magenta-600: #9a4670;
  --color-pastel-magenta-700: #7f335a;
  --color-pastel-magenta-800: #682548;
  --color-pastel-magenta-900: #541a38;
  --color-pastel-magenta-950: #370d23;
  --color-blue-ocean: #009bc8;
  --color-blue-ocean-50: #ecf9ff;
  --color-blue-ocean-100: #d8f3ff;
  --color-blue-ocean-200: #ace5ff;
  --color-blue-ocean-300: #77d4fb;
  --color-blue-ocean-400: #45b6e1;
  --color-blue-ocean-500: #009bc8;
  --color-blue-ocean-600: #007da2;
  --color-blue-ocean-700: #006381;
  --color-blue-ocean-800: #004d65;
  --color-blue-ocean-900: #003b4e;
  --color-blue-ocean-950: #002432;
  --color-tropical-rainforest: #00765e;
  --color-tropical-rainforest-50: #dafff2;
  --color-tropical-rainforest-100: #c1f8e5;
  --color-tropical-rainforest-200: #a2e5cf;
  --color-tropical-rainforest-300: #81cfb7;
  --color-tropical-rainforest-400: #56af95;
  --color-tropical-rainforest-500: #329279;
  --color-tropical-rainforest-600: #00765e;
  --color-tropical-rainforest-700: #005e4a;
  --color-tropical-rainforest-800: #00493a;
  --color-tropical-rainforest-900: #00392c;
  --color-tropical-rainforest-950: #00241b;
  --color-evergreen: #005b41;
  --color-evergreen-50: #dbffee;
  --color-evergreen-100: #caf7e3;
  --color-evergreen-200: #aee4cc;
  --color-evergreen-300: #8ecdb2;
  --color-evergreen-400: #67ad90;
  --color-evergreen-500: #479073;
  --color-evergreen-600: #2b7359;
  --color-evergreen-700: #005b41;
  --color-evergreen-800: #084733;
  --color-evergreen-900: #023726;
  --color-evergreen-950: #002216;
}