Bruised Plum to Greenhorn color palette

3C1619Bruised Plum FFD8DCStrawberry Blonde 997AB2Berries Galore 338484Turkish Jade 5D336EImperial ABCF9DGreenhorn

Open in generator Export PNG, PDF, ASE…

About this palette

Bruised Plum to Greenhorn is a 6-color cool palette: #3C1619 (Bruised Plum), #FFD8DC (Strawberry Blonde), #997AB2 (Berries Galore), #338484 (Turkish Jade), #5D336E (Imperial), #ABCF9D (Greenhorn). It mixes brown, pink, purple, turquoise, green tones and feels cool overall. The strongest text pairing is #3C1619 on #FFD8DC with a contrast ratio of 12.19:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bruised Plum	rgb(60, 22, 25)	hsl(355, 46%, 16%)
Strawberry Blonde	rgb(255, 216, 220)	hsl(354, 100%, 92%)
Berries Galore	rgb(153, 122, 178)	hsl(273, 27%, 59%)
Turkish Jade	rgb(51, 132, 132)	hsl(180, 44%, 36%)
Imperial	rgb(93, 51, 110)	hsl(283, 37%, 32%)
Greenhorn	rgb(171, 207, 157)	hsl(103, 34%, 71%)

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.

Aa12.19:1 Super#3C1619 on #FFD8DC
Aa12.19:1 Super#FFD8DC on #3C1619
Aa9.19:1 Very good#3C1619 on #ABCF9D
Aa9.19:1 Very good#ABCF9D on #3C1619
Aa7.44:1 Very good#FFD8DC on #5D336E
Aa7.44:1 Very good#5D336E on #FFD8DC
Aa5.61:1 Good#5D336E on #ABCF9D
Aa5.61:1 Good#ABCF9D on #5D336E

Color blindness preview

CSS variables

/* Bruised Plum to Greenhorn — https://swatchly.xyz/palette/3c1619-ffd8dc-997ab2-338484-5d336e-abcf9d */
:root {
  --bruised-plum: #3c1619;
  --strawberry-blonde: #ffd8dc;
  --berries-galore: #997ab2;
  --turkish-jade: #338484;
  --imperial: #5d336e;
  --greenhorn: #abcf9d;
}

Tailwind CSS v4

/* Bruised Plum to Greenhorn — https://swatchly.xyz/palette/3c1619-ffd8dc-997ab2-338484-5d336e-abcf9d */
@theme {
  --color-bruised-plum: #3c1619;
  --color-bruised-plum-50: #fff1f1;
  --color-bruised-plum-100: #ffe4e4;
  --color-bruised-plum-200: #f4cccd;
  --color-bruised-plum-300: #e0b4b5;
  --color-bruised-plum-400: #c39394;
  --color-bruised-plum-500: #a8797a;
  --color-bruised-plum-600: #8d6061;
  --color-bruised-plum-700: #744b4c;
  --color-bruised-plum-800: #5f3a3c;
  --color-bruised-plum-900: #4c2d2e;
  --color-bruised-plum-950: #3c1619;
  --color-strawberry-blonde: #ffd8dc;
  --color-strawberry-blonde-50: #ffe8ea;
  --color-strawberry-blonde-100: #ffd8dc;
  --color-strawberry-blonde-200: #e6c8cb;
  --color-strawberry-blonde-300: #d3b2b6;
  --color-strawberry-blonde-400: #b79397;
  --color-strawberry-blonde-500: #9c797d;
  --color-strawberry-blonde-600: #816164;
  --color-strawberry-blonde-700: #6a4c50;
  --color-strawberry-blonde-800: #543a3d;
  --color-strawberry-blonde-900: #422c2f;
  --color-strawberry-blonde-950: #2a1a1c;
  --color-berries-galore: #997ab2;
  --color-berries-galore-50: #f9f3ff;
  --color-berries-galore-100: #f3e6ff;
  --color-berries-galore-200: #e6cefa;
  --color-berries-galore-300: #d1b6e8;
  --color-berries-galore-400: #b496cd;
  --color-berries-galore-500: #997ab2;
  --color-berries-galore-600: #7d5f95;
  --color-berries-galore-700: #65497a;
  --color-berries-galore-800: #503862;
  --color-berries-galore-900: #3e294d;
  --color-berries-galore-950: #271832;
  --color-turkish-jade: #338484;
  --color-turkish-jade-50: #d5fffe;
  --color-turkish-jade-100: #caf8f7;
  --color-turkish-jade-200: #b1e7e7;
  --color-turkish-jade-300: #95d4d3;
  --color-turkish-jade-400: #6fb7b7;
  --color-turkish-jade-500: #509e9d;
  --color-turkish-jade-600: #338484;
  --color-turkish-jade-700: #196a6a;
  --color-turkish-jade-800: #035454;
  --color-turkish-jade-900: #004040;
  --color-turkish-jade-950: #002828;
  --color-imperial: #5d336e;
  --color-imperial-50: #fbf1ff;
  --color-imperial-100: #f6e3ff;
  --color-imperial-200: #ecc8fb;
  --color-imperial-300: #d9b1ea;
  --color-imperial-400: #bc90cf;
  --color-imperial-500: #a275b5;
  --color-imperial-600: #875c99;
  --color-imperial-700: #6f4780;
  --color-imperial-800: #5d336e;
  --color-imperial-900: #472853;
  --color-imperial-950: #2e1737;
  --color-greenhorn: #abcf9d;
  --color-greenhorn-50: #e9fde1;
  --color-greenhorn-100: #def4d5;
  --color-greenhorn-200: #c8e2bd;
  --color-greenhorn-300: #abcf9d;
  --color-greenhorn-400: #8dae80;
  --color-greenhorn-500: #719363;
  --color-greenhorn-600: #57774a;
  --color-greenhorn-700: #425f36;
  --color-greenhorn-800: #314b27;
  --color-greenhorn-900: #243a1b;
  --color-greenhorn-950: #15240e;
}