Frozen Periwinkle to Grape Candy color palette

C4D1FFFrozen Periwinkle 927F3EPeas Please FFDEFFBunny Tail 2B563CHighlander 7DA6EEFennel Flower 8F5787Grape Candy

Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Periwinkle to Grape Candy is a 6-color cool palette: #C4D1FF (Frozen Periwinkle), #927F3E (Peas Please), #FFDEFF (Bunny Tail), #2B563C (Highlander), #7DA6EE (Fennel Flower), #8F5787 (Grape Candy). It mixes blue, yellow, pink, green tones and feels cool overall. The strongest text pairing is #FFDEFF on #2B563C with a contrast ratio of 6.86:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frozen Periwinkle	rgb(196, 209, 255)	hsl(227, 100%, 88%)
Peas Please	rgb(146, 127, 62)	hsl(46, 40%, 41%)
Bunny Tail	rgb(255, 222, 255)	hsl(300, 100%, 94%)
Highlander	rgb(43, 86, 60)	hsl(144, 33%, 25%)
Fennel Flower	rgb(125, 166, 238)	hsl(218, 77%, 71%)
Grape Candy	rgb(143, 87, 135)	hsl(309, 24%, 45%)

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.

Aa6.86:1 Good#FFDEFF on #2B563C
Aa6.86:1 Good#2B563C on #FFDEFF
Aa5.57:1 Good#C4D1FF on #2B563C
Aa5.57:1 Good#2B563C on #C4D1FF
Aa4.42:1 Poor#FFDEFF on #8F5787
Aa4.42:1 Poor#8F5787 on #FFDEFF
Aa3.58:1 Poor#C4D1FF on #8F5787
Aa3.58:1 Poor#8F5787 on #C4D1FF

Color blindness preview

CSS variables

/* Frozen Periwinkle to Grape Candy — https://swatchly.xyz/palette/c4d1ff-927f3e-ffdeff-2b563c-7da6ee-8f5787 */
:root {
  --frozen-periwinkle: #c4d1ff;
  --peas-please: #927f3e;
  --bunny-tail: #ffdeff;
  --highlander: #2b563c;
  --fennel-flower: #7da6ee;
  --grape-candy: #8f5787;
}

Tailwind CSS v4

/* Frozen Periwinkle to Grape Candy — https://swatchly.xyz/palette/c4d1ff-927f3e-ffdeff-2b563c-7da6ee-8f5787 */
@theme {
  --color-frozen-periwinkle: #c4d1ff;
  --color-frozen-periwinkle-50: #eef2ff;
  --color-frozen-periwinkle-100: #dfe6ff;
  --color-frozen-periwinkle-200: #c4d1ff;
  --color-frozen-periwinkle-300: #b0bce3;
  --color-frozen-periwinkle-400: #919dc7;
  --color-frozen-periwinkle-500: #7682ac;
  --color-frozen-periwinkle-600: #5e6890;
  --color-frozen-periwinkle-700: #495276;
  --color-frozen-periwinkle-800: #384060;
  --color-frozen-periwinkle-900: #2a314c;
  --color-frozen-periwinkle-950: #191e31;
  --color-peas-please: #927f3e;
  --color-peas-please-50: #fff4d0;
  --color-peas-please-100: #f5e9bf;
  --color-peas-please-200: #e3d4a2;
  --color-peas-please-300: #cdbc84;
  --color-peas-please-400: #ae9b5d;
  --color-peas-please-500: #927f3e;
  --color-peas-please-600: #786625;
  --color-peas-please-700: #615013;
  --color-peas-please-800: #4d3e05;
  --color-peas-please-900: #3c3000;
  --color-peas-please-950: #261e00;
  --color-bunny-tail: #ffdeff;
  --color-bunny-tail-50: #ffeeff;
  --color-bunny-tail-100: #ffdeff;
  --color-bunny-tail-200: #e6cee6;
  --color-bunny-tail-300: #d1b6d1;
  --color-bunny-tail-400: #b396b4;
  --color-bunny-tail-500: #987a98;
  --color-bunny-tail-600: #7d617d;
  --color-bunny-tail-700: #654b65;
  --color-bunny-tail-800: #503a50;
  --color-bunny-tail-900: #3e2b3e;
  --color-bunny-tail-950: #271a27;
  --color-highlander: #2b563c;
  --color-highlander-50: #e3fdeb;
  --color-highlander-100: #d7f4e0;
  --color-highlander-200: #bfe2ca;
  --color-highlander-300: #a7ceb4;
  --color-highlander-400: #86b195;
  --color-highlander-500: #6b977a;
  --color-highlander-600: #527e62;
  --color-highlander-700: #3f684e;
  --color-highlander-800: #2b563c;
  --color-highlander-900: #22422e;
  --color-highlander-950: #132b1c;
  --color-fennel-flower: #7da6ee;
  --color-fennel-flower-50: #f2f7ff;
  --color-fennel-flower-100: #e4eeff;
  --color-fennel-flower-200: #c7dcff;
  --color-fennel-flower-300: #a5c6ff;
  --color-fennel-flower-400: #7da6ee;
  --color-fennel-flower-500: #6289cf;
  --color-fennel-flower-600: #486db0;
  --color-fennel-flower-700: #345692;
  --color-fennel-flower-800: #244277;
  --color-fennel-flower-900: #19325e;
  --color-fennel-flower-950: #0c1e3e;
  --color-grape-candy: #8f5787;
  --color-grape-candy-50: #fff0fc;
  --color-grape-candy-100: #ffe1f9;
  --color-grape-candy-200: #f6c7ee;
  --color-grape-candy-300: #e3aeda;
  --color-grape-candy-400: #c68dbd;
  --color-grape-candy-500: #ab71a2;
  --color-grape-candy-600: #8f5787;
  --color-grape-candy-700: #74426d;
  --color-grape-candy-800: #5d3157;
  --color-grape-candy-900: #492444;
  --color-grape-candy-950: #2f142c;
}