Light Pink to Ballet Slippers color palette

FFD3DFLight Pink 005447Cape Verde 4C0C2CWhat We Do in the Shadows 009F84Paolo Veronese Green FF9AB1Ballet Slippers

Open in generator Export PNG, PDF, ASE…

About this palette

Light Pink to Ballet Slippers is a 5-color warm, vintage palette: #FFD3DF (Light Pink), #005447 (Cape Verde), #4C0C2C (What We Do in the Shadows), #009F84 (Paolo Veronese Green), #FF9AB1 (Ballet Slippers). It mixes pink, turquoise, red tones and feels warm overall. The strongest text pairing is #FFD3DF on #4C0C2C with a contrast ratio of 11.20:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Light Pink	rgb(255, 211, 223)	hsl(344, 100%, 91%)
Cape Verde	rgb(0, 84, 71)	hsl(171, 100%, 16%)
What We Do in the Shadows	rgb(76, 12, 44)	hsl(330, 73%, 17%)
Paolo Veronese Green	rgb(0, 159, 132)	hsl(170, 100%, 31%)
Ballet Slippers	rgb(255, 154, 177)	hsl(346, 100%, 80%)

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.20:1 Very good#FFD3DF on #4C0C2C
Aa11.20:1 Very good#4C0C2C on #FFD3DF
Aa7.53:1 Very good#4C0C2C on #FF9AB1
Aa7.53:1 Very good#FF9AB1 on #4C0C2C
Aa6.63:1 Good#FFD3DF on #005447
Aa6.63:1 Good#005447 on #FFD3DF
Aa4.51:1 Good#4C0C2C on #009F84
Aa4.51:1 Good#009F84 on #4C0C2C

Color blindness preview

CSS variables

/* Light Pink to Ballet Slippers — https://swatchly.xyz/palette/ffd3df-005447-4c0c2c-009f84-ff9ab1 */
:root {
  --light-pink: #ffd3df;
  --cape-verde: #005447;
  --what-we-do-in-the-shadows: #4c0c2c;
  --paolo-veronese-green: #009f84;
  --ballet-slippers: #ff9ab1;
}

Tailwind CSS v4

/* Light Pink to Ballet Slippers — https://swatchly.xyz/palette/ffd3df-005447-4c0c2c-009f84-ff9ab1 */
@theme {
  --color-light-pink: #ffd3df;
  --color-light-pink-50: #fffafb;
  --color-light-pink-100: #ffeef2;
  --color-light-pink-200: #ffd3df;
  --color-light-pink-300: #e1bdc7;
  --color-light-pink-400: #c29ba6;
  --color-light-pink-500: #a57e89;
  --color-light-pink-600: #88626d;
  --color-light-pink-700: #6d4b55;
  --color-light-pink-800: #563941;
  --color-light-pink-900: #432b32;
  --color-light-pink-950: #2b191f;
  --color-cape-verde: #005447;
  --color-cape-verde-50: #dafff5;
  --color-cape-verde-100: #ccf6eb;
  --color-cape-verde-200: #b2e4d7;
  --color-cape-verde-300: #96d0c1;
  --color-cape-verde-400: #72b2a3;
  --color-cape-verde-500: #549889;
  --color-cape-verde-600: #3a7d6f;
  --color-cape-verde-700: #256659;
  --color-cape-verde-800: #005447;
  --color-cape-verde-900: #0a4037;
  --color-cape-verde-950: #032922;
  --color-what-we-do-in-the-shadows: #4c0c2c;
  --color-what-we-do-in-the-shadows-50: #fff1f6;
  --color-what-we-do-in-the-shadows-100: #ffe2ec;
  --color-what-we-do-in-the-shadows-200: #ffc5da;
  --color-what-we-do-in-the-shadows-300: #eeabc3;
  --color-what-we-do-in-the-shadows-400: #cf86a2;
  --color-what-we-do-in-the-shadows-500: #b16985;
  --color-what-we-do-in-the-shadows-600: #914e69;
  --color-what-we-do-in-the-shadows-700: #743851;
  --color-what-we-do-in-the-shadows-800: #59273c;
  --color-what-we-do-in-the-shadows-900: #4c0c2c;
  --color-what-we-do-in-the-shadows-950: #290d19;
  --color-paolo-veronese-green: #009f84;
  --color-paolo-veronese-green-50: #dbfff4;
  --color-paolo-veronese-green-100: #b9fde9;
  --color-paolo-veronese-green-200: #99ecd5;
  --color-paolo-veronese-green-300: #76d8bf;
  --color-paolo-veronese-green-400: #44ba9f;
  --color-paolo-veronese-green-500: #009f84;
  --color-paolo-veronese-green-600: #00806a;
  --color-paolo-veronese-green-700: #006654;
  --color-paolo-veronese-green-800: #005041;
  --color-paolo-veronese-green-900: #003d32;
  --color-paolo-veronese-green-950: #00261e;
  --color-ballet-slippers: #ff9ab1;
  --color-ballet-slippers-50: #ffeef1;
  --color-ballet-slippers-100: #ffdfe4;
  --color-ballet-slippers-200: #ffc0cd;
  --color-ballet-slippers-300: #ff9ab1;
  --color-ballet-slippers-400: #db7d93;
  --color-ballet-slippers-500: #bf6179;
  --color-ballet-slippers-600: #a14860;
  --color-ballet-slippers-700: #85344b;
  --color-ballet-slippers-800: #6c253a;
  --color-ballet-slippers-900: #571a2c;
  --color-ballet-slippers-950: #390d1a;
}