Strawberry Buttercream to Waikiki Color Palette

About this palette

Strawberry Buttercream to Waikiki is a 5-color cool palette: #F6AEFD (Strawberry Buttercream), #D39600 (Retro Vibe), #462C47 (Murasaki), #795700 (Coffee Adept), #008B9A (Waikiki). It mixes pink, yellow, purple, brown, turquoise tones and feels cool overall. The strongest text pairing is #F6AEFD on #462C47 with a contrast ratio of 7.24:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Buttercream	rgb(246, 174, 253)	hsl(295, 95%, 84%)
Retro Vibe	rgb(211, 150, 0)	hsl(43, 100%, 41%)
Murasaki	rgb(70, 44, 71)	hsl(298, 23%, 23%)
Coffee Adept	rgb(121, 87, 0)	hsl(43, 100%, 24%)
Waikiki	rgb(0, 139, 154)	hsl(186, 100%, 30%)

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.

Aa7.24:1 Very good#F6AEFD on #462C47
Aa7.24:1 Very good#462C47 on #F6AEFD
Aa4.75:1 Good#D39600 on #462C47
Aa4.75:1 Good#462C47 on #D39600
Aa3.90:1 Poor#F6AEFD on #795700
Aa3.90:1 Poor#795700 on #F6AEFD
Aa3.01:1 Poor#462C47 on #008B9A
Aa3.01:1 Poor#008B9A on #462C47

Color blindness preview

CSS variables

/* Strawberry Buttercream to Waikiki — https://swatchly.xyz/palette/f6aefd-d39600-462c47-795700-008b9a */
:root {
  --strawberry-buttercream: #f6aefd;
  --retro-vibe: #d39600;
  --murasaki: #462c47;
  --coffee-adept: #795700;
  --waikiki: #008b9a;
}

Tailwind CSS v4

/* Strawberry Buttercream to Waikiki — https://swatchly.xyz/palette/f6aefd-d39600-462c47-795700-008b9a */
@theme {
  --color-strawberry-buttercream: #f6aefd;
  --color-strawberry-buttercream-50: #fff9ff;
  --color-strawberry-buttercream-100: #feecff;
  --color-strawberry-buttercream-200: #fbd0ff;
  --color-strawberry-buttercream-300: #f6aefd;
  --color-strawberry-buttercream-400: #d08fd7;
  --color-strawberry-buttercream-500: #b370ba;
  --color-strawberry-buttercream-600: #95539c;
  --color-strawberry-buttercream-700: #793d7f;
  --color-strawberry-buttercream-800: #602b65;
  --color-strawberry-buttercream-900: #4a1e4f;
  --color-strawberry-buttercream-950: #301033;
  --color-retro-vibe: #d39600;
  --color-retro-vibe-50: #fff4e3;
  --color-retro-vibe-100: #ffe9c5;
  --color-retro-vibe-200: #ffd083;
  --color-retro-vibe-300: #edb85b;
  --color-retro-vibe-400: #d39600;
  --color-retro-vibe-500: #b07c00;
  --color-retro-vibe-600: #8e6400;
  --color-retro-vibe-700: #714f00;
  --color-retro-vibe-800: #593d00;
  --color-retro-vibe-900: #452e00;
  --color-retro-vibe-950: #2c1c00;
  --color-murasaki: #462c47;
  --color-murasaki-50: #ffefff;
  --color-murasaki-100: #f8e3f8;
  --color-murasaki-200: #e7cee7;
  --color-murasaki-300: #d2b6d3;
  --color-murasaki-400: #b597b5;
  --color-murasaki-500: #9a7c9b;
  --color-murasaki-600: #7f6380;
  --color-murasaki-700: #684e69;
  --color-murasaki-800: #543d54;
  --color-murasaki-900: #462c47;
  --color-murasaki-950: #2b1c2b;
  --color-coffee-adept: #795700;
  --color-coffee-adept-50: #fff4e0;
  --color-coffee-adept-100: #ffe8bf;
  --color-coffee-adept-200: #f1d5a3;
  --color-coffee-adept-300: #dfbf86;
  --color-coffee-adept-400: #c3a15f;
  --color-coffee-adept-500: #aa8640;
  --color-coffee-adept-600: #8f6d24;
  --color-coffee-adept-700: #795700;
  --color-coffee-adept-800: #5f4400;
  --color-coffee-adept-900: #4a3400;
  --color-coffee-adept-950: #2f2000;
  --color-waikiki: #008b9a;
  --color-waikiki-50: #dafaff;
  --color-waikiki-100: #b5f4fe;
  --color-waikiki-200: #93e0ec;
  --color-waikiki-300: #6ec9d7;
  --color-waikiki-400: #3da9b8;
  --color-waikiki-500: #008b9a;
  --color-waikiki-600: #00707c;
  --color-waikiki-700: #005963;
  --color-waikiki-800: #00464e;
  --color-waikiki-900: #00373e;
  --color-waikiki-950: #002328;
}