Pretty in Pink to Grape Kiss Color Palette

About this palette

Pretty in Pink to Grape Kiss is a 4-color warm, vintage, monochromatic palette: #FBBEE3 (Pretty in Pink), #3D2237 (Castro), #BE75A0 (Fading Love), #824D6C (Grape Kiss). It mixes pink, purple, red tones and feels warm overall. The strongest text pairing is #FBBEE3 on #3D2237 with a contrast ratio of 9.16:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pretty in Pink	rgb(251, 190, 227)	hsl(324, 88%, 86%)
Castro	rgb(61, 34, 55)	hsl(313, 28%, 19%)
Fading Love	rgb(190, 117, 160)	hsl(325, 36%, 60%)
Grape Kiss	rgb(130, 77, 108)	hsl(325, 26%, 41%)

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.

Aa9.16:1 Very good#FBBEE3 on #3D2237
Aa9.16:1 Very good#3D2237 on #FBBEE3
Aa4.21:1 Poor#3D2237 on #BE75A0
Aa4.21:1 Poor#BE75A0 on #3D2237
Aa4.21:1 Poor#FBBEE3 on #824D6C
Aa4.21:1 Poor#824D6C on #FBBEE3

Color blindness preview

CSS variables

/* Pretty in Pink to Grape Kiss — https://swatchly.xyz/palette/fbbee3-3d2237-be75a0-824d6c */
:root {
  --pretty-in-pink: #fbbee3;
  --castro: #3d2237;
  --fading-love: #be75a0;
  --grape-kiss: #824d6c;
}

Tailwind CSS v4

/* Pretty in Pink to Grape Kiss — https://swatchly.xyz/palette/fbbee3-3d2237-be75a0-824d6c */
@theme {
  --color-pretty-in-pink: #fbbee3;
  --color-pretty-in-pink-50: #ffecf7;
  --color-pretty-in-pink-100: #ffdcf1;
  --color-pretty-in-pink-200: #fbbee3;
  --color-pretty-in-pink-300: #dfabcb;
  --color-pretty-in-pink-400: #c38bad;
  --color-pretty-in-pink-500: #a77092;
  --color-pretty-in-pink-600: #8b5778;
  --color-pretty-in-pink-700: #724361;
  --color-pretty-in-pink-800: #5c324d;
  --color-pretty-in-pink-900: #48253c;
  --color-pretty-in-pink-950: #2e1526;
  --color-castro: #3d2237;
  --color-castro-50: #fff0fb;
  --color-castro-100: #fae3f4;
  --color-castro-200: #e9cee2;
  --color-castro-300: #d4b6cc;
  --color-castro-400: #b595ad;
  --color-castro-500: #997890;
  --color-castro-600: #7c5d74;
  --color-castro-700: #62475b;
  --color-castro-800: #4b3446;
  --color-castro-900: #3d2237;
  --color-castro-950: #231620;
  --color-fading-love: #be75a0;
  --color-fading-love-50: #fff3f9;
  --color-fading-love-100: #ffe7f4;
  --color-fading-love-200: #ffcce8;
  --color-fading-love-300: #f2b2d6;
  --color-fading-love-400: #d791b9;
  --color-fading-love-500: #be75a0;
  --color-fading-love-600: #9f5983;
  --color-fading-love-700: #824269;
  --color-fading-love-800: #683053;
  --color-fading-love-900: #522240;
  --color-fading-love-950: #341328;
  --color-grape-kiss: #824d6c;
  --color-grape-kiss-50: #fff0f8;
  --color-grape-kiss-100: #ffdef0;
  --color-grape-kiss-200: #f3c3dd;
  --color-grape-kiss-300: #dea9c6;
  --color-grape-kiss-400: #be86a6;
  --color-grape-kiss-500: #a06988;
  --color-grape-kiss-600: #824d6c;
  --color-grape-kiss-700: #693b56;
  --color-grape-kiss-800: #542d44;
  --color-grape-kiss-900: #422135;
  --color-grape-kiss-950: #2b1321;
}