Puffy Cloud to Professor Plum Color Palette

About this palette

Puffy Cloud to Professor Plum is a 5-color muted, gradient palette: #D9D8F1 (Puffy Cloud), #A9A6BF (Pastel Purple), #8787A2 (Dusty Chimney), #5A5867 (Blackwater), #363544 (Professor Plum). It mixes gray, purple tones and feels cool overall. The strongest text pairing is #D9D8F1 on #363544 with a contrast ratio of 8.60:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puffy Cloud	rgb(217, 216, 241)	hsl(242, 47%, 90%)
Pastel Purple	rgb(169, 166, 191)	hsl(247, 16%, 70%)
Dusty Chimney	rgb(135, 135, 162)	hsl(240, 13%, 58%)
Blackwater	rgb(90, 88, 103)	hsl(248, 8%, 37%)
Professor Plum	rgb(54, 53, 68)	hsl(244, 12%, 24%)

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.60:1 Very good#D9D8F1 on #363544
Aa8.60:1 Very good#363544 on #D9D8F1
Aa5.08:1 Good#A9A6BF on #363544
Aa5.08:1 Good#363544 on #A9A6BF
Aa4.97:1 Good#D9D8F1 on #5A5867
Aa4.97:1 Good#5A5867 on #D9D8F1
Aa3.44:1 Poor#8787A2 on #363544
Aa3.44:1 Poor#363544 on #8787A2

Color blindness preview

CSS variables

/* Puffy Cloud to Professor Plum — https://swatchly.xyz/palette/d9d8f1-a9a6bf-8787a2-5a5867-363544 */
:root {
  --puffy-cloud: #d9d8f1;
  --pastel-purple: #a9a6bf;
  --dusty-chimney: #8787a2;
  --blackwater: #5a5867;
  --professor-plum: #363544;
}

Tailwind CSS v4

/* Puffy Cloud to Professor Plum — https://swatchly.xyz/palette/d9d8f1-a9a6bf-8787a2-5a5867-363544 */
@theme {
  --color-puffy-cloud: #d9d8f1;
  --color-puffy-cloud-50: #f7f6ff;
  --color-puffy-cloud-100: #edecfc;
  --color-puffy-cloud-200: #d9d8f1;
  --color-puffy-cloud-300: #c2c1d6;
  --color-puffy-cloud-400: #a2a1b8;
  --color-puffy-cloud-500: #86859c;
  --color-puffy-cloud-600: #6b6a80;
  --color-puffy-cloud-700: #545367;
  --color-puffy-cloud-800: #414051;
  --color-puffy-cloud-900: #32313f;
  --color-puffy-cloud-950: #1f1e28;
  --color-pastel-purple: #a9a6bf;
  --color-pastel-purple-50: #f8f7ff;
  --color-pastel-purple-100: #efedfd;
  --color-pastel-purple-200: #dddbed;
  --color-pastel-purple-300: #c7c5da;
  --color-pastel-purple-400: #a9a6bf;
  --color-pastel-purple-500: #8c89a1;
  --color-pastel-purple-600: #706d84;
  --color-pastel-purple-700: #59566b;
  --color-pastel-purple-800: #444254;
  --color-pastel-purple-900: #343241;
  --color-pastel-purple-950: #1f1e28;
  --color-dusty-chimney: #8787a2;
  --color-dusty-chimney-50: #f5f5ff;
  --color-dusty-chimney-100: #eaebfd;
  --color-dusty-chimney-200: #d7d7ed;
  --color-dusty-chimney-300: #c1c1d9;
  --color-dusty-chimney-400: #a2a2bc;
  --color-dusty-chimney-500: #8787a2;
  --color-dusty-chimney-600: #6c6c86;
  --color-dusty-chimney-700: #55556c;
  --color-dusty-chimney-800: #424256;
  --color-dusty-chimney-900: #323243;
  --color-dusty-chimney-950: #1e1e2b;
  --color-blackwater: #5a5867;
  --color-blackwater-50: #f5f4fe;
  --color-blackwater-100: #ebeaf5;
  --color-blackwater-200: #d8d7e4;
  --color-blackwater-300: #c2c1cf;
  --color-blackwater-400: #a4a2b2;
  --color-blackwater-500: #898798;
  --color-blackwater-600: #706e7d;
  --color-blackwater-700: #5a5867;
  --color-blackwater-800: #464451;
  --color-blackwater-900: #36343f;
  --color-blackwater-950: #212028;
  --color-professor-plum: #363544;
  --color-professor-plum-50: #f4f4ff;
  --color-professor-plum-100: #eaeaf6;
  --color-professor-plum-200: #d6d6e4;
  --color-professor-plum-300: #c0bfcf;
  --color-professor-plum-400: #a1a0b2;
  --color-professor-plum-500: #878697;
  --color-professor-plum-600: #6d6c7d;
  --color-professor-plum-700: #575666;
  --color-professor-plum-800: #454452;
  --color-professor-plum-900: #363544;
  --color-professor-plum-950: #22212a;
}