Muted Purple to Nightmare Color Palette

About this palette

Muted Purple to Nightmare is a 4-color muted palette: #7F5C81 (Muted Purple), #BAA881 (Bangalore), #F2F5FF (Cotton Ball), #002618 (Nightmare). It mixes pink, yellow, white, green tones and feels cool overall. The strongest text pairing is #F2F5FF on #002618 with a contrast ratio of 14.94:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Muted Purple	rgb(127, 92, 129)	hsl(297, 17%, 43%)
Bangalore	rgb(186, 168, 129)	hsl(41, 29%, 62%)
Cotton Ball	rgb(242, 245, 255)	hsl(226, 100%, 97%)
Nightmare	rgb(0, 38, 24)	hsl(158, 100%, 7%)

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.

Aa14.94:1 Super#F2F5FF on #002618
Aa14.94:1 Super#002618 on #F2F5FF
Aa6.98:1 Good#BAA881 on #002618
Aa6.98:1 Good#002618 on #BAA881
Aa5.14:1 Good#7F5C81 on #F2F5FF
Aa5.14:1 Good#F2F5FF on #7F5C81

Color blindness preview

CSS variables

/* Muted Purple to Nightmare — https://swatchly.xyz/palette/7f5c81-baa881-f2f5ff-002618 */
:root {
  --muted-purple: #7f5c81;
  --bangalore: #baa881;
  --cotton-ball: #f2f5ff;
  --nightmare: #002618;
}

Tailwind CSS v4

/* Muted Purple to Nightmare — https://swatchly.xyz/palette/7f5c81-baa881-f2f5ff-002618 */
@theme {
  --color-muted-purple: #7f5c81;
  --color-muted-purple-50: #fef0ff;
  --color-muted-purple-100: #fbe1fc;
  --color-muted-purple-200: #e9cceb;
  --color-muted-purple-300: #d5b3d6;
  --color-muted-purple-400: #b692b8;
  --color-muted-purple-500: #9b769d;
  --color-muted-purple-600: #7f5c81;
  --color-muted-purple-700: #664768;
  --color-muted-purple-800: #513653;
  --color-muted-purple-900: #3f2941;
  --color-muted-purple-950: #281829;
  --color-bangalore: #baa881;
  --color-bangalore-50: #fff7e7;
  --color-bangalore-100: #faefd7;
  --color-bangalore-200: #e9dcc0;
  --color-bangalore-300: #d6c7a6;
  --color-bangalore-400: #baa881;
  --color-bangalore-500: #9c8b65;
  --color-bangalore-600: #806f4a;
  --color-bangalore-700: #665735;
  --color-bangalore-800: #504325;
  --color-bangalore-900: #3e3219;
  --color-bangalore-950: #261e0c;
  --color-cotton-ball: #f2f5ff;
  --color-cotton-ball-50: #f2f5ff;
  --color-cotton-ball-100: #e9ebf1;
  --color-cotton-ball-200: #d5d7df;
  --color-cotton-ball-300: #bec1c9;
  --color-cotton-ball-400: #9fa1aa;
  --color-cotton-ball-500: #83868f;
  --color-cotton-ball-600: #696b74;
  --color-cotton-ball-700: #53555d;
  --color-cotton-ball-800: #404249;
  --color-cotton-ball-900: #313338;
  --color-cotton-ball-950: #1e1f23;
  --color-nightmare: #002618;
  --color-nightmare-50: #e5fbf0;
  --color-nightmare-100: #d9f2e5;
  --color-nightmare-200: #c2e0d1;
  --color-nightmare-300: #a8cab9;
  --color-nightmare-400: #86ac99;
  --color-nightmare-500: #6a907e;
  --color-nightmare-600: #507564;
  --color-nightmare-700: #3c5d4e;
  --color-nightmare-800: #2c493c;
  --color-nightmare-900: #1f382d;
  --color-nightmare-950: #002618;
}