Sugar Chic to Tropical Forest color palette

F6C4FFSugar Chic 62AE97Water Park B261B4Prickly Purple 9A3827Ketchup 00463ATropical Forest

About this palette

Sugar Chic to Tropical Forest is a 5-color cool palette: #F6C4FF (Sugar Chic), #62AE97 (Water Park), #B261B4 (Prickly Purple), #9A3827 (Ketchup), #00463A (Tropical Forest). It mixes purple, turquoise, pink, red tones and feels cool overall. The strongest text pairing is #F6C4FF on #00463A with a contrast ratio of 7.36:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sugar Chic	rgb(246, 196, 255)	hsl(291, 100%, 88%)
Water Park	rgb(98, 174, 151)	hsl(162, 32%, 53%)
Prickly Purple	rgb(178, 97, 180)	hsl(299, 36%, 54%)
Ketchup	rgb(154, 56, 39)	hsl(9, 60%, 38%)
Tropical Forest	rgb(0, 70, 58)	hsl(170, 100%, 14%)

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.36:1 Very good#F6C4FF on #00463A
Aa7.36:1 Very good#00463A on #F6C4FF
Aa4.80:1 Good#F6C4FF on #9A3827
Aa4.80:1 Good#9A3827 on #F6C4FF
Aa4.14:1 Poor#62AE97 on #00463A
Aa4.14:1 Poor#00463A on #62AE97

Color blindness preview

CSS variables

/* Sugar Chic to Tropical Forest — https://swatchly.xyz/palette/f6c4ff-62ae97-b261b4-9a3827-00463a */
:root {
  --sugar-chic: #f6c4ff;
  --water-park: #62ae97;
  --prickly-purple: #b261b4;
  --ketchup: #9a3827;
  --tropical-forest: #00463a;
}

Tailwind CSS v4

/* Sugar Chic to Tropical Forest — https://swatchly.xyz/palette/f6c4ff-62ae97-b261b4-9a3827-00463a */
@theme {
  --color-sugar-chic: #f6c4ff;
  --color-sugar-chic-50: #fdf1ff;
  --color-sugar-chic-100: #fbe2ff;
  --color-sugar-chic-200: #f6c4ff;
  --color-sugar-chic-300: #dab1e2;
  --color-sugar-chic-400: #bd8fc5;
  --color-sugar-chic-500: #a173a9;
  --color-sugar-chic-600: #85598d;
  --color-sugar-chic-700: #6c4473;
  --color-sugar-chic-800: #56335c;
  --color-sugar-chic-900: #432648;
  --color-sugar-chic-950: #2b162f;
  --color-water-park: #62ae97;
  --color-water-park-50: #d5fef0;
  --color-water-park-100: #c6f5e5;
  --color-water-park-200: #aae2cf;
  --color-water-park-300: #8bcdb8;
  --color-water-park-400: #62ae97;
  --color-water-park-500: #46937d;
  --color-water-park-600: #2c7864;
  --color-water-park-700: #17614e;
  --color-water-park-800: #064d3d;
  --color-water-park-900: #003c2f;
  --color-water-park-950: #00261d;
  --color-prickly-purple: #b261b4;
  --color-prickly-purple-50: #ffefff;
  --color-prickly-purple-100: #ffdfff;
  --color-prickly-purple-200: #febdfe;
  --color-prickly-purple-300: #eba2ec;
  --color-prickly-purple-400: #ce7ed0;
  --color-prickly-purple-500: #b261b4;
  --color-prickly-purple-600: #954797;
  --color-prickly-purple-700: #7a337c;
  --color-prickly-purple-800: #622364;
  --color-prickly-purple-900: #4d184f;
  --color-prickly-purple-950: #320c34;
  --color-ketchup: #9a3827;
  --color-ketchup-50: #fff2ef;
  --color-ketchup-100: #ffe4df;
  --color-ketchup-200: #ffcbc0;
  --color-ketchup-300: #ffab9a;
  --color-ketchup-400: #eb8672;
  --color-ketchup-500: #d06956;
  --color-ketchup-600: #b34f3d;
  --color-ketchup-700: #9a3827;
  --color-ketchup-800: #7b291b;
  --color-ketchup-900: #621c10;
  --color-ketchup-950: #410e06;
  --color-tropical-forest: #00463a;
  --color-tropical-forest-50: #ddfef4;
  --color-tropical-forest-100: #d0f5ea;
  --color-tropical-forest-200: #b7e3d6;
  --color-tropical-forest-300: #99ccbe;
  --color-tropical-forest-400: #73ac9d;
  --color-tropical-forest-500: #558f81;
  --color-tropical-forest-600: #3a7365;
  --color-tropical-forest-700: #265a4e;
  --color-tropical-forest-800: #00463a;
  --color-tropical-forest-900: #0e342c;
  --color-tropical-forest-950: #06201a;
}