Blackberry to Sugarwinkle color palette

3F162DBlackberry A73E78Plum Kingdom 772459Pretty in Prune CF7EA9Moonlight Mauve FFC2DBSugarwinkle

About this palette

Blackberry to Sugarwinkle is a 5-color warm, monochromatic palette: #3F162D (Blackberry), #A73E78 (Plum Kingdom), #772459 (Pretty in Prune), #CF7EA9 (Moonlight Mauve), #FFC2DB (Sugarwinkle). It mixes red, pink tones and feels warm overall. The strongest text pairing is #3F162D on #FFC2DB with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackberry	rgb(63, 22, 45)	hsl(326, 48%, 17%)
Plum Kingdom	rgb(167, 62, 120)	hsl(327, 46%, 45%)
Pretty in Prune	rgb(119, 36, 89)	hsl(322, 54%, 30%)
Moonlight Mauve	rgb(207, 126, 169)	hsl(328, 46%, 65%)
Sugarwinkle	rgb(255, 194, 219)	hsl(335, 100%, 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.

Aa10.26:1 Very good#3F162D on #FFC2DB
Aa10.26:1 Very good#FFC2DB on #3F162D
Aa6.42:1 Good#772459 on #FFC2DB
Aa6.42:1 Good#FFC2DB on #772459
Aa5.29:1 Good#3F162D on #CF7EA9
Aa5.29:1 Good#CF7EA9 on #3F162D
Aa3.88:1 Poor#A73E78 on #FFC2DB
Aa3.88:1 Poor#FFC2DB on #A73E78

Color blindness preview

CSS variables

/* Blackberry to Sugarwinkle — https://swatchly.xyz/palette/3f162d-a73e78-772459-cf7ea9-ffc2db */
:root {
  --blackberry: #3f162d;
  --plum-kingdom: #a73e78;
  --pretty-in-prune: #772459;
  --moonlight-mauve: #cf7ea9;
  --sugarwinkle: #ffc2db;
}

Tailwind CSS v4

/* Blackberry to Sugarwinkle — https://swatchly.xyz/palette/3f162d-a73e78-772459-cf7ea9-ffc2db */
@theme {
  --color-blackberry: #3f162d;
  --color-blackberry-50: #fff1f7;
  --color-blackberry-100: #ffe2ef;
  --color-blackberry-200: #f3cade;
  --color-blackberry-300: #e0b2c8;
  --color-blackberry-400: #c290a9;
  --color-blackberry-500: #a8768f;
  --color-blackberry-600: #8e5e76;
  --color-blackberry-700: #764a60;
  --color-blackberry-800: #613a4e;
  --color-blackberry-900: #4f2d3f;
  --color-blackberry-950: #3f162d;
  --color-plum-kingdom: #a73e78;
  --color-plum-kingdom-50: #fff1f7;
  --color-plum-kingdom-100: #ffe2ef;
  --color-plum-kingdom-200: #ffc3df;
  --color-plum-kingdom-300: #ff9dcd;
  --color-plum-kingdom-400: #e278af;
  --color-plum-kingdom-500: #c55a93;
  --color-plum-kingdom-600: #a73e78;
  --color-plum-kingdom-700: #892b60;
  --color-plum-kingdom-800: #6f1c4c;
  --color-plum-kingdom-900: #58113b;
  --color-plum-kingdom-950: #3a0725;
  --color-pretty-in-prune: #772459;
  --color-pretty-in-prune-50: #fff0f8;
  --color-pretty-in-prune-100: #ffe2f1;
  --color-pretty-in-prune-200: #ffc3e3;
  --color-pretty-in-prune-300: #f6a5d2;
  --color-pretty-in-prune-400: #db83b6;
  --color-pretty-in-prune-500: #c0679c;
  --color-pretty-in-prune-600: #a44e82;
  --color-pretty-in-prune-700: #8a3a6b;
  --color-pretty-in-prune-800: #772459;
  --color-pretty-in-prune-900: #5b1e44;
  --color-pretty-in-prune-950: #3c0f2c;
  --color-moonlight-mauve: #cf7ea9;
  --color-moonlight-mauve-50: #ffeef6;
  --color-moonlight-mauve-100: #ffdded;
  --color-moonlight-mauve-200: #ffbdde;
  --color-moonlight-mauve-300: #eca2c8;
  --color-moonlight-mauve-400: #cf7ea9;
  --color-moonlight-mauve-500: #b2648e;
  --color-moonlight-mauve-600: #954b74;
  --color-moonlight-mauve-700: #7b385d;
  --color-moonlight-mauve-800: #63294a;
  --color-moonlight-mauve-900: #4f1d3a;
  --color-moonlight-mauve-950: #341025;
  --color-sugarwinkle: #ffc2db;
  --color-sugarwinkle-50: #ffeff5;
  --color-sugarwinkle-100: #ffe0ec;
  --color-sugarwinkle-200: #ffc2db;
  --color-sugarwinkle-300: #e2afc4;
  --color-sugarwinkle-400: #c58ea5;
  --color-sugarwinkle-500: #aa728a;
  --color-sugarwinkle-600: #8d5970;
  --color-sugarwinkle-700: #734459;
  --color-sugarwinkle-800: #5c3346;
  --color-sugarwinkle-900: #492636;
  --color-sugarwinkle-950: #2f1621;
}