Professor Plum to Minute Mauve Color Palette

About this palette

Professor Plum to Minute Mauve is a 4-color muted palette: #3E3440 (Professor Plum), #A699A8 (Walkway), #796E7E (Sakura Night), #F5E5F9 (Minute Mauve). It mixes gray, white tones and feels balanced overall. The strongest text pairing is #3E3440 on #F5E5F9 with a contrast ratio of 9.86:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Professor Plum	rgb(62, 52, 64)	hsl(290, 10%, 23%)
Walkway	rgb(166, 153, 168)	hsl(292, 8%, 63%)
Sakura Night	rgb(121, 110, 126)	hsl(281, 7%, 46%)
Minute Mauve	rgb(245, 229, 249)	hsl(288, 62%, 94%)

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.

Aa9.86:1 Very good#3E3440 on #F5E5F9
Aa9.86:1 Very good#F5E5F9 on #3E3440
Aa4.37:1 Poor#3E3440 on #A699A8
Aa4.37:1 Poor#A699A8 on #3E3440
Aa4.02:1 Poor#796E7E on #F5E5F9
Aa4.02:1 Poor#F5E5F9 on #796E7E

Color blindness preview

CSS variables

/* Professor Plum to Minute Mauve — https://swatchly.xyz/palette/3e3440-a699a8-796e7e-f5e5f9 */
:root {
  --professor-plum: #3e3440;
  --walkway: #a699a8;
  --sakura-night: #796e7e;
  --minute-mauve: #f5e5f9;
}

Tailwind CSS v4

/* Professor Plum to Minute Mauve — https://swatchly.xyz/palette/3e3440-a699a8-796e7e-f5e5f9 */
@theme {
  --color-professor-plum: #3e3440;
  --color-professor-plum-50: #f9f2fb;
  --color-professor-plum-100: #f0e8f2;
  --color-professor-plum-200: #ddd4df;
  --color-professor-plum-300: #c7bdc9;
  --color-professor-plum-400: #aa9eac;
  --color-professor-plum-500: #8f8492;
  --color-professor-plum-600: #756a78;
  --color-professor-plum-700: #5f5561;
  --color-professor-plum-800: #4c434e;
  --color-professor-plum-900: #3e3440;
  --color-professor-plum-950: #272128;
  --color-walkway: #a699a8;
  --color-walkway-50: #f9f1fa;
  --color-walkway-100: #efe6f0;
  --color-walkway-200: #dbd1dd;
  --color-walkway-300: #c5b9c7;
  --color-walkway-400: #a699a8;
  --color-walkway-500: #8b7e8d;
  --color-walkway-600: #716573;
  --color-walkway-700: #5a505c;
  --color-walkway-800: #473e48;
  --color-walkway-900: #372f38;
  --color-walkway-950: #231d24;
  --color-sakura-night: #796e7e;
  --color-sakura-night-50: #f9f2fc;
  --color-sakura-night-100: #f1e9f4;
  --color-sakura-night-200: #dfd6e3;
  --color-sakura-night-300: #cbc0cf;
  --color-sakura-night-400: #ada2b2;
  --color-sakura-night-500: #938798;
  --color-sakura-night-600: #796e7e;
  --color-sakura-night-700: #605765;
  --color-sakura-night-800: #4c4350;
  --color-sakura-night-900: #3a333d;
  --color-sakura-night-950: #241f27;
  --color-minute-mauve: #f5e5f9;
  --color-minute-mauve-50: #fbf2fd;
  --color-minute-mauve-100: #f5e5f9;
  --color-minute-mauve-200: #dfd3e2;
  --color-minute-mauve-300: #c9bccc;
  --color-minute-mauve-400: #aa9cae;
  --color-minute-mauve-500: #8f8092;
  --color-minute-mauve-600: #746677;
  --color-minute-mauve-700: #5d5060;
  --color-minute-mauve-800: #493e4b;
  --color-minute-mauve-900: #382f3a;
  --color-minute-mauve-950: #231d25;
}