Under the Sun to Tropical Forest color palette

E9D124Under the Sun B580E3Illicit Purple BB3ED8Magenta Affair 676D00Topiary Green 004F3FTropical Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Under the Sun to Tropical Forest is a 5-color vibrant, cool, neon palette: #E9D124 (Under the Sun), #B580E3 (Illicit Purple), #BB3ED8 (Magenta Affair), #676D00 (Topiary Green), #004F3F (Tropical Forest). It mixes yellow, purple, green, turquoise tones and feels cool overall. The strongest text pairing is #E9D124 on #004F3F with a contrast ratio of 6.21:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Under the Sun	rgb(233, 209, 36)	hsl(53, 82%, 53%)
Illicit Purple	rgb(181, 128, 227)	hsl(272, 64%, 70%)
Magenta Affair	rgb(187, 62, 216)	hsl(289, 66%, 55%)
Topiary Green	rgb(103, 109, 0)	hsl(63, 100%, 21%)
Tropical Forest	rgb(0, 79, 63)	hsl(168, 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.

Aa6.21:1 Good#E9D124 on #004F3F
Aa6.21:1 Good#004F3F on #E9D124
Aa3.62:1 Poor#E9D124 on #676D00
Aa3.62:1 Poor#676D00 on #E9D124
Aa3.27:1 Poor#B580E3 on #004F3F
Aa3.27:1 Poor#004F3F on #B580E3

Color blindness preview

CSS variables

/* Under the Sun to Tropical Forest — https://swatchly.xyz/palette/e9d124-b580e3-bb3ed8-676d00-004f3f */
:root {
  --under-the-sun: #e9d124;
  --illicit-purple: #b580e3;
  --magenta-affair: #bb3ed8;
  --topiary-green: #676d00;
  --tropical-forest: #004f3f;
}

Tailwind CSS v4

/* Under the Sun to Tropical Forest — https://swatchly.xyz/palette/e9d124-b580e3-bb3ed8-676d00-004f3f */
@theme {
  --color-under-the-sun: #e9d124;
  --color-under-the-sun-50: #fef2a2;
  --color-under-the-sun-100: #f5e78b;
  --color-under-the-sun-200: #e9d124;
  --color-under-the-sun-300: #d0bc30;
  --color-under-the-sun-400: #b19d00;
  --color-under-the-sun-500: #948300;
  --color-under-the-sun-600: #786a00;
  --color-under-the-sun-700: #605500;
  --color-under-the-sun-800: #4c4300;
  --color-under-the-sun-900: #3b3300;
  --color-under-the-sun-950: #252000;
  --color-illicit-purple: #b580e3;
  --color-illicit-purple-50: #f7efff;
  --color-illicit-purple-100: #f0e1ff;
  --color-illicit-purple-200: #e2c5ff;
  --color-illicit-purple-300: #d3a4fd;
  --color-illicit-purple-400: #b580e3;
  --color-illicit-purple-500: #9a65c6;
  --color-illicit-purple-600: #7f4ca8;
  --color-illicit-purple-700: #67388c;
  --color-illicit-purple-800: #532973;
  --color-illicit-purple-900: #411d5c;
  --color-illicit-purple-950: #2a103e;
  --color-magenta-affair: #bb3ed8;
  --color-magenta-affair-50: #fcefff;
  --color-magenta-affair-100: #f9e0ff;
  --color-magenta-affair-200: #f2c0ff;
  --color-magenta-affair-300: #ea99ff;
  --color-magenta-affair-400: #d862f5;
  --color-magenta-affair-500: #bb3ed8;
  --color-magenta-affair-600: #9d1cb9;
  --color-magenta-affair-700: #810099;
  --color-magenta-affair-800: #66007a;
  --color-magenta-affair-900: #500060;
  --color-magenta-affair-950: #340040;
  --color-topiary-green: #676d00;
  --color-topiary-green-50: #f4fbca;
  --color-topiary-green-100: #e9f0b9;
  --color-topiary-green-200: #d5dc9a;
  --color-topiary-green-300: #bdc579;
  --color-topiary-green-400: #9ea54f;
  --color-topiary-green-500: #82892d;
  --color-topiary-green-600: #676d00;
  --color-topiary-green-700: #515600;
  --color-topiary-green-800: #3f4300;
  --color-topiary-green-900: #313400;
  --color-topiary-green-950: #1e2000;
  --color-tropical-forest: #004f3f;
  --color-tropical-forest-50: #dbfff3;
  --color-tropical-forest-100: #cdf6e8;
  --color-tropical-forest-200: #b4e4d4;
  --color-tropical-forest-300: #97cfbd;
  --color-tropical-forest-400: #72b09e;
  --color-tropical-forest-500: #549582;
  --color-tropical-forest-600: #3a7a68;
  --color-tropical-forest-700: #266252;
  --color-tropical-forest-800: #004f3f;
  --color-tropical-forest-900: #0c3c30;
  --color-tropical-forest-950: #04261e;
}