Viridian to Bruised Plum Color Palette

About this palette

Viridian to Bruised Plum is a 5-color vintage palette: #2D8D60 (Viridian), #FFEEF5 (Powder Puff), #ECB682 (Baba Ganoush), #355374 (St. Tropaz), #341D2A (Bruised Plum). It mixes green, white, orange, blue, red tones and feels balanced overall. The strongest text pairing is #FFEEF5 on #341D2A with a contrast ratio of 13.87:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Viridian	rgb(45, 141, 96)	hsl(152, 52%, 36%)
Powder Puff	rgb(255, 238, 245)	hsl(335, 100%, 97%)
Baba Ganoush	rgb(236, 182, 130)	hsl(29, 74%, 72%)
St. Tropaz	rgb(53, 83, 116)	hsl(211, 37%, 33%)
Bruised Plum	rgb(52, 29, 42)	hsl(326, 28%, 16%)

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.87:1 Super#FFEEF5 on #341D2A
Aa13.87:1 Super#341D2A on #FFEEF5
Aa8.54:1 Very good#ECB682 on #341D2A
Aa8.54:1 Very good#341D2A on #ECB682
Aa7.12:1 Very good#FFEEF5 on #355374
Aa7.12:1 Very good#355374 on #FFEEF5
Aa4.38:1 Poor#ECB682 on #355374
Aa4.38:1 Poor#355374 on #ECB682

Color blindness preview

CSS variables

/* Viridian to Bruised Plum — https://swatchly.xyz/palette/2d8d60-ffeef5-ecb682-355374-341d2a */
:root {
  --viridian: #2d8d60;
  --powder-puff: #ffeef5;
  --baba-ganoush: #ecb682;
  --st-tropaz: #355374;
  --bruised-plum: #341d2a;
}

Tailwind CSS v4

/* Viridian to Bruised Plum — https://swatchly.xyz/palette/2d8d60-ffeef5-ecb682-355374-341d2a */
@theme {
  --color-viridian: #2d8d60;
  --color-viridian-50: #d4ffe5;
  --color-viridian-100: #bdf6d5;
  --color-viridian-200: #9ee3bb;
  --color-viridian-300: #7ccca0;
  --color-viridian-400: #51ab7d;
  --color-viridian-500: #2d8d60;
  --color-viridian-600: #0e734a;
  --color-viridian-700: #005d39;
  --color-viridian-800: #00492c;
  --color-viridian-900: #003922;
  --color-viridian-950: #002514;
  --color-powder-puff: #ffeef5;
  --color-powder-puff-50: #ffeef5;
  --color-powder-puff-100: #f1e6eb;
  --color-powder-puff-200: #dfd2d7;
  --color-powder-puff-300: #cabcc1;
  --color-powder-puff-400: #ab9ca2;
  --color-powder-puff-500: #908187;
  --color-powder-puff-600: #76676d;
  --color-powder-puff-700: #5e5157;
  --color-powder-puff-800: #4a3f43;
  --color-powder-puff-900: #393034;
  --color-powder-puff-950: #241d20;
  --color-baba-ganoush: #ecb682;
  --color-baba-ganoush-50: #fff4e9;
  --color-baba-ganoush-100: #ffe7d2;
  --color-baba-ganoush-200: #f9d0aa;
  --color-baba-ganoush-300: #ecb682;
  --color-baba-ganoush-400: #c99766;
  --color-baba-ganoush-500: #ad7b48;
  --color-baba-ganoush-600: #90602e;
  --color-baba-ganoush-700: #764a1a;
  --color-baba-ganoush-800: #5e390c;
  --color-baba-ganoush-900: #4a2a04;
  --color-baba-ganoush-950: #301901;
  --color-st-tropaz: #355374;
  --color-st-tropaz-50: #eef6ff;
  --color-st-tropaz-100: #ddedff;
  --color-st-tropaz-200: #c0daf7;
  --color-st-tropaz-300: #a5c2e3;
  --color-st-tropaz-400: #82a2c6;
  --color-st-tropaz-500: #6686aa;
  --color-st-tropaz-600: #4c6a8c;
  --color-st-tropaz-700: #355374;
  --color-st-tropaz-800: #29415a;
  --color-st-tropaz-900: #1e3247;
  --color-st-tropaz-950: #101e2e;
  --color-bruised-plum: #341d2a;
  --color-bruised-plum-50: #fff0f8;
  --color-bruised-plum-100: #f9e5ef;
  --color-bruised-plum-200: #e7d0dc;
  --color-bruised-plum-300: #d3b8c6;
  --color-bruised-plum-400: #b598a7;
  --color-bruised-plum-500: #9b7e8d;
  --color-bruised-plum-600: #806574;
  --color-bruised-plum-700: #69505e;
  --color-bruised-plum-800: #563f4b;
  --color-bruised-plum-900: #45323c;
  --color-bruised-plum-950: #341d2a;
}