Strawberry Buttercream to Forest Empress color palette

FFB2FBStrawberry Buttercream 78206ABane of Royalty 7BA24AKiwi 929CEACold Lips 523DC9Royal Nightcore 457400Forest Empress

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Buttercream to Forest Empress is a 6-color vibrant, cool palette: #FFB2FB (Strawberry Buttercream), #78206A (Bane of Royalty), #7BA24A (Kiwi), #929CEA (Cold Lips), #523DC9 (Royal Nightcore), #457400 (Forest Empress). It mixes pink, purple, green tones and feels cool overall. The strongest text pairing is #FFB2FB on #78206A with a contrast ratio of 5.88:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Buttercream	rgb(255, 178, 251)	hsl(303, 100%, 85%)
Bane of Royalty	rgb(120, 32, 106)	hsl(310, 58%, 30%)
Kiwi	rgb(123, 162, 74)	hsl(87, 37%, 46%)
Cold Lips	rgb(146, 156, 234)	hsl(233, 68%, 75%)
Royal Nightcore	rgb(82, 61, 201)	hsl(249, 56%, 51%)
Forest Empress	rgb(69, 116, 0)	hsl(84, 100%, 23%)

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.88:1 Good#FFB2FB on #78206A
Aa5.88:1 Good#78206A on #FFB2FB
Aa4.53:1 Good#FFB2FB on #523DC9
Aa4.53:1 Good#523DC9 on #FFB2FB
Aa3.69:1 Poor#78206A on #929CEA
Aa3.69:1 Poor#929CEA on #78206A
Aa3.47:1 Poor#FFB2FB on #457400
Aa3.47:1 Poor#457400 on #FFB2FB

Color blindness preview

CSS variables

/* Strawberry Buttercream to Forest Empress — https://swatchly.xyz/palette/ffb2fb-78206a-7ba24a-929cea-523dc9-457400 */
:root {
  --strawberry-buttercream: #ffb2fb;
  --bane-of-royalty: #78206a;
  --kiwi: #7ba24a;
  --cold-lips: #929cea;
  --royal-nightcore: #523dc9;
  --forest-empress: #457400;
}

Tailwind CSS v4

/* Strawberry Buttercream to Forest Empress — https://swatchly.xyz/palette/ffb2fb-78206a-7ba24a-929cea-523dc9-457400 */
@theme {
  --color-strawberry-buttercream: #ffb2fb;
  --color-strawberry-buttercream-50: #ffe8fd;
  --color-strawberry-buttercream-100: #ffd6fc;
  --color-strawberry-buttercream-200: #ffb2fb;
  --color-strawberry-buttercream-300: #e3a1e0;
  --color-strawberry-buttercream-400: #c780c4;
  --color-strawberry-buttercream-500: #ac65a9;
  --color-strawberry-buttercream-600: #904c8e;
  --color-strawberry-buttercream-700: #763975;
  --color-strawberry-buttercream-800: #60295f;
  --color-strawberry-buttercream-900: #4c1d4b;
  --color-strawberry-buttercream-950: #311030;
  --color-bane-of-royalty: #78206a;
  --color-bane-of-royalty-50: #fff0fb;
  --color-bane-of-royalty-100: #ffe1f7;
  --color-bane-of-royalty-200: #ffc1f0;
  --color-bane-of-royalty-300: #f5a3e3;
  --color-bane-of-royalty-400: #da81c8;
  --color-bane-of-royalty-500: #c065ae;
  --color-bane-of-royalty-600: #a44b94;
  --color-bane-of-royalty-700: #8a377c;
  --color-bane-of-royalty-800: #78206a;
  --color-bane-of-royalty-900: #5c1b51;
  --color-bane-of-royalty-950: #3d0d36;
  --color-kiwi: #7ba24a;
  --color-kiwi-50: #edffdb;
  --color-kiwi-100: #e1fac7;
  --color-kiwi-200: #cdebad;
  --color-kiwi-300: #b6d890;
  --color-kiwi-400: #96bb6a;
  --color-kiwi-500: #7ba24a;
  --color-kiwi-600: #5f842b;
  --color-kiwi-700: #486a11;
  --color-kiwi-800: #355300;
  --color-kiwi-900: #283f00;
  --color-kiwi-950: #172700;
  --color-cold-lips: #929cea;
  --color-cold-lips-50: #f3f5ff;
  --color-cold-lips-100: #e7ebff;
  --color-cold-lips-200: #cfd6ff;
  --color-cold-lips-300: #b3bdff;
  --color-cold-lips-400: #929cea;
  --color-cold-lips-500: #7780cb;
  --color-cold-lips-600: #5e65ad;
  --color-cold-lips-700: #494e90;
  --color-cold-lips-800: #373c75;
  --color-cold-lips-900: #2a2d5d;
  --color-cold-lips-950: #181b3d;
  --color-royal-nightcore: #523dc9;
  --color-royal-nightcore-50: #f3f4ff;
  --color-royal-nightcore-100: #e7e9ff;
  --color-royal-nightcore-200: #d2d5ff;
  --color-royal-nightcore-300: #b9bdff;
  --color-royal-nightcore-400: #9898ff;
  --color-royal-nightcore-500: #7c73ff;
  --color-royal-nightcore-600: #6557e2;
  --color-royal-nightcore-700: #523dc9;
  --color-royal-nightcore-800: #402da2;
  --color-royal-nightcore-900: #311e84;
  --color-royal-nightcore-950: #1e0f5a;
  --color-forest-empress: #457400;
  --color-forest-empress-50: #e5ffd2;
  --color-forest-empress-100: #d4f7ba;
  --color-forest-empress-200: #bbe49b;
  --color-forest-empress-300: #a0ce79;
  --color-forest-empress-400: #7cae4f;
  --color-forest-empress-500: #60912d;
  --color-forest-empress-600: #457400;
  --color-forest-empress-700: #365c00;
  --color-forest-empress-800: #294800;
  --color-forest-empress-900: #1f3800;
  --color-forest-empress-950: #112300;
}