Perfume Haze to Freefall Color Palette

About this palette

Perfume Haze to Freefall is a 4-color muted palette: #F2EAFF (Perfume Haze), #231D2B (Eclipse Elixir), #A397B8 (Wizard’s Brew), #564E62 (Freefall). It mixes white, gray, purple tones and feels cool overall. The strongest text pairing is #F2EAFF on #231D2B with a contrast ratio of 14.03:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perfume Haze	rgb(242, 234, 255)	hsl(263, 100%, 96%)
Eclipse Elixir	rgb(35, 29, 43)	hsl(266, 19%, 14%)
Wizard’s Brew	rgb(163, 151, 184)	hsl(262, 19%, 66%)
Freefall	rgb(86, 78, 98)	hsl(264, 11%, 35%)

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.03:1 Super#F2EAFF on #231D2B
Aa14.03:1 Super#231D2B on #F2EAFF
Aa6.76:1 Good#F2EAFF on #564E62
Aa6.76:1 Good#564E62 on #F2EAFF
Aa5.99:1 Good#231D2B on #A397B8
Aa5.99:1 Good#A397B8 on #231D2B

Color blindness preview

CSS variables

/* Perfume Haze to Freefall — https://swatchly.xyz/palette/f2eaff-231d2b-a397b8-564e62 */
:root {
  --perfume-haze: #f2eaff;
  --eclipse-elixir: #231d2b;
  --wizard-s-brew: #a397b8;
  --freefall: #564e62;
}

Tailwind CSS v4

/* Perfume Haze to Freefall — https://swatchly.xyz/palette/f2eaff-231d2b-a397b8-564e62 */
@theme {
  --color-perfume-haze: #f2eaff;
  --color-perfume-haze-50: #f9f6ff;
  --color-perfume-haze-100: #f2eaff;
  --color-perfume-haze-200: #ddd7e6;
  --color-perfume-haze-300: #c6bfd0;
  --color-perfume-haze-400: #a69fb2;
  --color-perfume-haze-500: #8a8396;
  --color-perfume-haze-600: #6f687a;
  --color-perfume-haze-700: #585262;
  --color-perfume-haze-800: #453f4d;
  --color-perfume-haze-900: #35303c;
  --color-perfume-haze-950: #211d26;
  --color-eclipse-elixir: #231d2b;
  --color-eclipse-elixir-50: #f7f3fe;
  --color-eclipse-elixir-100: #ede9f5;
  --color-eclipse-elixir-200: #dad4e3;
  --color-eclipse-elixir-300: #c4bdce;
  --color-eclipse-elixir-400: #a59eaf;
  --color-eclipse-elixir-500: #8a8394;
  --color-eclipse-elixir-600: #6f6979;
  --color-eclipse-elixir-700: #595362;
  --color-eclipse-elixir-800: #46404d;
  --color-eclipse-elixir-900: #36313c;
  --color-eclipse-elixir-950: #231d2b;
  --color-wizard-s-brew: #a397b8;
  --color-wizard-s-brew-50: #f6f1ff;
  --color-wizard-s-brew-100: #ede5fb;
  --color-wizard-s-brew-200: #d9d0ea;
  --color-wizard-s-brew-300: #c2b8d5;
  --color-wizard-s-brew-400: #a397b8;
  --color-wizard-s-brew-500: #887d9c;
  --color-wizard-s-brew-600: #6e6381;
  --color-wizard-s-brew-700: #584e69;
  --color-wizard-s-brew-800: #453c54;
  --color-wizard-s-brew-900: #362e42;
  --color-wizard-s-brew-950: #221c2b;
  --color-freefall: #564e62;
  --color-freefall-50: #f7f3ff;
  --color-freefall-100: #eee8f7;
  --color-freefall-200: #dad3e5;
  --color-freefall-300: #c3bcd0;
  --color-freefall-400: #a49bb1;
  --color-freefall-500: #887f95;
  --color-freefall-600: #6d6579;
  --color-freefall-700: #564e62;
  --color-freefall-800: #433d4c;
  --color-freefall-900: #332e3b;
  --color-freefall-950: #201c25;
}