Grape to Our Little Secret Color Palette

About this palette

Grape to Our Little Secret is a 5-color warm, monochromatic palette: #673351 (Grape), #2B131F (Black Cherry), #D77EBD (Pink Punk), #FBB1D9 (Lavender Candy), #B04C89 (Our Little Secret). It mixes red, pink tones and feels warm overall. The strongest text pairing is #2B131F on #FBB1D9 with a contrast ratio of 10.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grape	rgb(103, 51, 81)	hsl(325, 34%, 30%)
Black Cherry	rgb(43, 19, 31)	hsl(330, 39%, 12%)
Pink Punk	rgb(215, 126, 189)	hsl(318, 53%, 67%)
Lavender Candy	rgb(251, 177, 217)	hsl(328, 90%, 84%)
Our Little Secret	rgb(176, 76, 137)	hsl(323, 40%, 49%)

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.

Aa10.19:1 Very good#2B131F on #FBB1D9
Aa10.19:1 Very good#FBB1D9 on #2B131F
Aa6.26:1 Good#2B131F on #D77EBD
Aa6.26:1 Good#D77EBD on #2B131F
Aa5.71:1 Good#673351 on #FBB1D9
Aa5.71:1 Good#FBB1D9 on #673351
Aa3.51:1 Poor#673351 on #D77EBD
Aa3.51:1 Poor#D77EBD on #673351

Color blindness preview

CSS variables

/* Grape to Our Little Secret — https://swatchly.xyz/palette/673351-2b131f-d77ebd-fbb1d9-b04c89 */
:root {
  --grape: #673351;
  --black-cherry: #2b131f;
  --pink-punk: #d77ebd;
  --lavender-candy: #fbb1d9;
  --our-little-secret: #b04c89;
}

Tailwind CSS v4

/* Grape to Our Little Secret — https://swatchly.xyz/palette/673351-2b131f-d77ebd-fbb1d9-b04c89 */
@theme {
  --color-grape: #673351;
  --color-grape-50: #fff0f8;
  --color-grape-100: #ffe2f0;
  --color-grape-200: #f7c8e0;
  --color-grape-300: #e5b0cc;
  --color-grape-400: #c98fae;
  --color-grape-500: #ae7494;
  --color-grape-600: #935b7a;
  --color-grape-700: #794763;
  --color-grape-800: #673351;
  --color-grape-900: #4e283e;
  --color-grape-950: #331727;
  --color-black-cherry: #2b131f;
  --color-black-cherry-50: #fff1f7;
  --color-black-cherry-100: #fae4ee;
  --color-black-cherry-200: #e9cfda;
  --color-black-cherry-300: #d5b8c4;
  --color-black-cherry-400: #b797a5;
  --color-black-cherry-500: #9b7b89;
  --color-black-cherry-600: #7e616e;
  --color-black-cherry-700: #654b57;
  --color-black-cherry-800: #4f3843;
  --color-black-cherry-900: #3c2a32;
  --color-black-cherry-950: #2b131f;
  --color-pink-punk: #d77ebd;
  --color-pink-punk-50: #fff0fa;
  --color-pink-punk-100: #ffe1f4;
  --color-pink-punk-200: #ffc1eb;
  --color-pink-punk-300: #f2a3d9;
  --color-pink-punk-400: #d77ebd;
  --color-pink-punk-500: #b963a1;
  --color-pink-punk-600: #9b4985;
  --color-pink-punk-700: #7f356c;
  --color-pink-punk-800: #672556;
  --color-pink-punk-900: #511943;
  --color-pink-punk-950: #350d2b;
  --color-lavender-candy: #fbb1d9;
  --color-lavender-candy-50: #fff8fc;
  --color-lavender-candy-100: #ffecf6;
  --color-lavender-candy-200: #ffd1e9;
  --color-lavender-candy-300: #fbb1d9;
  --color-lavender-candy-400: #d592b6;
  --color-lavender-candy-500: #b87399;
  --color-lavender-candy-600: #99587d;
  --color-lavender-candy-700: #7c4163;
  --color-lavender-candy-800: #632f4d;
  --color-lavender-candy-900: #4d223b;
  --color-lavender-candy-950: #321325;
  --color-our-little-secret: #b04c89;
  --color-our-little-secret-50: #fff0f8;
  --color-our-little-secret-100: #ffe5f2;
  --color-our-little-secret-200: #ffc9e6;
  --color-our-little-secret-300: #ffa6d8;
  --color-our-little-secret-400: #e683bc;
  --color-our-little-secret-500: #cc66a3;
  --color-our-little-secret-600: #b04c89;
  --color-our-little-secret-700: #91356f;
  --color-our-little-secret-800: #762358;
  --color-our-little-secret-900: #5d1644;
  --color-our-little-secret-950: #3d0a2b;
}