Royal Crown to Kisses and Hugs color palette

4F3057Royal Crown 864E91Prunella FD9DD0Violet Kiss D64285Kirby F86274Kisses and Hugs

About this palette

Royal Crown to Kisses and Hugs is a 5-color vibrant, warm palette: #4F3057 (Royal Crown), #864E91 (Prunella), #FD9DD0 (Violet Kiss), #D64285 (Kirby), #F86274 (Kisses and Hugs). It mixes purple, pink, red tones and feels warm overall. The strongest text pairing is #4F3057 on #FD9DD0 with a contrast ratio of 5.76:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Crown	rgb(79, 48, 87)	hsl(288, 29%, 26%)
Prunella	rgb(134, 78, 145)	hsl(290, 30%, 44%)
Violet Kiss	rgb(253, 157, 208)	hsl(328, 96%, 80%)
Kirby	rgb(214, 66, 133)	hsl(333, 64%, 55%)
Kisses and Hugs	rgb(248, 98, 116)	hsl(353, 91%, 68%)

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.

Aa5.76:1 Good#4F3057 on #FD9DD0
Aa5.76:1 Good#FD9DD0 on #4F3057
Aa3.69:1 Poor#4F3057 on #F86274
Aa3.69:1 Poor#F86274 on #4F3057
Aa3.11:1 Poor#864E91 on #FD9DD0
Aa3.11:1 Poor#FD9DD0 on #864E91

Color blindness preview

CSS variables

/* Royal Crown to Kisses and Hugs — https://swatchly.xyz/palette/4f3057-864e91-fd9dd0-d64285-f86274 */
:root {
  --royal-crown: #4f3057;
  --prunella: #864e91;
  --violet-kiss: #fd9dd0;
  --kirby: #d64285;
  --kisses-and-hugs: #f86274;
}

Tailwind CSS v4

/* Royal Crown to Kisses and Hugs — https://swatchly.xyz/palette/4f3057-864e91-fd9dd0-d64285-f86274 */
@theme {
  --color-royal-crown: #4f3057;
  --color-royal-crown-50: #fcf1ff;
  --color-royal-crown-100: #f9e2ff;
  --color-royal-crown-200: #e8ccef;
  --color-royal-crown-300: #d3b3db;
  --color-royal-crown-400: #b492bd;
  --color-royal-crown-500: #9875a1;
  --color-royal-crown-600: #7b5b84;
  --color-royal-crown-700: #62456a;
  --color-royal-crown-800: #4f3057;
  --color-royal-crown-900: #3b2641;
  --color-royal-crown-950: #251629;
  --color-prunella: #864e91;
  --color-prunella-50: #fdf0ff;
  --color-prunella-100: #fae0ff;
  --color-prunella-200: #f1c3fa;
  --color-prunella-300: #dda9e7;
  --color-prunella-400: #bf86ca;
  --color-prunella-500: #a369ae;
  --color-prunella-600: #864e91;
  --color-prunella-700: #6c3b76;
  --color-prunella-800: #572b5f;
  --color-prunella-900: #441f4b;
  --color-prunella-950: #2c1131;
  --color-violet-kiss: #fd9dd0;
  --color-violet-kiss-50: #fff0f7;
  --color-violet-kiss-100: #ffe1ef;
  --color-violet-kiss-200: #ffc2e1;
  --color-violet-kiss-300: #fd9dd0;
  --color-violet-kiss-400: #d980b0;
  --color-violet-kiss-500: #bd6394;
  --color-violet-kiss-600: #9e4979;
  --color-violet-kiss-700: #823561;
  --color-violet-kiss-800: #69254d;
  --color-violet-kiss-900: #531a3c;
  --color-violet-kiss-950: #370d26;
  --color-kirby: #d64285;
  --color-kirby-50: #fff0f5;
  --color-kirby-100: #ffe1ea;
  --color-kirby-200: #ffc2d6;
  --color-kirby-300: #ff9bc0;
  --color-kirby-400: #f464a1;
  --color-kirby-500: #d64285;
  --color-kirby-600: #b6246b;
  --color-kirby-700: #970755;
  --color-kirby-800: #790042;
  --color-kirby-900: #5f0033;
  --color-kirby-950: #3f0020;
  --color-kisses-and-hugs: #f86274;
  --color-kisses-and-hugs-50: #ffefef;
  --color-kisses-and-hugs-100: #ffdfe0;
  --color-kisses-and-hugs-200: #ffc1c4;
  --color-kisses-and-hugs-300: #ff9ca2;
  --color-kisses-and-hugs-400: #f86274;
  --color-kisses-and-hugs-500: #d9455b;
  --color-kisses-and-hugs-600: #b82843;
  --color-kisses-and-hugs-700: #9a0e31;
  --color-kisses-and-hugs-800: #7d0024;
  --color-kisses-and-hugs-900: #63001a;
  --color-kisses-and-hugs-950: #42000e;
}