Start generating

Aquarius to Purple Illusion color palette

00B3C3AquariusE89F00Hot ButterCC0068Vampiric BloodlustC97000CajetaA857CBLegendary LavenderBAB1FFPurple Illusion
Open in generator Export PNG, PDF, ASE…

About this palette

Aquarius to Purple Illusion is a 6-color vibrant, neon palette: #00B3C3 (Aquarius), #E89F00 (Hot Butter), #CC0068 (Vampiric Bloodlust), #C97000 (Cajeta), #A857CB (Legendary Lavender), #BAB1FF (Purple Illusion). It mixes turquoise, yellow, red, orange, purple tones and feels balanced overall. The strongest text pairing is #CC0068 on #BAB1FF with a contrast ratio of 2.87:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Aquariusrgb(0, 179, 195)hsl(185, 100%, 38%)
Hot Butterrgb(232, 159, 0)hsl(41, 100%, 45%)
Vampiric Bloodlustrgb(204, 0, 104)hsl(329, 100%, 40%)
Cajetargb(201, 112, 0)hsl(33, 100%, 39%)
Legendary Lavenderrgb(168, 87, 203)hsl(282, 53%, 57%)
Purple Illusionrgb(186, 177, 255)hsl(247, 100%, 85%)

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

    • Protanopia
    • Deuteranopia
    • Tritanopia
    • Achromatopsia
    • Dog vision

    CSS variables

    /* Aquarius to Purple Illusion — https://swatchly.xyz/palette/00b3c3-e89f00-cc0068-c97000-a857cb-bab1ff */
:root {
  --aquarius: #00b3c3;
  --hot-butter: #e89f00;
  --vampiric-bloodlust: #cc0068;
  --cajeta: #c97000;
  --legendary-lavender: #a857cb;
  --purple-illusion: #bab1ff;
}

    Tailwind CSS v4

    /* Aquarius to Purple Illusion — https://swatchly.xyz/palette/00b3c3-e89f00-cc0068-c97000-a857cb-bab1ff */
@theme {
  --color-aquarius: #00b3c3;
  --color-aquarius-50: #dcfbff;
  --color-aquarius-100: #b7f7ff;
  --color-aquarius-200: #8ae7f3;
  --color-aquarius-300: #61d1df;
  --color-aquarius-400: #00b3c3;
  --color-aquarius-500: #0095a3;
  --color-aquarius-600: #007883;
  --color-aquarius-700: #006069;
  --color-aquarius-800: #004b52;
  --color-aquarius-900: #003a40;
  --color-aquarius-950: #002529;
  --color-hot-butter: #e89f00;
  --color-hot-butter-50: #fff9f1;
  --color-hot-butter-100: #fff0dc;
  --color-hot-butter-200: #ffdba9;
  --color-hot-butter-300: #fcc168;
  --color-hot-butter-400: #e89f00;
  --color-hot-butter-500: #c18400;
  --color-hot-butter-600: #9b6900;
  --color-hot-butter-700: #7b5200;
  --color-hot-butter-800: #603f00;
  --color-hot-butter-900: #492f00;
  --color-hot-butter-950: #2d1b00;
  --color-vampiric-bloodlust: #cc0068;
  --color-vampiric-bloodlust-50: #fff1f4;
  --color-vampiric-bloodlust-100: #ffe4eb;
  --color-vampiric-bloodlust-200: #ffc8d6;
  --color-vampiric-bloodlust-300: #ffa5bf;
  --color-vampiric-bloodlust-400: #ff699d;
  --color-vampiric-bloodlust-500: #eb3881;
  --color-vampiric-bloodlust-600: #cc0068;
  --color-vampiric-bloodlust-700: #a40052;
  --color-vampiric-bloodlust-800: #820040;
  --color-vampiric-bloodlust-900: #650030;
  --color-vampiric-bloodlust-950: #42001d;
  --color-cajeta: #c97000;
  --color-cajeta-50: #fff3eb;
  --color-cajeta-100: #ffe8d6;
  --color-cajeta-200: #ffcfa8;
  --color-cajeta-300: #ffaf6c;
  --color-cajeta-400: #e48d3c;
  --color-cajeta-500: #c97000;
  --color-cajeta-600: #a35900;
  --color-cajeta-700: #824600;
  --color-cajeta-800: #663600;
  --color-cajeta-900: #4f2900;
  --color-cajeta-950: #331800;
  --color-legendary-lavender: #a857cb;
  --color-legendary-lavender-50: #faf0ff;
  --color-legendary-lavender-100: #f5e1ff;
  --color-legendary-lavender-200: #ebc3ff;
  --color-legendary-lavender-300: #e09eff;
  --color-legendary-lavender-400: #c576e8;
  --color-legendary-lavender-500: #a857cb;
  --color-legendary-lavender-600: #8c3dad;
  --color-legendary-lavender-700: #732990;
  --color-legendary-lavender-800: #5c1a76;
  --color-legendary-lavender-900: #49105f;
  --color-legendary-lavender-950: #30063f;
  --color-purple-illusion: #bab1ff;
  --color-purple-illusion-50: #f2f1ff;
  --color-purple-illusion-100: #e7e5ff;
  --color-purple-illusion-200: #d2cdff;
  --color-purple-illusion-300: #bab1ff;
  --color-purple-illusion-400: #9c93dc;
  --color-purple-illusion-500: #8278c1;
  --color-purple-illusion-600: #685ea4;
  --color-purple-illusion-700: #534988;
  --color-purple-illusion-800: #41386f;
  --color-purple-illusion-900: #322a59;
  --color-purple-illusion-950: #1f193b;
}

    Similar palettes