Perfume Cloud to Mystical Shadow Color Palette

About this palette

Perfume Cloud to Mystical Shadow is a 4-color muted, gradient palette: #E1C9C8 (Perfume Cloud), #649191 (Martian Cerulean), #556554 (Black Forest), #342D35 (Mystical Shadow). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #E1C9C8 on #342D35 with a contrast ratio of 8.51:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Perfume Cloud	rgb(225, 201, 200)	hsl(2, 29%, 83%)
Martian Cerulean	rgb(100, 145, 145)	hsl(180, 18%, 48%)
Black Forest	rgb(85, 101, 84)	hsl(116, 9%, 36%)
Mystical Shadow	rgb(52, 45, 53)	hsl(292, 8%, 19%)

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.

Aa8.51:1 Very good#E1C9C8 on #342D35
Aa8.51:1 Very good#342D35 on #E1C9C8
Aa3.97:1 Poor#E1C9C8 on #556554
Aa3.97:1 Poor#556554 on #E1C9C8
Aa3.82:1 Poor#649191 on #342D35
Aa3.82:1 Poor#342D35 on #649191

Color blindness preview

CSS variables

/* Perfume Cloud to Mystical Shadow — https://swatchly.xyz/palette/e1c9c8-649191-556554-342d35 */
:root {
  --perfume-cloud: #e1c9c8;
  --martian-cerulean: #649191;
  --black-forest: #556554;
  --mystical-shadow: #342d35;
}

Tailwind CSS v4

/* Perfume Cloud to Mystical Shadow — https://swatchly.xyz/palette/e1c9c8-649191-556554-342d35 */
@theme {
  --color-perfume-cloud: #e1c9c8;
  --color-perfume-cloud-50: #faeceb;
  --color-perfume-cloud-100: #f0e0df;
  --color-perfume-cloud-200: #e1c9c8;
  --color-perfume-cloud-300: #cab5b4;
  --color-perfume-cloud-400: #ac9696;
  --color-perfume-cloud-500: #927c7c;
  --color-perfume-cloud-600: #786463;
  --color-perfume-cloud-700: #614f4e;
  --color-perfume-cloud-800: #4e3e3d;
  --color-perfume-cloud-900: #3d2f2e;
  --color-perfume-cloud-950: #261c1c;
  --color-martian-cerulean: #649191;
  --color-martian-cerulean-50: #e2fbfb;
  --color-martian-cerulean-100: #d6f2f2;
  --color-martian-cerulean-200: #bee0e0;
  --color-martian-cerulean-300: #a3cbca;
  --color-martian-cerulean-400: #81acac;
  --color-martian-cerulean-500: #649191;
  --color-martian-cerulean-600: #4a7676;
  --color-martian-cerulean-700: #365e5e;
  --color-martian-cerulean-800: #264a4a;
  --color-martian-cerulean-900: #1b3939;
  --color-martian-cerulean-950: #0e2424;
  --color-black-forest: #556554;
  --color-black-forest-50: #eef9ee;
  --color-black-forest-100: #e3efe3;
  --color-black-forest-200: #d1ded0;
  --color-black-forest-300: #bbcaba;
  --color-black-forest-400: #9cad9b;
  --color-black-forest-500: #829381;
  --color-black-forest-600: #6a7a69;
  --color-black-forest-700: #556554;
  --color-black-forest-800: #424f41;
  --color-black-forest-900: #313d31;
  --color-black-forest-950: #1e261d;
  --color-mystical-shadow: #342d35;
  --color-mystical-shadow-50: #f8f3f9;
  --color-mystical-shadow-100: #efe9ef;
  --color-mystical-shadow-200: #dcd5dc;
  --color-mystical-shadow-300: #c6bec7;
  --color-mystical-shadow-400: #a69ea7;
  --color-mystical-shadow-500: #8a828b;
  --color-mystical-shadow-600: #6f6770;
  --color-mystical-shadow-700: #575058;
  --color-mystical-shadow-800: #433d44;
  --color-mystical-shadow-900: #342d35;
  --color-mystical-shadow-950: #1f1b20;
}