Trumpet Gold to Snakes in the Grass color palette

EEB400Trumpet Gold AF68FFOrion Nebula 007F88Jade Jewel 00BBAFSuper Rare Jade 8E8F00Snakes in the Grass

Open in generator Export PNG, PDF, ASE…

About this palette

Trumpet Gold to Snakes in the Grass is a 5-color vibrant, cool palette: #EEB400 (Trumpet Gold), #AF68FF (Orion Nebula), #007F88 (Jade Jewel), #00BBAF (Super Rare Jade), #8E8F00 (Snakes in the Grass). It mixes yellow, purple, turquoise tones and feels cool overall. The strongest text pairing is #EEB400 on #007F88 with a contrast ratio of 2.54:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Trumpet Gold	rgb(238, 180, 0)	hsl(45, 100%, 47%)
Orion Nebula	rgb(175, 104, 255)	hsl(268, 100%, 70%)
Jade Jewel	rgb(0, 127, 136)	hsl(184, 100%, 27%)
Super Rare Jade	rgb(0, 187, 175)	hsl(176, 100%, 37%)
Snakes in the Grass	rgb(142, 143, 0)	hsl(60, 100%, 28%)

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.

Color blindness preview

CSS variables

/* Trumpet Gold to Snakes in the Grass — https://swatchly.xyz/palette/eeb400-af68ff-007f88-00bbaf-8e8f00 */
:root {
  --trumpet-gold: #eeb400;
  --orion-nebula: #af68ff;
  --jade-jewel: #007f88;
  --super-rare-jade: #00bbaf;
  --snakes-in-the-grass: #8e8f00;
}

Tailwind CSS v4

/* Trumpet Gold to Snakes in the Grass — https://swatchly.xyz/palette/eeb400-af68ff-007f88-00bbaf-8e8f00 */
@theme {
  --color-trumpet-gold: #eeb400;
  --color-trumpet-gold-50: #fff2d9;
  --color-trumpet-gold-100: #ffe6b4;
  --color-trumpet-gold-200: #facf70;
  --color-trumpet-gold-300: #eeb400;
  --color-trumpet-gold-400: #c89700;
  --color-trumpet-gold-500: #a77d00;
  --color-trumpet-gold-600: #876500;
  --color-trumpet-gold-700: #6c5000;
  --color-trumpet-gold-800: #553e00;
  --color-trumpet-gold-900: #423000;
  --color-trumpet-gold-950: #2a1d00;
  --color-orion-nebula: #af68ff;
  --color-orion-nebula-50: #f9f6ff;
  --color-orion-nebula-100: #f3ecff;
  --color-orion-nebula-200: #e6d6ff;
  --color-orion-nebula-300: #d6bcff;
  --color-orion-nebula-400: #c192ff;
  --color-orion-nebula-500: #af68ff;
  --color-orion-nebula-600: #9148dd;
  --color-orion-nebula-700: #762dbb;
  --color-orion-nebula-800: #5e189a;
  --color-orion-nebula-900: #49097b;
  --color-orion-nebula-950: #2e0152;
  --color-jade-jewel: #007f88;
  --color-jade-jewel-50: #ddfcff;
  --color-jade-jewel-100: #c0f8fd;
  --color-jade-jewel-200: #a3e7ed;
  --color-jade-jewel-300: #84d2da;
  --color-jade-jewel-400: #58b5bd;
  --color-jade-jewel-500: #339aa3;
  --color-jade-jewel-600: #007f88;
  --color-jade-jewel-700: #00656c;
  --color-jade-jewel-800: #004f55;
  --color-jade-jewel-900: #003d41;
  --color-jade-jewel-950: #002629;
  --color-super-rare-jade: #00bbaf;
  --color-super-rare-jade-50: #d8fffa;
  --color-super-rare-jade-100: #b0fdf4;
  --color-super-rare-jade-200: #8dece2;
  --color-super-rare-jade-300: #65d8cd;
  --color-super-rare-jade-400: #00bbaf;
  --color-super-rare-jade-500: #009c92;
  --color-super-rare-jade-600: #007d75;
  --color-super-rare-jade-700: #00645d;
  --color-super-rare-jade-800: #004e48;
  --color-super-rare-jade-900: #003c38;
  --color-super-rare-jade-950: #002622;
  --color-snakes-in-the-grass: #8e8f00;
  --color-snakes-in-the-grass-50: #f8fbc1;
  --color-snakes-in-the-grass-100: #eff2b0;
  --color-snakes-in-the-grass-200: #dcdf90;
  --color-snakes-in-the-grass-300: #c7ca6d;
  --color-snakes-in-the-grass-400: #a9aa3c;
  --color-snakes-in-the-grass-500: #8e8f00;
  --color-snakes-in-the-grass-600: #727300;
  --color-snakes-in-the-grass-700: #5a5b00;
  --color-snakes-in-the-grass-800: #464700;
  --color-snakes-in-the-grass-900: #363600;
  --color-snakes-in-the-grass-950: #212100;
}