Mistletoe to Graphite color palette

92A385Mistletoe 7B688DNymph’s Delight BEA3C8Novel Lilac D3C9DCDust of the Moon 4B5D3BMuddy Olive 2E3A27Graphite

Open in generator Export PNG, PDF, ASE…

About this palette

Mistletoe to Graphite is a 6-color muted, cool palette: #92A385 (Mistletoe), #7B688D (Nymph’s Delight), #BEA3C8 (Novel Lilac), #D3C9DC (Dust of the Moon), #4B5D3B (Muddy Olive), #2E3A27 (Graphite). It mixes green, purple, gray tones and feels cool overall. The strongest text pairing is #D3C9DC on #2E3A27 with a contrast ratio of 7.52:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mistletoe	rgb(146, 163, 133)	hsl(94, 14%, 58%)
Nymph’s Delight	rgb(123, 104, 141)	hsl(271, 15%, 48%)
Novel Lilac	rgb(190, 163, 200)	hsl(284, 25%, 71%)
Dust of the Moon	rgb(211, 201, 220)	hsl(272, 21%, 83%)
Muddy Olive	rgb(75, 93, 59)	hsl(92, 22%, 30%)
Graphite	rgb(46, 58, 39)	hsl(98, 20%, 19%)

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.52:1 Very good#D3C9DC on #2E3A27
Aa7.52:1 Very good#2E3A27 on #D3C9DC
Aa5.29:1 Good#BEA3C8 on #2E3A27
Aa5.29:1 Good#2E3A27 on #BEA3C8
Aa4.49:1 Poor#D3C9DC on #4B5D3B
Aa4.49:1 Poor#4B5D3B on #D3C9DC
Aa4.46:1 Poor#92A385 on #2E3A27
Aa4.46:1 Poor#2E3A27 on #92A385

Color blindness preview

CSS variables

/* Mistletoe to Graphite — https://swatchly.xyz/palette/92a385-7b688d-bea3c8-d3c9dc-4b5d3b-2e3a27 */
:root {
  --mistletoe: #92a385;
  --nymph-s-delight: #7b688d;
  --novel-lilac: #bea3c8;
  --dust-of-the-moon: #d3c9dc;
  --muddy-olive: #4b5d3b;
  --graphite: #2e3a27;
}

Tailwind CSS v4

/* Mistletoe to Graphite — https://swatchly.xyz/palette/92a385-7b688d-bea3c8-d3c9dc-4b5d3b-2e3a27 */
@theme {
  --color-mistletoe: #92a385;
  --color-mistletoe-50: #edf7e5;
  --color-mistletoe-100: #e1edd9;
  --color-mistletoe-200: #ccd9c1;
  --color-mistletoe-300: #b3c3a8;
  --color-mistletoe-400: #92a385;
  --color-mistletoe-500: #78886b;
  --color-mistletoe-600: #5f6f53;
  --color-mistletoe-700: #4a583f;
  --color-mistletoe-800: #394530;
  --color-mistletoe-900: #2c3623;
  --color-mistletoe-950: #1b2215;
  --color-nymph-s-delight: #7b688d;
  --color-nymph-s-delight-50: #f8f2ff;
  --color-nymph-s-delight-100: #f3e6ff;
  --color-nymph-s-delight-200: #e1d2f1;
  --color-nymph-s-delight-300: #cdbcde;
  --color-nymph-s-delight-400: #af9cc2;
  --color-nymph-s-delight-500: #9581a8;
  --color-nymph-s-delight-600: #7b688d;
  --color-nymph-s-delight-700: #625173;
  --color-nymph-s-delight-800: #4d3e5b;
  --color-nymph-s-delight-900: #3c2f48;
  --color-nymph-s-delight-950: #251c2e;
  --color-novel-lilac: #bea3c8;
  --color-novel-lilac-50: #fdf7ff;
  --color-novel-lilac-100: #faedff;
  --color-novel-lilac-200: #ecd9f3;
  --color-novel-lilac-300: #d9c3e1;
  --color-novel-lilac-400: #bea3c8;
  --color-novel-lilac-500: #9f86a9;
  --color-novel-lilac-600: #82698b;
  --color-novel-lilac-700: #685170;
  --color-novel-lilac-800: #513d59;
  --color-novel-lilac-900: #3e2d44;
  --color-novel-lilac-950: #261a2a;
  --color-dust-of-the-moon: #d3c9dc;
  --color-dust-of-the-moon-50: #f2ecf7;
  --color-dust-of-the-moon-100: #e6e0ed;
  --color-dust-of-the-moon-200: #d3c9dc;
  --color-dust-of-the-moon-300: #beb5c5;
  --color-dust-of-the-moon-400: #a097a9;
  --color-dust-of-the-moon-500: #877d8f;
  --color-dust-of-the-moon-600: #6e6575;
  --color-dust-of-the-moon-700: #58505f;
  --color-dust-of-the-moon-800: #463f4c;
  --color-dust-of-the-moon-900: #36303b;
  --color-dust-of-the-moon-950: #211d25;
  --color-muddy-olive: #4b5d3b;
  --color-muddy-olive-50: #eefae4;
  --color-muddy-olive-100: #e3f1d8;
  --color-muddy-olive-200: #cedec1;
  --color-muddy-olive-300: #b6c8a8;
  --color-muddy-olive-400: #96aa86;
  --color-muddy-olive-500: #7b8e6a;
  --color-muddy-olive-600: #617451;
  --color-muddy-olive-700: #4b5d3b;
  --color-muddy-olive-800: #3a492d;
  --color-muddy-olive-900: #2c3821;
  --color-muddy-olive-950: #1a2312;
  --color-graphite: #2e3a27;
  --color-graphite-50: #f0f8eb;
  --color-graphite-100: #e5efe0;
  --color-graphite-200: #d0dcca;
  --color-graphite-300: #b9c6b2;
  --color-graphite-400: #99a792;
  --color-graphite-500: #7e8c77;
  --color-graphite-600: #65725d;
  --color-graphite-700: #505c49;
  --color-graphite-800: #3e4938;
  --color-graphite-900: #2e3a27;
  --color-graphite-950: #1d2419;
}