Bruised Plum to Girlie Color Palette

About this palette

Bruised Plum to Girlie is a 5-color cool, vintage palette: #351B18 (Bruised Plum), #455A97 (Piccadilly Purple), #6285C4 (Marina), #9EB790 (Norway), #FFD2CF (Girlie). It mixes brown, blue, green, pink tones and feels cool overall. The strongest text pairing is #351B18 on #FFD2CF with a contrast ratio of 11.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bruised Plum	rgb(53, 27, 24)	hsl(6, 38%, 15%)
Piccadilly Purple	rgb(69, 90, 151)	hsl(225, 37%, 43%)
Marina	rgb(98, 133, 196)	hsl(219, 45%, 58%)
Norway	rgb(158, 183, 144)	hsl(98, 21%, 64%)
Girlie	rgb(255, 210, 207)	hsl(4, 100%, 91%)

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.

Aa11.63:1 Very good#351B18 on #FFD2CF
Aa11.63:1 Very good#FFD2CF on #351B18
Aa7.29:1 Very good#351B18 on #9EB790
Aa7.29:1 Very good#9EB790 on #351B18
Aa4.86:1 Good#455A97 on #FFD2CF
Aa4.86:1 Good#FFD2CF on #455A97
Aa4.29:1 Poor#351B18 on #6285C4
Aa4.29:1 Poor#6285C4 on #351B18

Color blindness preview

CSS variables

/* Bruised Plum to Girlie — https://swatchly.xyz/palette/351b18-455a97-6285c4-9eb790-ffd2cf */
:root {
  --bruised-plum: #351b18;
  --piccadilly-purple: #455a97;
  --marina: #6285c4;
  --norway: #9eb790;
  --girlie: #ffd2cf;
}

Tailwind CSS v4

/* Bruised Plum to Girlie — https://swatchly.xyz/palette/351b18-455a97-6285c4-9eb790-ffd2cf */
@theme {
  --color-bruised-plum: #351b18;
  --color-bruised-plum-50: #fff2f0;
  --color-bruised-plum-100: #fce5e2;
  --color-bruised-plum-200: #ebd0cc;
  --color-bruised-plum-300: #d7b9b4;
  --color-bruised-plum-400: #ba9894;
  --color-bruised-plum-500: #9f7e79;
  --color-bruised-plum-600: #846560;
  --color-bruised-plum-700: #6c504c;
  --color-bruised-plum-800: #573e3b;
  --color-bruised-plum-900: #46302d;
  --color-bruised-plum-950: #351b18;
  --color-piccadilly-purple: #455a97;
  --color-piccadilly-purple-50: #f1f5ff;
  --color-piccadilly-purple-100: #e3ebff;
  --color-piccadilly-purple-200: #c9d9ff;
  --color-piccadilly-purple-300: #acc3fd;
  --color-piccadilly-purple-400: #8ca4e3;
  --color-piccadilly-purple-500: #728aca;
  --color-piccadilly-purple-600: #5a70ae;
  --color-piccadilly-purple-700: #455a97;
  --color-piccadilly-purple-800: #344679;
  --color-piccadilly-purple-900: #263561;
  --color-piccadilly-purple-950: #162140;
  --color-marina: #6285c4;
  --color-marina-50: #f0f5ff;
  --color-marina-100: #e0ecff;
  --color-marina-200: #c2d8ff;
  --color-marina-300: #a1c1fb;
  --color-marina-400: #7ea1e0;
  --color-marina-500: #6285c4;
  --color-marina-600: #496aa6;
  --color-marina-700: #36548a;
  --color-marina-800: #274170;
  --color-marina-900: #1c3159;
  --color-marina-950: #0f1e3b;
  --color-norway: #9eb790;
  --color-norway-50: #f1ffea;
  --color-norway-100: #e8f7e0;
  --color-norway-200: #d5e7cb;
  --color-norway-300: #bed3b3;
  --color-norway-400: #9eb790;
  --color-norway-500: #819973;
  --color-norway-600: #657c57;
  --color-norway-700: #4d6241;
  --color-norway-800: #3a4c2f;
  --color-norway-900: #2a3a21;
  --color-norway-950: #182312;
  --color-girlie: #ffd2cf;
  --color-girlie-50: #fff8f7;
  --color-girlie-100: #ffeceb;
  --color-girlie-200: #ffd2cf;
  --color-girlie-300: #e1bdba;
  --color-girlie-400: #c39b98;
  --color-girlie-500: #a67e7b;
  --color-girlie-600: #896360;
  --color-girlie-700: #6e4c4a;
  --color-girlie-800: #573938;
  --color-girlie-900: #442b2a;
  --color-girlie-950: #2c1a19;
}