Start generating

Pastel Magenta to Tropical Forest color palette

FF9AB8Pastel MagentaFD3D9DUnicorn Dust1253C6Flying Fish BlueFFE6A7Bleached Sunflower004D3CTropical Forest
Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Magenta to Tropical Forest is a 5-color vibrant, warm, neon palette: #FF9AB8 (Pastel Magenta), #FD3D9D (Unicorn Dust), #1253C6 (Flying Fish Blue), #FFE6A7 (Bleached Sunflower), #004D3C (Tropical Forest). It mixes pink, blue, yellow, turquoise tones and feels warm overall. The strongest text pairing is #FFE6A7 on #004D3C with a contrast ratio of 8.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pastel Magentargb(255, 154, 184)hsl(342, 100%, 80%)
Unicorn Dustrgb(253, 61, 157)hsl(330, 98%, 62%)
Flying Fish Bluergb(18, 83, 198)hsl(218, 83%, 42%)
Bleached Sunflowerrgb(255, 230, 167)hsl(43, 100%, 83%)
Tropical Forestrgb(0, 77, 60)hsl(167, 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.

  • Aa8.05:1 Very good#FFE6A7 on #004D3C
  • Aa8.05:1 Very good#004D3C on #FFE6A7
  • Aa5.56:1 Good#1253C6 on #FFE6A7
  • Aa5.56:1 Good#FFE6A7 on #1253C6
  • Aa4.97:1 Good#FF9AB8 on #004D3C
  • Aa4.97:1 Good#004D3C on #FF9AB8
  • Aa3.43:1 Poor#FF9AB8 on #1253C6
  • Aa3.43:1 Poor#1253C6 on #FF9AB8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pastel Magenta to Tropical Forest — https://swatchly.xyz/palette/ff9ab8-fd3d9d-1253c6-ffe6a7-004d3c */
:root {
  --pastel-magenta: #ff9ab8;
  --unicorn-dust: #fd3d9d;
  --flying-fish-blue: #1253c6;
  --bleached-sunflower: #ffe6a7;
  --tropical-forest: #004d3c;
}

Tailwind CSS v4

/* Pastel Magenta to Tropical Forest — https://swatchly.xyz/palette/ff9ab8-fd3d9d-1253c6-ffe6a7-004d3c */
@theme {
  --color-pastel-magenta: #ff9ab8;
  --color-pastel-magenta-50: #ffeef2;
  --color-pastel-magenta-100: #ffdfe7;
  --color-pastel-magenta-200: #ffc0d1;
  --color-pastel-magenta-300: #ff9ab8;
  --color-pastel-magenta-400: #db7d9a;
  --color-pastel-magenta-500: #bf617f;
  --color-pastel-magenta-600: #a14866;
  --color-pastel-magenta-700: #853450;
  --color-pastel-magenta-800: #6c253e;
  --color-pastel-magenta-900: #561930;
  --color-pastel-magenta-950: #390d1d;
  --color-unicorn-dust: #fd3d9d;
  --color-unicorn-dust-50: #ffebf2;
  --color-unicorn-dust-100: #ffdae7;
  --color-unicorn-dust-200: #ffb8d2;
  --color-unicorn-dust-300: #ff8ebc;
  --color-unicorn-dust-400: #fd3d9d;
  --color-unicorn-dust-500: #de0e84;
  --color-unicorn-dust-600: #b6006a;
  --color-unicorn-dust-700: #930055;
  --color-unicorn-dust-800: #760043;
  --color-unicorn-dust-900: #5e0034;
  --color-unicorn-dust-950: #3f0021;
  --color-flying-fish-blue: #1253c6;
  --color-flying-fish-blue-50: #f0f5ff;
  --color-flying-fish-blue-100: #e1ecff;
  --color-flying-fish-blue-200: #c5daff;
  --color-flying-fish-blue-300: #a3c5ff;
  --color-flying-fish-blue-400: #72a5ff;
  --color-flying-fish-blue-500: #4586fd;
  --color-flying-fish-blue-600: #2b6bdf;
  --color-flying-fish-blue-700: #1253c6;
  --color-flying-fish-blue-800: #0840a0;
  --color-flying-fish-blue-900: #002f82;
  --color-flying-fish-blue-950: #001c57;
  --color-bleached-sunflower: #ffe6a7;
  --color-bleached-sunflower-50: #fff2d0;
  --color-bleached-sunflower-100: #ffe6a7;
  --color-bleached-sunflower-200: #e6d4a5;
  --color-bleached-sunflower-300: #d2bd89;
  --color-bleached-sunflower-400: #b59e64;
  --color-bleached-sunflower-500: #9a8346;
  --color-bleached-sunflower-600: #7f692d;
  --color-bleached-sunflower-700: #67531a;
  --color-bleached-sunflower-800: #52400b;
  --color-bleached-sunflower-900: #403103;
  --color-bleached-sunflower-950: #281e01;
  --color-tropical-forest: #004d3c;
  --color-tropical-forest-50: #dbfef2;
  --color-tropical-forest-100: #cef6e7;
  --color-tropical-forest-200: #b4e4d3;
  --color-tropical-forest-300: #98cebc;
  --color-tropical-forest-400: #72b09b;
  --color-tropical-forest-500: #549480;
  --color-tropical-forest-600: #3a7866;
  --color-tropical-forest-700: #26604f;
  --color-tropical-forest-800: #004d3c;
  --color-tropical-forest-900: #0d3a2e;
  --color-tropical-forest-950: #04251c;
}

Similar palettes