Purple Illusion to Purple Prose Color Palette

About this palette

Purple Illusion to Purple Prose is a 5-color cool, vintage palette: #B3BDF6 (Purple Illusion), #8495B9 (Celestial Horizon), #9B8128 (Fernweh), #327964 (Majorelle Gardens), #5C3145 (Purple Prose). It mixes purple, blue, yellow, turquoise, red tones and feels cool overall. The strongest text pairing is #B3BDF6 on #5C3145 with a contrast ratio of 5.82:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple Illusion	rgb(179, 189, 246)	hsl(231, 79%, 83%)
Celestial Horizon	rgb(132, 149, 185)	hsl(221, 27%, 62%)
Fernweh	rgb(155, 129, 40)	hsl(46, 59%, 38%)
Majorelle Gardens	rgb(50, 121, 100)	hsl(162, 42%, 34%)
Purple Prose	rgb(92, 49, 69)	hsl(332, 30%, 28%)

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.

Aa5.82:1 Good#B3BDF6 on #5C3145
Aa5.82:1 Good#5C3145 on #B3BDF6
Aa3.53:1 Poor#8495B9 on #5C3145
Aa3.53:1 Poor#5C3145 on #8495B9

Color blindness preview

CSS variables

/* Purple Illusion to Purple Prose — https://swatchly.xyz/palette/b3bdf6-8495b9-9b8128-327964-5c3145 */
:root {
  --purple-illusion: #b3bdf6;
  --celestial-horizon: #8495b9;
  --fernweh: #9b8128;
  --majorelle-gardens: #327964;
  --purple-prose: #5c3145;
}

Tailwind CSS v4

/* Purple Illusion to Purple Prose — https://swatchly.xyz/palette/b3bdf6-8495b9-9b8128-327964-5c3145 */
@theme {
  --color-purple-illusion: #b3bdf6;
  --color-purple-illusion-50: #f2f5ff;
  --color-purple-illusion-100: #e6eaff;
  --color-purple-illusion-200: #cdd5ff;
  --color-purple-illusion-300: #b3bdf6;
  --color-purple-illusion-400: #959ed3;
  --color-purple-illusion-500: #7982b7;
  --color-purple-illusion-600: #60679a;
  --color-purple-illusion-700: #4b517f;
  --color-purple-illusion-800: #393f66;
  --color-purple-illusion-900: #2b2f51;
  --color-purple-illusion-950: #1a1d35;
  --color-celestial-horizon: #8495b9;
  --color-celestial-horizon-50: #eaf1ff;
  --color-celestial-horizon-100: #d8e5ff;
  --color-celestial-horizon-200: #c0cfed;
  --color-celestial-horizon-300: #a6b6d8;
  --color-celestial-horizon-400: #8495b9;
  --color-celestial-horizon-500: #6c7c9f;
  --color-celestial-horizon-600: #556484;
  --color-celestial-horizon-700: #424f6c;
  --color-celestial-horizon-800: #333e58;
  --color-celestial-horizon-900: #273146;
  --color-celestial-horizon-950: #181f2f;
  --color-fernweh: #9b8128;
  --color-fernweh-50: #fff4d4;
  --color-fernweh-100: #faeab7;
  --color-fernweh-200: #e9d598;
  --color-fernweh-300: #d5be77;
  --color-fernweh-400: #b79d4c;
  --color-fernweh-500: #9b8128;
  --color-fernweh-600: #806700;
  --color-fernweh-700: #665100;
  --color-fernweh-800: #503f00;
  --color-fernweh-900: #3e3100;
  --color-fernweh-950: #271e00;
  --color-majorelle-gardens: #327964;
  --color-majorelle-gardens-50: #dafff1;
  --color-majorelle-gardens-100: #cbf6e6;
  --color-majorelle-gardens-200: #b1e4d2;
  --color-majorelle-gardens-300: #93cfba;
  --color-majorelle-gardens-400: #6db09a;
  --color-majorelle-gardens-500: #4f947e;
  --color-majorelle-gardens-600: #327964;
  --color-majorelle-gardens-700: #1f614e;
  --color-majorelle-gardens-800: #104d3d;
  --color-majorelle-gardens-900: #063c2e;
  --color-majorelle-gardens-950: #02261c;
  --color-purple-prose: #5c3145;
  --color-purple-prose-50: #fff1f6;
  --color-purple-prose-100: #ffe2ee;
  --color-purple-prose-200: #f3cbdb;
  --color-purple-prose-300: #dfb2c5;
  --color-purple-prose-400: #c291a5;
  --color-purple-prose-500: #a6758a;
  --color-purple-prose-600: #895b6f;
  --color-purple-prose-700: #6f4558;
  --color-purple-prose-800: #5c3145;
  --color-purple-prose-900: #452735;
  --color-purple-prose-950: #2c1720;
}