Start generating

Green Dynasty to Gothic Gold color palette

009787Green Dynasty8538E2Hokkaido Lavender00DFA4Envy’s LoveB17AFFIllicit Purple00C5CFSea SerpentBE8200Gothic Gold
Open in generator Export PNG, PDF, ASE…

About this palette

Green Dynasty to Gothic Gold is a 6-color vibrant, cool, neon palette: #009787 (Green Dynasty), #8538E2 (Hokkaido Lavender), #00DFA4 (Envy’s Love), #B17AFF (Illicit Purple), #00C5CF (Sea Serpent), #BE8200 (Gothic Gold). It mixes turquoise, purple, yellow tones and feels cool overall. The strongest text pairing is #8538E2 on #00DFA4 with a contrast ratio of 3.30:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Green Dynastyrgb(0, 151, 135)hsl(174, 100%, 30%)
Hokkaido Lavenderrgb(133, 56, 226)hsl(267, 75%, 55%)
Envy’s Lovergb(0, 223, 164)hsl(164, 100%, 44%)
Illicit Purplergb(177, 122, 255)hsl(265, 100%, 74%)
Sea Serpentrgb(0, 197, 207)hsl(183, 100%, 41%)
Gothic Goldrgb(190, 130, 0)hsl(41, 100%, 37%)

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.

  • Aa3.30:1 Poor#8538E2 on #00DFA4
  • Aa3.30:1 Poor#00DFA4 on #8538E2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Green Dynasty to Gothic Gold — https://swatchly.xyz/palette/009787-8538e2-00dfa4-b17aff-00c5cf-be8200 */
:root {
  --green-dynasty: #009787;
  --hokkaido-lavender: #8538e2;
  --envy-s-love: #00dfa4;
  --illicit-purple: #b17aff;
  --sea-serpent: #00c5cf;
  --gothic-gold: #be8200;
}

Tailwind CSS v4

/* Green Dynasty to Gothic Gold — https://swatchly.xyz/palette/009787-8538e2-00dfa4-b17aff-00c5cf-be8200 */
@theme {
  --color-green-dynasty: #009787;
  --color-green-dynasty-50: #d4fff7;
  --color-green-dynasty-100: #b7f9ed;
  --color-green-dynasty-200: #97e8d9;
  --color-green-dynasty-300: #73d2c2;
  --color-green-dynasty-400: #40b3a3;
  --color-green-dynasty-500: #009787;
  --color-green-dynasty-600: #007a6d;
  --color-green-dynasty-700: #006156;
  --color-green-dynasty-800: #004c43;
  --color-green-dynasty-900: #003b34;
  --color-green-dynasty-950: #002520;
  --color-hokkaido-lavender: #8538e2;
  --color-hokkaido-lavender-50: #f6f3ff;
  --color-hokkaido-lavender-100: #eee8ff;
  --color-hokkaido-lavender-200: #ded0ff;
  --color-hokkaido-lavender-300: #cbb3ff;
  --color-hokkaido-lavender-400: #b288ff;
  --color-hokkaido-lavender-500: #9e5aff;
  --color-hokkaido-lavender-600: #8538e2;
  --color-hokkaido-lavender-700: #6c1fbf;
  --color-hokkaido-lavender-800: #56089e;
  --color-hokkaido-lavender-900: #43007e;
  --color-hokkaido-lavender-950: #2b0054;
  --color-envy-s-love: #00dfa4;
  --color-envy-s-love-50: #d5ffec;
  --color-envy-s-love-100: #a7ffd9;
  --color-envy-s-love-200: #7befc1;
  --color-envy-s-love-300: #00dfa4;
  --color-envy-s-love-400: #00bb89;
  --color-envy-s-love-500: #009c72;
  --color-envy-s-love-600: #007e5b;
  --color-envy-s-love-700: #006448;
  --color-envy-s-love-800: #004f38;
  --color-envy-s-love-900: #003d2a;
  --color-envy-s-love-950: #002719;
  --color-illicit-purple: #b17aff;
  --color-illicit-purple-50: #f5f0ff;
  --color-illicit-purple-100: #ece3ff;
  --color-illicit-purple-200: #dcc9ff;
  --color-illicit-purple-300: #c9aaff;
  --color-illicit-purple-400: #b17aff;
  --color-illicit-purple-500: #965ee1;
  --color-illicit-purple-600: #7c44c1;
  --color-illicit-purple-700: #652fa3;
  --color-illicit-purple-800: #511f86;
  --color-illicit-purple-900: #40146d;
  --color-illicit-purple-950: #29094a;
  --color-sea-serpent: #00c5cf;
  --color-sea-serpent-50: #ebfeff;
  --color-sea-serpent-100: #cdfcff;
  --color-sea-serpent-200: #96f2f8;
  --color-sea-serpent-300: #70e0e7;
  --color-sea-serpent-400: #00c5cf;
  --color-sea-serpent-500: #00a4ac;
  --color-sea-serpent-600: #00838a;
  --color-sea-serpent-700: #00686d;
  --color-sea-serpent-800: #005055;
  --color-sea-serpent-900: #003d40;
  --color-sea-serpent-950: #002527;
  --color-gothic-gold: #be8200;
  --color-gothic-gold-50: #fff5e8;
  --color-gothic-gold-100: #ffecd0;
  --color-gothic-gold-200: #ffd599;
  --color-gothic-gold-300: #f1be70;
  --color-gothic-gold-400: #d79d3f;
  --color-gothic-gold-500: #be8200;
  --color-gothic-gold-600: #996800;
  --color-gothic-gold-700: #7a5200;
  --color-gothic-gold-800: #5f3f00;
  --color-gothic-gold-900: #493000;
  --color-gothic-gold-950: #2e1c00;
}

Similar palettes