Sunshone Plum to Splashdown color palette

87697FSunshone Plum 809B85Parisian Patina 5A4556Black Magic A9BFB2Meadow Morn 221720Night Demons D7E8DCSplashdown

Open in generator Export PNG, PDF, ASE…

About this palette

Sunshone Plum to Splashdown is a 6-color muted palette: #87697F (Sunshone Plum), #809B85 (Parisian Patina), #5A4556 (Black Magic), #A9BFB2 (Meadow Morn), #221720 (Night Demons), #D7E8DC (Splashdown). It mixes pink, green, purple, gray tones and feels warm overall. The strongest text pairing is #221720 on #D7E8DC with a contrast ratio of 13.59:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunshone Plum	rgb(135, 105, 127)	hsl(316, 13%, 47%)
Parisian Patina	rgb(128, 155, 133)	hsl(131, 12%, 55%)
Black Magic	rgb(90, 69, 86)	hsl(311, 13%, 31%)
Meadow Morn	rgb(169, 191, 178)	hsl(145, 15%, 71%)
Night Demons	rgb(34, 23, 32)	hsl(311, 19%, 11%)
Splashdown	rgb(215, 232, 220)	hsl(138, 27%, 88%)

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.

Aa13.59:1 Super#221720 on #D7E8DC
Aa13.59:1 Super#D7E8DC on #221720
Aa8.90:1 Very good#A9BFB2 on #221720
Aa8.90:1 Very good#221720 on #A9BFB2
Aa6.80:1 Good#5A4556 on #D7E8DC
Aa6.80:1 Good#D7E8DC on #5A4556
Aa5.73:1 Good#809B85 on #221720
Aa5.73:1 Good#221720 on #809B85

Color blindness preview

CSS variables

/* Sunshone Plum to Splashdown — https://swatchly.xyz/palette/87697f-809b85-5a4556-a9bfb2-221720-d7e8dc */
:root {
  --sunshone-plum: #87697f;
  --parisian-patina: #809b85;
  --black-magic: #5a4556;
  --meadow-morn: #a9bfb2;
  --night-demons: #221720;
  --splashdown: #d7e8dc;
}

Tailwind CSS v4

/* Sunshone Plum to Splashdown — https://swatchly.xyz/palette/87697f-809b85-5a4556-a9bfb2-221720-d7e8dc */
@theme {
  --color-sunshone-plum: #87697f;
  --color-sunshone-plum-50: #fff0fb;
  --color-sunshone-plum-100: #fbe5f4;
  --color-sunshone-plum-200: #ebd2e4;
  --color-sunshone-plum-300: #d8bcd0;
  --color-sunshone-plum-400: #bb9db3;
  --color-sunshone-plum-500: #a18299;
  --color-sunshone-plum-600: #87697f;
  --color-sunshone-plum-700: #6d5266;
  --color-sunshone-plum-800: #563f50;
  --color-sunshone-plum-900: #432f3e;
  --color-sunshone-plum-950: #2b1c27;
  --color-parisian-patina: #809b85;
  --color-parisian-patina-50: #edfcef;
  --color-parisian-patina-100: #e4f5e7;
  --color-parisian-patina-200: #d1e5d4;
  --color-parisian-patina-300: #bad1be;
  --color-parisian-patina-400: #9bb49f;
  --color-parisian-patina-500: #809b85;
  --color-parisian-patina-600: #647e69;
  --color-parisian-patina-700: #4c6451;
  --color-parisian-patina-800: #394e3d;
  --color-parisian-patina-900: #2a3c2d;
  --color-parisian-patina-950: #18251a;
  --color-black-magic: #5a4556;
  --color-black-magic-50: #fff0fb;
  --color-black-magic-100: #f6e6f2;
  --color-black-magic-200: #e2cfde;
  --color-black-magic-300: #ccb6c7;
  --color-black-magic-400: #ac94a7;
  --color-black-magic-500: #8f788a;
  --color-black-magic-600: #725d6e;
  --color-black-magic-700: #5a4556;
  --color-black-magic-800: #463643;
  --color-black-magic-900: #362934;
  --color-black-magic-950: #221820;
  --color-meadow-morn: #a9bfb2;
  --color-meadow-morn-50: #e7f5ed;
  --color-meadow-morn-100: #dbeae1;
  --color-meadow-morn-200: #c4d6cb;
  --color-meadow-morn-300: #a9bfb2;
  --color-meadow-morn-400: #8ca195;
  --color-meadow-morn-500: #72877b;
  --color-meadow-morn-600: #5a6e62;
  --color-meadow-morn-700: #46584e;
  --color-meadow-morn-800: #36463d;
  --color-meadow-morn-900: #29362f;
  --color-meadow-morn-950: #18221c;
  --color-night-demons: #221720;
  --color-night-demons-50: #fbf2f9;
  --color-night-demons-100: #f2e8ef;
  --color-night-demons-200: #dfd3dd;
  --color-night-demons-300: #c9bcc7;
  --color-night-demons-400: #ab9ca8;
  --color-night-demons-500: #8f808c;
  --color-night-demons-600: #736570;
  --color-night-demons-700: #5b4f58;
  --color-night-demons-800: #463c44;
  --color-night-demons-900: #352c33;
  --color-night-demons-950: #221720;
  --color-splashdown: #d7e8dc;
  --color-splashdown-50: #e7f1ea;
  --color-splashdown-100: #d7e8dc;
  --color-splashdown-200: #c8d5cb;
  --color-splashdown-300: #b1c0b6;
  --color-splashdown-400: #93a297;
  --color-splashdown-500: #79887d;
  --color-splashdown-600: #606f65;
  --color-splashdown-700: #4c5950;
  --color-splashdown-800: #3a463e;
  --color-splashdown-900: #2c362f;
  --color-splashdown-950: #1a211c;
}