Sweetly to Romanic Scene Color Palette

About this palette

Sweetly to Romanic Scene is a 5-color gradient palette: #FFE5F3 (Sweetly), #EC91FD (Party Pig), #CC61A7 (Sugar Rush), #AF0041 (Bindi Red), #41034E (Romanic Scene). It mixes white, purple, pink, red tones and feels balanced overall. The strongest text pairing is #FFE5F3 on #41034E with a contrast ratio of 13.17:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sweetly	rgb(255, 229, 243)	hsl(328, 100%, 95%)
Party Pig	rgb(236, 145, 253)	hsl(291, 96%, 78%)
Sugar Rush	rgb(204, 97, 167)	hsl(321, 51%, 59%)
Bindi Red	rgb(175, 0, 65)	hsl(338, 100%, 34%)
Romanic Scene	rgb(65, 3, 78)	hsl(290, 93%, 16%)

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.

Aa13.17:1 Super#FFE5F3 on #41034E
Aa13.17:1 Super#41034E on #FFE5F3
Aa7.45:1 Very good#EC91FD on #41034E
Aa7.45:1 Very good#41034E on #EC91FD
Aa6.12:1 Good#FFE5F3 on #AF0041
Aa6.12:1 Good#AF0041 on #FFE5F3
Aa4.33:1 Poor#CC61A7 on #41034E
Aa4.33:1 Poor#41034E on #CC61A7

Color blindness preview

CSS variables

/* Sweetly to Romanic Scene — https://swatchly.xyz/palette/ffe5f3-ec91fd-cc61a7-af0041-41034e */
:root {
  --sweetly: #ffe5f3;
  --party-pig: #ec91fd;
  --sugar-rush: #cc61a7;
  --bindi-red: #af0041;
  --romanic-scene: #41034e;
}

Tailwind CSS v4

/* Sweetly to Romanic Scene — https://swatchly.xyz/palette/ffe5f3-ec91fd-cc61a7-af0041-41034e */
@theme {
  --color-sweetly: #ffe5f3;
  --color-sweetly-50: #fff3f9;
  --color-sweetly-100: #ffe5f3;
  --color-sweetly-200: #e6d3dd;
  --color-sweetly-300: #d1bbc7;
  --color-sweetly-400: #b29ba7;
  --color-sweetly-500: #967f8c;
  --color-sweetly-600: #7b6571;
  --color-sweetly-700: #624f59;
  --color-sweetly-800: #4e3d46;
  --color-sweetly-900: #3c2e36;
  --color-sweetly-950: #261c21;
  --color-party-pig: #ec91fd;
  --color-party-pig-50: #fcebff;
  --color-party-pig-100: #f9daff;
  --color-party-pig-200: #f4b9ff;
  --color-party-pig-300: #ec91fd;
  --color-party-pig-400: #cb74db;
  --color-party-pig-500: #af58c0;
  --color-party-pig-600: #933ea3;
  --color-party-pig-700: #792b87;
  --color-party-pig-800: #621c6f;
  --color-party-pig-900: #4f1159;
  --color-party-pig-950: #33073b;
  --color-sugar-rush: #cc61a7;
  --color-sugar-rush-50: #fff2f9;
  --color-sugar-rush-100: #ffe5f4;
  --color-sugar-rush-200: #ffc9e9;
  --color-sugar-rush-300: #ffa4dc;
  --color-sugar-rush-400: #e67fc1;
  --color-sugar-rush-500: #cc61a7;
  --color-sugar-rush-600: #ac458a;
  --color-sugar-rush-700: #8e2e70;
  --color-sugar-rush-800: #731d59;
  --color-sugar-rush-900: #5a1145;
  --color-sugar-rush-950: #3b062c;
  --color-bindi-red: #af0041;
  --color-bindi-red-50: #fff1f2;
  --color-bindi-red-100: #ffe3e6;
  --color-bindi-red-200: #ffc9cf;
  --color-bindi-red-300: #ffa8b3;
  --color-bindi-red-400: #ff718a;
  --color-bindi-red-500: #e84c6e;
  --color-bindi-red-600: #c92d56;
  --color-bindi-red-700: #af0041;
  --color-bindi-red-800: #8b0032;
  --color-bindi-red-900: #6d0025;
  --color-bindi-red-950: #480016;
  --color-romanic-scene: #41034e;
  --color-romanic-scene-50: #fcf1ff;
  --color-romanic-scene-100: #f9e2ff;
  --color-romanic-scene-200: #f3c4ff;
  --color-romanic-scene-300: #e0aaee;
  --color-romanic-scene-400: #c388d2;
  --color-romanic-scene-500: #a96db8;
  --color-romanic-scene-600: #8f549d;
  --color-romanic-scene-700: #774184;
  --color-romanic-scene-800: #62316e;
  --color-romanic-scene-900: #51265b;
  --color-romanic-scene-950: #41034e;
}