Aubergine to Frosted Fir color palette

36232EAubergine 5E453BDeath by Chocolate 608E97Horizon BC8BA9Mauve Magic B5D4C2Frosted Fir

About this palette

Aubergine to Frosted Fir is a 5-color muted, vintage palette: #36232E (Aubergine), #5E453B (Death by Chocolate), #608E97 (Horizon), #BC8BA9 (Mauve Magic), #B5D4C2 (Frosted Fir). It mixes gray, brown, turquoise, pink, green tones and feels balanced overall. The strongest text pairing is #36232E on #B5D4C2 with a contrast ratio of 9.16:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Aubergine	rgb(54, 35, 46)	hsl(325, 21%, 17%)
Death by Chocolate	rgb(94, 69, 59)	hsl(17, 23%, 30%)
Horizon	rgb(96, 142, 151)	hsl(190, 22%, 48%)
Mauve Magic	rgb(188, 139, 169)	hsl(323, 27%, 64%)
Frosted Fir	rgb(181, 212, 194)	hsl(145, 26%, 77%)

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.16:1 Very good#36232E on #B5D4C2
Aa9.16:1 Very good#B5D4C2 on #36232E
Aa5.51:1 Good#5E453B on #B5D4C2
Aa5.51:1 Good#B5D4C2 on #5E453B
Aa5.15:1 Good#36232E on #BC8BA9
Aa5.15:1 Good#BC8BA9 on #36232E
Aa4.05:1 Poor#36232E on #608E97
Aa4.05:1 Poor#608E97 on #36232E

Color blindness preview

CSS variables

/* Aubergine to Frosted Fir — https://swatchly.xyz/palette/36232e-5e453b-608e97-bc8ba9-b5d4c2 */
:root {
  --aubergine: #36232e;
  --death-by-chocolate: #5e453b;
  --horizon: #608e97;
  --mauve-magic: #bc8ba9;
  --frosted-fir: #b5d4c2;
}

Tailwind CSS v4

/* Aubergine to Frosted Fir — https://swatchly.xyz/palette/36232e-5e453b-608e97-bc8ba9-b5d4c2 */
@theme {
  --color-aubergine: #36232e;
  --color-aubergine-50: #fff0f8;
  --color-aubergine-100: #f6e6ef;
  --color-aubergine-200: #e4d1dc;
  --color-aubergine-300: #cfbac6;
  --color-aubergine-400: #af98a5;
  --color-aubergine-500: #927b88;
  --color-aubergine-600: #755f6b;
  --color-aubergine-700: #5b4853;
  --color-aubergine-800: #45353e;
  --color-aubergine-900: #36232e;
  --color-aubergine-950: #1e151a;
  --color-death-by-chocolate: #5e453b;
  --color-death-by-chocolate-50: #fff2ed;
  --color-death-by-chocolate-100: #fae7df;
  --color-death-by-chocolate-200: #e9d2c9;
  --color-death-by-chocolate-300: #d6bdb2;
  --color-death-by-chocolate-400: #ba9e93;
  --color-death-by-chocolate-500: #a08479;
  --color-death-by-chocolate-600: #866c61;
  --color-death-by-chocolate-700: #70574d;
  --color-death-by-chocolate-800: #5e453b;
  --color-death-by-chocolate-900: #48352e;
  --color-death-by-chocolate-950: #2f211b;
  --color-horizon: #608e97;
  --color-horizon-50: #e2faff;
  --color-horizon-100: #d3f1f7;
  --color-horizon-200: #bbdee5;
  --color-horizon-300: #a0c9d1;
  --color-horizon-400: #7daab2;
  --color-horizon-500: #608e97;
  --color-horizon-600: #47737c;
  --color-horizon-700: #335c64;
  --color-horizon-800: #24484f;
  --color-horizon-900: #19383e;
  --color-horizon-950: #0c2327;
  --color-mauve-magic: #bc8ba9;
  --color-mauve-magic-50: #ffeef8;
  --color-mauve-magic-100: #ffddf1;
  --color-mauve-magic-200: #eec6de;
  --color-mauve-magic-300: #daadc8;
  --color-mauve-magic-400: #bc8ba9;
  --color-mauve-magic-500: #a0718e;
  --color-mauve-magic-600: #855874;
  --color-mauve-magic-700: #6c445d;
  --color-mauve-magic-800: #57344a;
  --color-mauve-magic-900: #44273a;
  --color-mauve-magic-950: #2c1725;
  --color-frosted-fir: #b5d4c2;
  --color-frosted-fir-50: #f0fff6;
  --color-frosted-fir-100: #e6f7ed;
  --color-frosted-fir-200: #d1e6da;
  --color-frosted-fir-300: #b5d4c2;
  --color-frosted-fir-400: #96b2a1;
  --color-frosted-fir-500: #789584;
  --color-frosted-fir-600: #5c7868;
  --color-frosted-fir-700: #455f51;
  --color-frosted-fir-800: #334a3d;
  --color-frosted-fir-900: #25382d;
  --color-frosted-fir-950: #15231b;
}