Strawberry Bonbon to Grape Fizz color palette

FFE9FCStrawberry Bonbon D29ABESweet Perfume 10231ANightmare 4C9476Natural Orchestra 654459Grape Fizz

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Bonbon to Grape Fizz is a 5-color muted, vintage palette: #FFE9FC (Strawberry Bonbon), #D29ABE (Sweet Perfume), #10231A (Nightmare), #4C9476 (Natural Orchestra), #654459 (Grape Fizz). It mixes white, pink, gray, green, red tones and feels warm overall. The strongest text pairing is #FFE9FC on #10231A with a contrast ratio of 14.34:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Bonbon	rgb(255, 233, 252)	hsl(308, 100%, 96%)
Sweet Perfume	rgb(210, 154, 190)	hsl(321, 38%, 71%)
Nightmare	rgb(16, 35, 26)	hsl(152, 37%, 10%)
Natural Orchestra	rgb(76, 148, 118)	hsl(155, 32%, 44%)
Grape Fizz	rgb(101, 68, 89)	hsl(322, 20%, 33%)

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.

Aa14.34:1 Super#FFE9FC on #10231A
Aa14.34:1 Super#10231A on #FFE9FC
Aa7.25:1 Very good#FFE9FC on #654459
Aa7.25:1 Very good#654459 on #FFE9FC
Aa7.13:1 Very good#D29ABE on #10231A
Aa7.13:1 Very good#10231A on #D29ABE
Aa4.54:1 Good#10231A on #4C9476
Aa4.54:1 Good#4C9476 on #10231A

Color blindness preview

CSS variables

/* Strawberry Bonbon to Grape Fizz — https://swatchly.xyz/palette/ffe9fc-d29abe-10231a-4c9476-654459 */
:root {
  --strawberry-bonbon: #ffe9fc;
  --sweet-perfume: #d29abe;
  --nightmare: #10231a;
  --natural-orchestra: #4c9476;
  --grape-fizz: #654459;
}

Tailwind CSS v4

/* Strawberry Bonbon to Grape Fizz — https://swatchly.xyz/palette/ffe9fc-d29abe-10231a-4c9476-654459 */
@theme {
  --color-strawberry-bonbon: #ffe9fc;
  --color-strawberry-bonbon-50: #ffe9fc;
  --color-strawberry-bonbon-100: #f1e3ef;
  --color-strawberry-bonbon-200: #dfcfdd;
  --color-strawberry-bonbon-300: #cab8c8;
  --color-strawberry-bonbon-400: #ad99aa;
  --color-strawberry-bonbon-500: #927e8f;
  --color-strawberry-bonbon-600: #786575;
  --color-strawberry-bonbon-700: #604f5e;
  --color-strawberry-bonbon-800: #4c3d4a;
  --color-strawberry-bonbon-900: #3b2e39;
  --color-strawberry-bonbon-950: #251c24;
  --color-sweet-perfume: #d29abe;
  --color-sweet-perfume-50: #fff7fc;
  --color-sweet-perfume-100: #ffebf7;
  --color-sweet-perfume-200: #fbd2ec;
  --color-sweet-perfume-300: #eabcd9;
  --color-sweet-perfume-400: #d29abe;
  --color-sweet-perfume-500: #b27d9f;
  --color-sweet-perfume-600: #946082;
  --color-sweet-perfume-700: #784968;
  --color-sweet-perfume-800: #5f3651;
  --color-sweet-perfume-900: #49273e;
  --color-sweet-perfume-950: #2e1626;
  --color-nightmare: #10231a;
  --color-nightmare-50: #ecf9f2;
  --color-nightmare-100: #e1efe7;
  --color-nightmare-200: #cbdcd3;
  --color-nightmare-300: #b3c7bc;
  --color-nightmare-400: #92a89c;
  --color-nightmare-500: #768c80;
  --color-nightmare-600: #5c7166;
  --color-nightmare-700: #475a50;
  --color-nightmare-800: #36463e;
  --color-nightmare-900: #28362f;
  --color-nightmare-950: #10231a;
  --color-natural-orchestra: #4c9476;
  --color-natural-orchestra-50: #daffed;
  --color-natural-orchestra-100: #caf6e1;
  --color-natural-orchestra-200: #afe4cb;
  --color-natural-orchestra-300: #91cfb3;
  --color-natural-orchestra-400: #6bb092;
  --color-natural-orchestra-500: #4c9476;
  --color-natural-orchestra-600: #32795d;
  --color-natural-orchestra-700: #1d6148;
  --color-natural-orchestra-800: #0e4d37;
  --color-natural-orchestra-900: #053c2a;
  --color-natural-orchestra-950: #012619;
  --color-grape-fizz: #654459;
  --color-grape-fizz-50: #fff0f9;
  --color-grape-fizz-100: #fce3f2;
  --color-grape-fizz-200: #eaccde;
  --color-grape-fizz-300: #d5b3c8;
  --color-grape-fizz-400: #b692a8;
  --color-grape-fizz-500: #9a768c;
  --color-grape-fizz-600: #7d5b70;
  --color-grape-fizz-700: #654459;
  --color-grape-fizz-800: #4f3545;
  --color-grape-fizz-900: #3d2836;
  --color-grape-fizz-950: #271721;
}