Lucius Lilac to Graphite Color Palette

About this palette

Lucius Lilac to Graphite is a 5-color muted, cool palette: #BAA6CB (Lucius Lilac), #598690 (Arctic), #7D5E58 (Wild West), #D0CCE0 (Dust of the Moon), #323823 (Graphite). It mixes purple, turquoise, red, gray, green tones and feels cool overall. The strongest text pairing is #D0CCE0 on #323823 with a contrast ratio of 7.76:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lucius Lilac	rgb(186, 166, 203)	hsl(272, 26%, 72%)
Arctic	rgb(89, 134, 144)	hsl(191, 24%, 46%)
Wild West	rgb(125, 94, 88)	hsl(10, 17%, 42%)
Dust of the Moon	rgb(208, 204, 224)	hsl(252, 24%, 84%)
Graphite	rgb(50, 56, 35)	hsl(77, 23%, 18%)

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.

Aa7.76:1 Very good#D0CCE0 on #323823
Aa7.76:1 Very good#323823 on #D0CCE0
Aa5.45:1 Good#BAA6CB on #323823
Aa5.45:1 Good#323823 on #BAA6CB
Aa3.71:1 Poor#7D5E58 on #D0CCE0
Aa3.71:1 Poor#D0CCE0 on #7D5E58
Aa3.04:1 Poor#598690 on #323823
Aa3.04:1 Poor#323823 on #598690

Color blindness preview

CSS variables

/* Lucius Lilac to Graphite — https://swatchly.xyz/palette/baa6cb-598690-7d5e58-d0cce0-323823 */
:root {
  --lucius-lilac: #baa6cb;
  --arctic: #598690;
  --wild-west: #7d5e58;
  --dust-of-the-moon: #d0cce0;
  --graphite: #323823;
}

Tailwind CSS v4

/* Lucius Lilac to Graphite — https://swatchly.xyz/palette/baa6cb-598690-7d5e58-d0cce0-323823 */
@theme {
  --color-lucius-lilac: #baa6cb;
  --color-lucius-lilac-50: #fcf8ff;
  --color-lucius-lilac-100: #f7efff;
  --color-lucius-lilac-200: #e9dbf5;
  --color-lucius-lilac-300: #d6c5e4;
  --color-lucius-lilac-400: #baa6cb;
  --color-lucius-lilac-500: #9b88ac;
  --color-lucius-lilac-600: #7e6c8e;
  --color-lucius-lilac-700: #645372;
  --color-lucius-lilac-800: #4e3f5a;
  --color-lucius-lilac-900: #3b2f45;
  --color-lucius-lilac-950: #241b2b;
  --color-arctic: #598690;
  --color-arctic-50: #dff9ff;
  --color-arctic-100: #d0eef5;
  --color-arctic-200: #b6dae2;
  --color-arctic-300: #9ac3cc;
  --color-arctic-400: #76a3ad;
  --color-arctic-500: #598690;
  --color-arctic-600: #426d76;
  --color-arctic-700: #30575f;
  --color-arctic-800: #22444c;
  --color-arctic-900: #18353c;
  --color-arctic-950: #0c2226;
  --color-wild-west: #7d5e58;
  --color-wild-west-50: #fff2ef;
  --color-wild-west-100: #fbe4e0;
  --color-wild-west-200: #eacec9;
  --color-wild-west-300: #d5b6b0;
  --color-wild-west-400: #b6958f;
  --color-wild-west-500: #997972;
  --color-wild-west-600: #7d5e58;
  --color-wild-west-700: #654a44;
  --color-wild-west-800: #503934;
  --color-wild-west-900: #3f2b27;
  --color-wild-west-950: #281a17;
  --color-dust-of-the-moon: #d0cce0;
  --color-dust-of-the-moon-50: #f0eefa;
  --color-dust-of-the-moon-100: #e5e2f0;
  --color-dust-of-the-moon-200: #d0cce0;
  --color-dust-of-the-moon-300: #bbb7c9;
  --color-dust-of-the-moon-400: #9d99ac;
  --color-dust-of-the-moon-500: #837f92;
  --color-dust-of-the-moon-600: #6a6778;
  --color-dust-of-the-moon-700: #555261;
  --color-dust-of-the-moon-800: #43404e;
  --color-dust-of-the-moon-900: #33313c;
  --color-dust-of-the-moon-950: #201e26;
  --color-graphite: #323823;
  --color-graphite-50: #f3f7e9;
  --color-graphite-100: #e9eede;
  --color-graphite-200: #d4dbc7;
  --color-graphite-300: #bdc4af;
  --color-graphite-400: #9ea68e;
  --color-graphite-500: #838b73;
  --color-graphite-600: #6a715a;
  --color-graphite-700: #545a45;
  --color-graphite-800: #424735;
  --color-graphite-900: #323823;
  --color-graphite-950: #1f2317;
}