Nuclear Mango to Enchanted Forest color palette

EB973BNuclear Mango 684D80Sumptuous Purple FFC17DButtery 162E42Eternal Darkness 5E7D00Enchanted Forest

Open in generator Export PNG, PDF, ASE…

About this palette

Nuclear Mango to Enchanted Forest is a 5-color cool, earthy palette: #EB973B (Nuclear Mango), #684D80 (Sumptuous Purple), #FFC17D (Buttery), #162E42 (Eternal Darkness), #5E7D00 (Enchanted Forest). It mixes orange, purple, blue, green tones and feels cool overall. The strongest text pairing is #FFC17D on #162E42 with a contrast ratio of 8.76:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nuclear Mango	rgb(235, 151, 59)	hsl(31, 81%, 58%)
Sumptuous Purple	rgb(104, 77, 128)	hsl(272, 25%, 40%)
Buttery	rgb(255, 193, 125)	hsl(31, 100%, 75%)
Eternal Darkness	rgb(22, 46, 66)	hsl(207, 50%, 17%)
Enchanted Forest	rgb(94, 125, 0)	hsl(75, 100%, 25%)

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.76:1 Very good#FFC17D on #162E42
Aa8.76:1 Very good#162E42 on #FFC17D
Aa6.00:1 Good#EB973B on #162E42
Aa6.00:1 Good#162E42 on #EB973B
Aa4.45:1 Poor#684D80 on #FFC17D
Aa4.45:1 Poor#FFC17D on #684D80
Aa3.05:1 Poor#EB973B on #684D80
Aa3.05:1 Poor#684D80 on #EB973B

Color blindness preview

CSS variables

/* Nuclear Mango to Enchanted Forest — https://swatchly.xyz/palette/eb973b-684d80-ffc17d-162e42-5e7d00 */
:root {
  --nuclear-mango: #eb973b;
  --sumptuous-purple: #684d80;
  --buttery: #ffc17d;
  --eternal-darkness: #162e42;
  --enchanted-forest: #5e7d00;
}

Tailwind CSS v4

/* Nuclear Mango to Enchanted Forest — https://swatchly.xyz/palette/eb973b-684d80-ffc17d-162e42-5e7d00 */
@theme {
  --color-nuclear-mango: #eb973b;
  --color-nuclear-mango-50: #fff8f1;
  --color-nuclear-mango-100: #ffeedf;
  --color-nuclear-mango-200: #ffd7b3;
  --color-nuclear-mango-300: #ffbb78;
  --color-nuclear-mango-400: #eb973b;
  --color-nuclear-mango-500: #ca790f;
  --color-nuclear-mango-600: #a46000;
  --color-nuclear-mango-700: #824b00;
  --color-nuclear-mango-800: #663900;
  --color-nuclear-mango-900: #4e2b00;
  --color-nuclear-mango-950: #311900;
  --color-sumptuous-purple: #684d80;
  --color-sumptuous-purple-50: #f8f2ff;
  --color-sumptuous-purple-100: #f2e5ff;
  --color-sumptuous-purple-200: #e4cef9;
  --color-sumptuous-purple-300: #d0b7e8;
  --color-sumptuous-purple-400: #b397cd;
  --color-sumptuous-purple-500: #987cb3;
  --color-sumptuous-purple-600: #7e6397;
  --color-sumptuous-purple-700: #684d80;
  --color-sumptuous-purple-800: #523b66;
  --color-sumptuous-purple-900: #3f2c50;
  --color-sumptuous-purple-950: #281a34;
  --color-buttery: #ffc17d;
  --color-buttery-50: #ffecd8;
  --color-buttery-100: #ffddba;
  --color-buttery-200: #ffc17d;
  --color-buttery-300: #e4ae73;
  --color-buttery-400: #c88f4d;
  --color-buttery-500: #ad742e;
  --color-buttery-600: #925b10;
  --color-buttery-700: #774800;
  --color-buttery-800: #5f3800;
  --color-buttery-900: #4a2b00;
  --color-buttery-950: #2f1900;
  --color-eternal-darkness: #162e42;
  --color-eternal-darkness-50: #edf6ff;
  --color-eternal-darkness-100: #dceefe;
  --color-eternal-darkness-200: #c5daee;
  --color-eternal-darkness-300: #acc4da;
  --color-eternal-darkness-400: #89a4bb;
  --color-eternal-darkness-500: #6c879f;
  --color-eternal-darkness-600: #526b81;
  --color-eternal-darkness-700: #3c5367;
  --color-eternal-darkness-800: #2b3e4f;
  --color-eternal-darkness-900: #162e42;
  --color-eternal-darkness-950: #101b24;
  --color-enchanted-forest: #5e7d00;
  --color-enchanted-forest-50: #e9ffc8;
  --color-enchanted-forest-100: #dff7b9;
  --color-enchanted-forest-200: #cae59c;
  --color-enchanted-forest-300: #b2d17c;
  --color-enchanted-forest-400: #92b351;
  --color-enchanted-forest-500: #77982e;
  --color-enchanted-forest-600: #5e7d00;
  --color-enchanted-forest-700: #4a6300;
  --color-enchanted-forest-800: #394d00;
  --color-enchanted-forest-900: #2b3c00;
  --color-enchanted-forest-950: #1a2500;
}