Start generating

Gold Grillz to Vegetation color palette

E6E087Gold Grillz5D6B9DTwinkle Night501C4BPurple Velour1A1801Noir Mystique00AB76Cosmic Green59CF98Vegetation
Open in generator Export PNG, PDF, ASE…

About this palette

Gold Grillz to Vegetation is a 6-color earthy palette: #E6E087 (Gold Grillz), #5D6B9D (Twinkle Night), #501C4B (Purple Velour), #1A1801 (Noir Mystique), #00AB76 (Cosmic Green), #59CF98 (Vegetation). It mixes yellow, blue, purple, brown, green tones and feels balanced overall. The strongest text pairing is #E6E087 on #1A1801 with a contrast ratio of 13.09:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Gold Grillzrgb(230, 224, 135)hsl(56, 66%, 72%)
Twinkle Nightrgb(93, 107, 157)hsl(227, 26%, 49%)
Purple Velourrgb(80, 28, 75)hsl(306, 48%, 21%)
Noir Mystiquergb(26, 24, 1)hsl(55, 93%, 5%)
Cosmic Greenrgb(0, 171, 118)hsl(161, 100%, 34%)
Vegetationrgb(89, 207, 152)hsl(152, 55%, 58%)

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.

  • Aa13.09:1 Super#E6E087 on #1A1801
  • Aa13.09:1 Super#1A1801 on #E6E087
  • Aa9.56:1 Very good#E6E087 on #501C4B
  • Aa9.56:1 Very good#501C4B on #E6E087
  • Aa9.19:1 Very good#1A1801 on #59CF98
  • Aa9.19:1 Very good#59CF98 on #1A1801
  • Aa6.72:1 Good#501C4B on #59CF98
  • Aa6.72:1 Good#59CF98 on #501C4B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Gold Grillz to Vegetation — https://swatchly.xyz/palette/e6e087-5d6b9d-501c4b-1a1801-00ab76-59cf98 */
:root {
  --gold-grillz: #e6e087;
  --twinkle-night: #5d6b9d;
  --purple-velour: #501c4b;
  --noir-mystique: #1a1801;
  --cosmic-green: #00ab76;
  --vegetation: #59cf98;
}

Tailwind CSS v4

/* Gold Grillz to Vegetation — https://swatchly.xyz/palette/e6e087-5d6b9d-501c4b-1a1801-00ab76-59cf98 */
@theme {
  --color-gold-grillz: #e6e087;
  --color-gold-grillz-50: #fdfbcd;
  --color-gold-grillz-100: #f5f2bf;
  --color-gold-grillz-200: #e6e087;
  --color-gold-grillz-300: #cdc880;
  --color-gold-grillz-400: #aea855;
  --color-gold-grillz-500: #928b31;
  --color-gold-grillz-600: #77700c;
  --color-gold-grillz-700: #5e5800;
  --color-gold-grillz-800: #494400;
  --color-gold-grillz-900: #383400;
  --color-gold-grillz-950: #232000;
  --color-twinkle-night: #5d6b9d;
  --color-twinkle-night-50: #f1f5ff;
  --color-twinkle-night-100: #e5ebff;
  --color-twinkle-night-200: #cad7ff;
  --color-twinkle-night-300: #b2c0ef;
  --color-twinkle-night-400: #91a1d4;
  --color-twinkle-night-500: #7685b9;
  --color-twinkle-night-600: #5d6b9d;
  --color-twinkle-night-700: #485481;
  --color-twinkle-night-800: #374168;
  --color-twinkle-night-900: #293153;
  --color-twinkle-night-950: #181e36;
  --color-purple-velour: #501c4b;
  --color-purple-velour-50: #fff0fc;
  --color-purple-velour-100: #ffe0fa;
  --color-purple-velour-200: #f6c6ee;
  --color-purple-velour-300: #e2adda;
  --color-purple-velour-400: #c58bbd;
  --color-purple-velour-500: #aa6fa2;
  --color-purple-velour-600: #8e5687;
  --color-purple-velour-700: #74416e;
  --color-purple-velour-800: #5d3158;
  --color-purple-velour-900: #501c4b;
  --color-purple-velour-950: #30142d;
  --color-noir-mystique: #1a1801;
  --color-noir-mystique-50: #f7f6e5;
  --color-noir-mystique-100: #ededd9;
  --color-noir-mystique-200: #dad9c2;
  --color-noir-mystique-300: #c4c3a9;
  --color-noir-mystique-400: #a5a387;
  --color-noir-mystique-500: #88866a;
  --color-noir-mystique-600: #6c6a4f;
  --color-noir-mystique-700: #53523a;
  --color-noir-mystique-800: #3f3d29;
  --color-noir-mystique-900: #2d2c1c;
  --color-noir-mystique-950: #1a1801;
  --color-cosmic-green: #00ab76;
  --color-cosmic-green-50: #e3fff0;
  --color-cosmic-green-100: #c4ffe1;
  --color-cosmic-green-200: #9ef3c9;
  --color-cosmic-green-300: #7be0b2;
  --color-cosmic-green-400: #49c591;
  --color-cosmic-green-500: #00ab76;
  --color-cosmic-green-600: #008a5e;
  --color-cosmic-green-700: #006d4a;
  --color-cosmic-green-800: #005539;
  --color-cosmic-green-900: #00412a;
  --color-cosmic-green-950: #002819;
  --color-vegetation: #59cf98;
  --color-vegetation-50: #c4ffde;
  --color-vegetation-100: #adf6cf;
  --color-vegetation-200: #8ce3b6;
  --color-vegetation-300: #59cf98;
  --color-vegetation-400: #39b07c;
  --color-vegetation-500: #009663;
  --color-vegetation-600: #007a50;
  --color-vegetation-700: #00623f;
  --color-vegetation-800: #004e31;
  --color-vegetation-900: #003e26;
  --color-vegetation-950: #002716;
}

Similar palettes