Start generating

Toxic Frog to Moelleux au Chocolat color palette

92F69EToxic FrogE2A200Hot Butter3CA800Botanical Garden6260C1Simply Purple4F299FGalactic Purple4D3500Moelleux au Chocolat
Open in generator Export PNG, PDF, ASE…

About this palette

Toxic Frog to Moelleux au Chocolat is a 6-color vibrant, cool palette: #92F69E (Toxic Frog), #E2A200 (Hot Butter), #3CA800 (Botanical Garden), #6260C1 (Simply Purple), #4F299F (Galactic Purple), #4D3500 (Moelleux au Chocolat). It mixes green, yellow, purple, brown tones and feels cool overall. The strongest text pairing is #92F69E on #4D3500 with a contrast ratio of 8.71:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Toxic Frogrgb(146, 246, 158)hsl(127, 85%, 77%)
Hot Butterrgb(226, 162, 0)hsl(43, 100%, 44%)
Botanical Gardenrgb(60, 168, 0)hsl(99, 100%, 33%)
Simply Purplergb(98, 96, 193)hsl(241, 44%, 57%)
Galactic Purplergb(79, 41, 159)hsl(259, 59%, 39%)
Moelleux au Chocolatrgb(77, 53, 0)hsl(41, 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.71:1 Very good#92F69E on #4D3500
  • Aa8.71:1 Very good#4D3500 on #92F69E
  • Aa7.39:1 Very good#92F69E on #4F299F
  • Aa7.39:1 Very good#4F299F on #92F69E
  • Aa5.15:1 Good#E2A200 on #4D3500
  • Aa5.15:1 Good#4D3500 on #E2A200
  • Aa4.37:1 Poor#E2A200 on #4F299F
  • Aa4.37:1 Poor#4F299F on #E2A200

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Toxic Frog to Moelleux au Chocolat — https://swatchly.xyz/palette/92f69e-e2a200-3ca800-6260c1-4f299f-4d3500 */
:root {
  --toxic-frog: #92f69e;
  --hot-butter: #e2a200;
  --botanical-garden: #3ca800;
  --simply-purple: #6260c1;
  --galactic-purple: #4f299f;
  --moelleux-au-chocolat: #4d3500;
}

Tailwind CSS v4

/* Toxic Frog to Moelleux au Chocolat — https://swatchly.xyz/palette/92f69e-e2a200-3ca800-6260c1-4f299f-4d3500 */
@theme {
  --color-toxic-frog: #92f69e;
  --color-toxic-frog-50: #e7ffe9;
  --color-toxic-frog-100: #c7ffcb;
  --color-toxic-frog-200: #92f69e;
  --color-toxic-frog-300: #89da92;
  --color-toxic-frog-400: #5ebc6b;
  --color-toxic-frog-500: #3a9f4d;
  --color-toxic-frog-600: #158332;
  --color-toxic-frog-700: #006822;
  --color-toxic-frog-800: #005119;
  --color-toxic-frog-900: #003f11;
  --color-toxic-frog-950: #002808;
  --color-hot-butter: #e2a200;
  --color-hot-butter-50: #fff9f0;
  --color-hot-butter-100: #fff0d9;
  --color-hot-butter-200: #ffdca0;
  --color-hot-butter-300: #f7c367;
  --color-hot-butter-400: #e2a200;
  --color-hot-butter-500: #bc8600;
  --color-hot-butter-600: #976b00;
  --color-hot-butter-700: #785400;
  --color-hot-butter-800: #5d4000;
  --color-hot-butter-900: #473000;
  --color-hot-butter-950: #2c1c00;
  --color-botanical-garden: #3ca800;
  --color-botanical-garden-50: #e6ffe0;
  --color-botanical-garden-100: #cbffbd;
  --color-botanical-garden-200: #a8f393;
  --color-botanical-garden-300: #89e071;
  --color-botanical-garden-400: #60c340;
  --color-botanical-garden-500: #3ca800;
  --color-botanical-garden-600: #2f8700;
  --color-botanical-garden-700: #236b00;
  --color-botanical-garden-800: #1a5400;
  --color-botanical-garden-900: #124000;
  --color-botanical-garden-950: #082800;
  --color-simply-purple: #6260c1;
  --color-simply-purple-50: #f3f4ff;
  --color-simply-purple-100: #e8eaff;
  --color-simply-purple-200: #d1d5ff;
  --color-simply-purple-300: #b7bcff;
  --color-simply-purple-400: #9597f9;
  --color-simply-purple-500: #7b7bde;
  --color-simply-purple-600: #6260c1;
  --color-simply-purple-700: #4d49a1;
  --color-simply-purple-800: #3b3784;
  --color-simply-purple-900: #2d296a;
  --color-simply-purple-950: #1b1747;
  --color-galactic-purple: #4f299f;
  --color-galactic-purple-50: #f5f4ff;
  --color-galactic-purple-100: #ebe8ff;
  --color-galactic-purple-200: #d7d1ff;
  --color-galactic-purple-300: #c2b7ff;
  --color-galactic-purple-400: #a690ff;
  --color-galactic-purple-500: #8d71eb;
  --color-galactic-purple-600: #7557cd;
  --color-galactic-purple-700: #5f41b0;
  --color-galactic-purple-800: #4f299f;
  --color-galactic-purple-900: #3c2278;
  --color-galactic-purple-950: #261252;
  --color-moelleux-au-chocolat: #4d3500;
  --color-moelleux-au-chocolat-50: #fff4e1;
  --color-moelleux-au-chocolat-100: #fbe9ca;
  --color-moelleux-au-chocolat-200: #ead4b0;
  --color-moelleux-au-chocolat-300: #d6bd94;
  --color-moelleux-au-chocolat-400: #b99f71;
  --color-moelleux-au-chocolat-500: #a08556;
  --color-moelleux-au-chocolat-600: #856b3e;
  --color-moelleux-au-chocolat-700: #6e562b;
  --color-moelleux-au-chocolat-800: #5a451d;
  --color-moelleux-au-chocolat-900: #4d3500;
  --color-moelleux-au-chocolat-950: #302208;
}

Similar palettes