Imperial Lilac to Home Brew Color Palette

About this palette

Imperial Lilac to Home Brew is a 4-color muted palette: #A8AACC (Imperial Lilac), #EDE4CB (White Chocolate), #2F3A52 (Mediaeval Blue), #827E60 (Home Brew). It mixes purple, gray, blue, yellow tones and feels cool overall. The strongest text pairing is #EDE4CB on #2F3A52 with a contrast ratio of 8.96:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Imperial Lilac	rgb(168, 170, 204)	hsl(237, 26%, 73%)
White Chocolate	rgb(237, 228, 203)	hsl(44, 49%, 86%)
Mediaeval Blue	rgb(47, 58, 82)	hsl(221, 27%, 25%)
Home Brew	rgb(130, 126, 96)	hsl(53, 15%, 44%)

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.

Aa8.96:1 Very good#EDE4CB on #2F3A52
Aa8.96:1 Very good#2F3A52 on #EDE4CB
Aa5.03:1 Good#A8AACC on #2F3A52
Aa5.03:1 Good#2F3A52 on #A8AACC
Aa3.25:1 Poor#EDE4CB on #827E60
Aa3.25:1 Poor#827E60 on #EDE4CB

Color blindness preview

CSS variables

/* Imperial Lilac to Home Brew — https://swatchly.xyz/palette/a8aacc-ede4cb-2f3a52-827e60 */
:root {
  --imperial-lilac: #a8aacc;
  --white-chocolate: #ede4cb;
  --mediaeval-blue: #2f3a52;
  --home-brew: #827e60;
}

Tailwind CSS v4

/* Imperial Lilac to Home Brew — https://swatchly.xyz/palette/a8aacc-ede4cb-2f3a52-827e60 */
@theme {
  --color-imperial-lilac: #a8aacc;
  --color-imperial-lilac-50: #f8f9ff;
  --color-imperial-lilac-100: #eff0ff;
  --color-imperial-lilac-200: #dcddf6;
  --color-imperial-lilac-300: #c7c8e5;
  --color-imperial-lilac-400: #a8aacc;
  --color-imperial-lilac-500: #8b8cad;
  --color-imperial-lilac-600: #6e708f;
  --color-imperial-lilac-700: #565874;
  --color-imperial-lilac-800: #42435c;
  --color-imperial-lilac-900: #313247;
  --color-imperial-lilac-950: #1d1e2c;
  --color-white-chocolate: #ede4cb;
  --color-white-chocolate-50: #f4efe0;
  --color-white-chocolate-100: #ede4cb;
  --color-white-chocolate-200: #d8d2bf;
  --color-white-chocolate-300: #c4bca7;
  --color-white-chocolate-400: #a69e87;
  --color-white-chocolate-500: #8c846d;
  --color-white-chocolate-600: #726a55;
  --color-white-chocolate-700: #5c5541;
  --color-white-chocolate-800: #484231;
  --color-white-chocolate-900: #383224;
  --color-white-chocolate-950: #231f14;
  --color-mediaeval-blue: #2f3a52;
  --color-mediaeval-blue-50: #f0f5ff;
  --color-mediaeval-blue-100: #e2ebfe;
  --color-mediaeval-blue-200: #cdd8ee;
  --color-mediaeval-blue-300: #b5c1da;
  --color-mediaeval-blue-400: #96a3bf;
  --color-mediaeval-blue-500: #7c89a5;
  --color-mediaeval-blue-600: #64708b;
  --color-mediaeval-blue-700: #4f5b73;
  --color-mediaeval-blue-800: #3f495e;
  --color-mediaeval-blue-900: #2f3a52;
  --color-mediaeval-blue-950: #1e2533;
  --color-home-brew: #827e60;
  --color-home-brew-50: #f6f4e2;
  --color-home-brew-100: #ebe9d4;
  --color-home-brew-200: #d7d4bb;
  --color-home-brew-300: #bfbb9f;
  --color-home-brew-400: #9f9b7d;
  --color-home-brew-500: #827e60;
  --color-home-brew-600: #696549;
  --color-home-brew-700: #545037;
  --color-home-brew-800: #423f29;
  --color-home-brew-900: #33311e;
  --color-home-brew-950: #201e11;
}