Bruised Plum to Berry Good color palette

About this palette

Bruised Plum to Berry Good is a 4-color muted, vintage palette: #3B1C1F (Bruised Plum), #2B6567 (Pacific), #59928E (Martian Cerulean), #EDC5C5 (Berry Good). It mixes brown, turquoise, pink tones and feels balanced overall. The strongest text pairing is #3B1C1F on #EDC5C5 with a contrast ratio of 9.76:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Bruised Plumrgb(59, 28, 31)hsl(354, 36%, 17%)
Pacificrgb(43, 101, 103)hsl(182, 41%, 29%)
Martian Ceruleanrgb(89, 146, 142)hsl(176, 24%, 46%)
Berry Goodrgb(237, 197, 197)hsl(0, 53%, 85%)

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.

  • Aa9.76:1 Very good#3B1C1F on #EDC5C5
  • Aa9.76:1 Very good#EDC5C5 on #3B1C1F
  • Aa4.32:1 Poor#3B1C1F on #59928E
  • Aa4.32:1 Poor#59928E on #3B1C1F
  • Aa4.24:1 Poor#2B6567 on #EDC5C5
  • Aa4.24:1 Poor#EDC5C5 on #2B6567

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Bruised Plum to Berry Good — https://swatchly.xyz/palette/3b1c1f-2b6567-59928e-edc5c5 */
:root {
  --bruised-plum: #3b1c1f;
  --pacific: #2b6567;
  --martian-cerulean: #59928e;
  --berry-good: #edc5c5;
}

Tailwind CSS v4

/* Bruised Plum to Berry Good — https://swatchly.xyz/palette/3b1c1f-2b6567-59928e-edc5c5 */
@theme {
  --color-bruised-plum: #3b1c1f;
  --color-bruised-plum-50: #fff1f2;
  --color-bruised-plum-100: #ffe4e5;
  --color-bruised-plum-200: #eeced0;
  --color-bruised-plum-300: #dbb7b8;
  --color-bruised-plum-400: #bd9698;
  --color-bruised-plum-500: #a37c7e;
  --color-bruised-plum-600: #896466;
  --color-bruised-plum-700: #714f51;
  --color-bruised-plum-800: #5d3f41;
  --color-bruised-plum-900: #4b3133;
  --color-bruised-plum-950: #3b1c1f;
  --color-pacific: #2b6567;
  --color-pacific-50: #ddfcfd;
  --color-pacific-100: #cff3f4;
  --color-pacific-200: #b7e2e3;
  --color-pacific-300: #9dcecf;
  --color-pacific-400: #79b0b2;
  --color-pacific-500: #5c9597;
  --color-pacific-600: #437b7d;
  --color-pacific-700: #2b6567;
  --color-pacific-800: #1f4f51;
  --color-pacific-900: #133d3f;
  --color-pacific-950: #082728;
  --color-martian-cerulean: #59928e;
  --color-martian-cerulean-50: #ddfdfa;
  --color-martian-cerulean-100: #d0f4f1;
  --color-martian-cerulean-200: #b7e1de;
  --color-martian-cerulean-300: #9bccc8;
  --color-martian-cerulean-400: #76ada9;
  --color-martian-cerulean-500: #59928e;
  --color-martian-cerulean-600: #3f7773;
  --color-martian-cerulean-700: #2b5f5c;
  --color-martian-cerulean-800: #1c4b48;
  --color-martian-cerulean-900: #123a38;
  --color-martian-cerulean-950: #072423;
  --color-berry-good: #edc5c5;
  --color-berry-good-50: #ffebeb;
  --color-berry-good-100: #f9dedd;
  --color-berry-good-200: #edc5c5;
  --color-berry-good-300: #d4b1b1;
  --color-berry-good-400: #b79293;
  --color-berry-good-500: #9d7878;
  --color-berry-good-600: #826060;
  --color-berry-good-700: #6a4b4b;
  --color-berry-good-800: #553a3b;
  --color-berry-good-900: #432c2c;
  --color-berry-good-950: #2b1a1b;
}

Similar palettes