Sugar Rush to Sugarwinkle color palette

D55FA2Sugar Rush 00473ETropical Forest 00CBA7Pristine Oceanic A90975Katy Berry FFC9E2Sugarwinkle

About this palette

Sugar Rush to Sugarwinkle is a 5-color warm palette: #D55FA2 (Sugar Rush), #00473E (Tropical Forest), #00CBA7 (Pristine Oceanic), #A90975 (Katy Berry), #FFC9E2 (Sugarwinkle). It mixes pink, turquoise, red tones and feels warm overall. The strongest text pairing is #00473E on #FFC9E2 with a contrast ratio of 7.46:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Rush	rgb(213, 95, 162)	hsl(326, 58%, 60%)
Tropical Forest	rgb(0, 71, 62)	hsl(172, 100%, 14%)
Pristine Oceanic	rgb(0, 203, 167)	hsl(169, 100%, 40%)
Katy Berry	rgb(169, 9, 117)	hsl(320, 90%, 35%)
Sugarwinkle	rgb(255, 201, 226)	hsl(332, 100%, 89%)

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.46:1 Very good#00473E on #FFC9E2
Aa7.46:1 Very good#FFC9E2 on #00473E
Aa5.12:1 Good#00473E on #00CBA7
Aa5.12:1 Good#00CBA7 on #00473E
Aa4.93:1 Good#A90975 on #FFC9E2
Aa4.93:1 Good#FFC9E2 on #A90975
Aa3.39:1 Poor#00CBA7 on #A90975
Aa3.39:1 Poor#A90975 on #00CBA7

Color blindness preview

CSS variables

/* Sugar Rush to Sugarwinkle — https://swatchly.xyz/palette/d55fa2-00473e-00cba7-a90975-ffc9e2 */
:root {
  --sugar-rush: #d55fa2;
  --tropical-forest: #00473e;
  --pristine-oceanic: #00cba7;
  --katy-berry: #a90975;
  --sugarwinkle: #ffc9e2;
}

Tailwind CSS v4

/* Sugar Rush to Sugarwinkle — https://swatchly.xyz/palette/d55fa2-00473e-00cba7-a90975-ffc9e2 */
@theme {
  --color-sugar-rush: #d55fa2;
  --color-sugar-rush-50: #fff3f9;
  --color-sugar-rush-100: #ffe7f2;
  --color-sugar-rush-200: #ffcbe5;
  --color-sugar-rush-300: #ffa9d5;
  --color-sugar-rush-400: #ef7dbc;
  --color-sugar-rush-500: #d55fa2;
  --color-sugar-rush-600: #b44285;
  --color-sugar-rush-700: #952a6b;
  --color-sugar-rush-800: #781854;
  --color-sugar-rush-900: #5f0c41;
  --color-sugar-rush-950: #3e0329;
  --color-tropical-forest: #00473e;
  --color-tropical-forest-50: #ddfdf6;
  --color-tropical-forest-100: #cff4ec;
  --color-tropical-forest-200: #b6e2d9;
  --color-tropical-forest-300: #99ccc1;
  --color-tropical-forest-400: #73aca1;
  --color-tropical-forest-500: #559085;
  --color-tropical-forest-600: #3a7369;
  --color-tropical-forest-700: #265a52;
  --color-tropical-forest-800: #00473e;
  --color-tropical-forest-900: #0e352f;
  --color-tropical-forest-950: #05211c;
  --color-pristine-oceanic: #00cba7;
  --color-pristine-oceanic-50: #ebfff8;
  --color-pristine-oceanic-100: #ccffef;
  --color-pristine-oceanic-200: #98f6db;
  --color-pristine-oceanic-300: #71e4c6;
  --color-pristine-oceanic-400: #00cba7;
  --color-pristine-oceanic-500: #00a98a;
  --color-pristine-oceanic-600: #00876f;
  --color-pristine-oceanic-700: #006b57;
  --color-pristine-oceanic-800: #005343;
  --color-pristine-oceanic-900: #003f32;
  --color-pristine-oceanic-950: #00261d;
  --color-katy-berry: #a90975;
  --color-katy-berry-50: #fff1f7;
  --color-katy-berry-100: #ffe2f0;
  --color-katy-berry-200: #ffc7e3;
  --color-katy-berry-300: #ffa4d4;
  --color-katy-berry-400: #fa6ebe;
  --color-katy-berry-500: #df4ea4;
  --color-katy-berry-600: #c2308b;
  --color-katy-berry-700: #a90975;
  --color-katy-berry-800: #87005c;
  --color-katy-berry-900: #6a0047;
  --color-katy-berry-950: #46002e;
  --color-sugarwinkle: #ffc9e2;
  --color-sugarwinkle-50: #fff4f9;
  --color-sugarwinkle-100: #ffe6f1;
  --color-sugarwinkle-200: #ffc9e2;
  --color-sugarwinkle-300: #e2b5ca;
  --color-sugarwinkle-400: #c493aa;
  --color-sugarwinkle-500: #a8778e;
  --color-sugarwinkle-600: #8b5d73;
  --color-sugarwinkle-700: #70475b;
  --color-sugarwinkle-800: #593547;
  --color-sugarwinkle-900: #462837;
  --color-sugarwinkle-950: #2d1722;
}