Eclipse Elixir to Fizzy & Dizzy color palette

About this palette

Eclipse Elixir to Fizzy & Dizzy is a 4-color vintage palette: #241C38 (Eclipse Elixir), #615D00 (Ayahuasca Vine), #A39DD8 (Imperial Lilac), #F7F6C8 (Fizzy & Dizzy). It mixes purple, brown, white tones and feels balanced overall. The strongest text pairing is #241C38 on #F7F6C8 with a contrast ratio of 14.61:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Eclipse Elixirrgb(36, 28, 56)hsl(257, 33%, 16%)
Ayahuasca Vinergb(97, 93, 0)hsl(58, 100%, 19%)
Imperial Lilacrgb(163, 157, 216)hsl(246, 43%, 73%)
Fizzy & Dizzyrgb(247, 246, 200)hsl(59, 75%, 88%)

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.

  • Aa14.61:1 Super#241C38 on #F7F6C8
  • Aa14.61:1 Super#F7F6C8 on #241C38
  • Aa6.45:1 Good#241C38 on #A39DD8
  • Aa6.45:1 Good#A39DD8 on #241C38
  • Aa6.17:1 Good#615D00 on #F7F6C8
  • Aa6.17:1 Good#F7F6C8 on #615D00

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Eclipse Elixir to Fizzy & Dizzy — https://swatchly.xyz/palette/241c38-615d00-a39dd8-f7f6c8 */
:root {
  --eclipse-elixir: #241c38;
  --ayahuasca-vine: #615d00;
  --imperial-lilac: #a39dd8;
  --fizzy-dizzy: #f7f6c8;
}

Tailwind CSS v4

/* Eclipse Elixir to Fizzy & Dizzy — https://swatchly.xyz/palette/241c38-615d00-a39dd8-f7f6c8 */
@theme {
  --color-eclipse-elixir: #241c38;
  --color-eclipse-elixir-50: #f6f3ff;
  --color-eclipse-elixir-100: #ece7ff;
  --color-eclipse-elixir-200: #d9d3ef;
  --color-eclipse-elixir-300: #c3bcdb;
  --color-eclipse-elixir-400: #a49cbe;
  --color-eclipse-elixir-500: #8981a3;
  --color-eclipse-elixir-600: #6f6788;
  --color-eclipse-elixir-700: #59516f;
  --color-eclipse-elixir-800: #46405a;
  --color-eclipse-elixir-900: #373147;
  --color-eclipse-elixir-950: #241c38;
  --color-ayahuasca-vine: #615d00;
  --color-ayahuasca-vine-50: #f9f8ce;
  --color-ayahuasca-vine-100: #efefbf;
  --color-ayahuasca-vine-200: #dedca4;
  --color-ayahuasca-vine-300: #c9c786;
  --color-ayahuasca-vine-400: #aba85f;
  --color-ayahuasca-vine-500: #918e40;
  --color-ayahuasca-vine-600: #777325;
  --color-ayahuasca-vine-700: #615d00;
  --color-ayahuasca-vine-800: #4c4900;
  --color-ayahuasca-vine-900: #3a3800;
  --color-ayahuasca-vine-950: #242300;
  --color-imperial-lilac: #a39dd8;
  --color-imperial-lilac-50: #f6f5ff;
  --color-imperial-lilac-100: #ecebff;
  --color-imperial-lilac-200: #d8d5ff;
  --color-imperial-lilac-300: #c2bdf0;
  --color-imperial-lilac-400: #a39dd8;
  --color-imperial-lilac-500: #8781ba;
  --color-imperial-lilac-600: #6c669c;
  --color-imperial-lilac-700: #564f80;
  --color-imperial-lilac-800: #423c67;
  --color-imperial-lilac-900: #322d52;
  --color-imperial-lilac-950: #1f1b35;
  --color-fizzy-dizzy: #f7f6c8;
  --color-fizzy-dizzy-50: #f7f6c8;
  --color-fizzy-dizzy-100: #ecebcf;
  --color-fizzy-dizzy-200: #d9d8b7;
  --color-fizzy-dizzy-300: #c3c29d;
  --color-fizzy-dizzy-400: #a5a47a;
  --color-fizzy-dizzy-500: #8a885e;
  --color-fizzy-dizzy-600: #706e46;
  --color-fizzy-dizzy-700: #595732;
  --color-fizzy-dizzy-800: #464424;
  --color-fizzy-dizzy-900: #363419;
  --color-fizzy-dizzy-950: #21200c;
}

Similar palettes