Muted Purple to Blank Canvas Color Palette

About this palette

Muted Purple to Blank Canvas is a 4-color muted, vintage palette: #895E87 (Muted Purple), #BCAB83 (Faded Letter), #003134 (Elite Teal), #FFEFD6 (Blank Canvas). It mixes pink, yellow, turquoise, white tones and feels balanced overall. The strongest text pairing is #003134 on #FFEFD6 with a contrast ratio of 12.47:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muted Purple	rgb(137, 94, 135)	hsl(303, 19%, 45%)
Faded Letter	rgb(188, 171, 131)	hsl(42, 30%, 63%)
Elite Teal	rgb(0, 49, 52)	hsl(183, 100%, 10%)
Blank Canvas	rgb(255, 239, 214)	hsl(37, 100%, 92%)

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.

Aa12.47:1 Super#003134 on #FFEFD6
Aa12.47:1 Super#FFEFD6 on #003134
Aa6.24:1 Good#BCAB83 on #003134
Aa6.24:1 Good#003134 on #BCAB83
Aa4.63:1 Good#895E87 on #FFEFD6
Aa4.63:1 Good#FFEFD6 on #895E87

Color blindness preview

CSS variables

/* Muted Purple to Blank Canvas — https://swatchly.xyz/palette/895e87-bcab83-003134-ffefd6 */
:root {
  --muted-purple: #895e87;
  --faded-letter: #bcab83;
  --elite-teal: #003134;
  --blank-canvas: #ffefd6;
}

Tailwind CSS v4

/* Muted Purple to Blank Canvas — https://swatchly.xyz/palette/895e87-bcab83-003134-ffefd6 */
@theme {
  --color-muted-purple: #895e87;
  --color-muted-purple-50: #fff0fe;
  --color-muted-purple-100: #ffe1fd;
  --color-muted-purple-200: #efcced;
  --color-muted-purple-300: #dcb4d9;
  --color-muted-purple-400: #bf93bd;
  --color-muted-purple-500: #a478a2;
  --color-muted-purple-600: #895e87;
  --color-muted-purple-700: #6f486d;
  --color-muted-purple-800: #583757;
  --color-muted-purple-900: #452844;
  --color-muted-purple-950: #2c182b;
  --color-faded-letter: #bcab83;
  --color-faded-letter-50: #fff9ea;
  --color-faded-letter-100: #fbf0d8;
  --color-faded-letter-200: #eadec2;
  --color-faded-letter-300: #d7c9a8;
  --color-faded-letter-400: #bcab83;
  --color-faded-letter-500: #9e8d67;
  --color-faded-letter-600: #81714b;
  --color-faded-letter-700: #675936;
  --color-faded-letter-800: #514425;
  --color-faded-letter-900: #3e3319;
  --color-faded-letter-950: #261e0c;
  --color-elite-teal: #003134;
  --color-elite-teal-50: #e2fbfd;
  --color-elite-teal-100: #d5f2f3;
  --color-elite-teal-200: #bddfe1;
  --color-elite-teal-300: #a3c9cc;
  --color-elite-teal-400: #7ea9ac;
  --color-elite-teal-500: #608c8f;
  --color-elite-teal-600: #456f72;
  --color-elite-teal-700: #305659;
  --color-elite-teal-800: #204143;
  --color-elite-teal-900: #003134;
  --color-elite-teal-950: #0a1c1d;
  --color-blank-canvas: #ffefd6;
  --color-blank-canvas-50: #ffefd6;
  --color-blank-canvas-100: #f1e7d7;
  --color-blank-canvas-200: #dfd3c1;
  --color-blank-canvas-300: #cabda8;
  --color-blank-canvas-400: #ac9e88;
  --color-blank-canvas-500: #92836d;
  --color-blank-canvas-600: #776a54;
  --color-blank-canvas-700: #605340;
  --color-blank-canvas-800: #4b4130;
  --color-blank-canvas-900: #3a3123;
  --color-blank-canvas-950: #251e14;
}