Start generating

Baby Pink to Tropical Forest color palette

FFB4CCBaby Pink82B7ABMintnightBB898FPunched Pink9B4A5ECherry Berry216B5ETerrestrial004E4ATropical Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Baby Pink to Tropical Forest is a 6-color vintage palette: #FFB4CC (Baby Pink), #82B7AB (Mintnight), #BB898F (Punched Pink), #9B4A5E (Cherry Berry), #216B5E (Terrestrial), #004E4A (Tropical Forest). It mixes pink, turquoise, red tones and feels balanced overall. The strongest text pairing is #FFB4CC on #004E4A with a contrast ratio of 5.78:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Baby Pinkrgb(255, 180, 204)hsl(341, 100%, 85%)
Mintnightrgb(130, 183, 171)hsl(166, 27%, 61%)
Punched Pinkrgb(187, 137, 143)hsl(353, 27%, 64%)
Cherry Berryrgb(155, 74, 94)hsl(345, 35%, 45%)
Terrestrialrgb(33, 107, 94)hsl(169, 53%, 27%)
Tropical Forestrgb(0, 78, 74)hsl(177, 100%, 15%)

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.78:1 Good#FFB4CC on #004E4A
  • Aa5.78:1 Good#004E4A on #FFB4CC
  • Aa4.25:1 Poor#82B7AB on #004E4A
  • Aa4.25:1 Poor#004E4A on #82B7AB
  • Aa3.80:1 Poor#FFB4CC on #216B5E
  • Aa3.80:1 Poor#216B5E on #FFB4CC
  • Aa3.58:1 Poor#FFB4CC on #9B4A5E
  • Aa3.58:1 Poor#9B4A5E on #FFB4CC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Baby Pink to Tropical Forest — https://swatchly.xyz/palette/ffb4cc-82b7ab-bb898f-9b4a5e-216b5e-004e4a */
:root {
  --baby-pink: #ffb4cc;
  --mintnight: #82b7ab;
  --punched-pink: #bb898f;
  --cherry-berry: #9b4a5e;
  --terrestrial: #216b5e;
  --tropical-forest: #004e4a;
}

Tailwind CSS v4

/* Baby Pink to Tropical Forest — https://swatchly.xyz/palette/ffb4cc-82b7ab-bb898f-9b4a5e-216b5e-004e4a */
@theme {
  --color-baby-pink: #ffb4cc;
  --color-baby-pink-50: #ffe6ed;
  --color-baby-pink-100: #ffd5e2;
  --color-baby-pink-200: #ffb4cc;
  --color-baby-pink-300: #e4a3b7;
  --color-baby-pink-400: #c8839a;
  --color-baby-pink-500: #ae6981;
  --color-baby-pink-600: #925268;
  --color-baby-pink-700: #793e53;
  --color-baby-pink-800: #622f42;
  --color-baby-pink-900: #4e2232;
  --color-baby-pink-950: #32131f;
  --color-mintnight: #82b7ab;
  --color-mintnight-50: #e5fff9;
  --color-mintnight-100: #d9f8f0;
  --color-mintnight-200: #c2e7de;
  --color-mintnight-300: #a8d3c9;
  --color-mintnight-400: #82b7ab;
  --color-mintnight-500: #66998e;
  --color-mintnight-600: #4a7d72;
  --color-mintnight-700: #34635a;
  --color-mintnight-800: #234e45;
  --color-mintnight-900: #173b34;
  --color-mintnight-950: #0a241f;
  --color-punched-pink: #bb898f;
  --color-punched-pink-50: #ffedee;
  --color-punched-pink-100: #ffdce0;
  --color-punched-pink-200: #efc5c9;
  --color-punched-pink-300: #daabb0;
  --color-punched-pink-400: #bb898f;
  --color-punched-pink-500: #a07076;
  --color-punched-pink-600: #85585e;
  --color-punched-pink-700: #6c444a;
  --color-punched-pink-800: #573439;
  --color-punched-pink-900: #45282c;
  --color-punched-pink-950: #2e181b;
  --color-cherry-berry: #9b4a5e;
  --color-cherry-berry-50: #fff1f3;
  --color-cherry-berry-100: #ffe2e7;
  --color-cherry-berry-200: #ffc4cf;
  --color-cherry-berry-300: #f4a5b5;
  --color-cherry-berry-400: #d68294;
  --color-cherry-berry-500: #b96578;
  --color-cherry-berry-600: #9b4a5e;
  --color-cherry-berry-700: #7f3749;
  --color-cherry-berry-800: #662838;
  --color-cherry-berry-900: #511d2b;
  --color-cherry-berry-950: #350f1a;
  --color-terrestrial: #216b5e;
  --color-terrestrial-50: #d9fff5;
  --color-terrestrial-100: #cbf6ec;
  --color-terrestrial-200: #b3e6da;
  --color-terrestrial-300: #98d2c5;
  --color-terrestrial-400: #73b5a7;
  --color-terrestrial-500: #559b8d;
  --color-terrestrial-600: #3b8173;
  --color-terrestrial-700: #216b5e;
  --color-terrestrial-800: #155449;
  --color-terrestrial-900: #084138;
  --color-terrestrial-950: #012a23;
  --color-tropical-forest: #004e4a;
  --color-tropical-forest-50: #dbfefa;
  --color-tropical-forest-100: #cdf5f1;
  --color-tropical-forest-200: #b3e2de;
  --color-tropical-forest-300: #97cdc8;
  --color-tropical-forest-400: #72afaa;
  --color-tropical-forest-500: #54948e;
  --color-tropical-forest-600: #3a7874;
  --color-tropical-forest-700: #25615d;
  --color-tropical-forest-800: #004e4a;
  --color-tropical-forest-900: #0c3b38;
  --color-tropical-forest-950: #042523;
}

Similar palettes