Graphite to Mecha Metal color palette

333B29Graphite C8BFDEDigital Lavender 929D83Whispering Willow 615A78Plummy E0E5C7Frost 857F93Mecha Metal

Open in generator Export PNG, PDF, ASE…

About this palette

Graphite to Mecha Metal is a 6-color muted palette: #333B29 (Graphite), #C8BFDE (Digital Lavender), #929D83 (Whispering Willow), #615A78 (Plummy), #E0E5C7 (Frost), #857F93 (Mecha Metal). It mixes gray, purple, green tones and feels cool overall. The strongest text pairing is #333B29 on #E0E5C7 with a contrast ratio of 9.01:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(51, 59, 41)	hsl(87, 18%, 20%)
Digital Lavender	rgb(200, 191, 222)	hsl(257, 32%, 81%)
Whispering Willow	rgb(146, 157, 131)	hsl(85, 12%, 56%)
Plummy	rgb(97, 90, 120)	hsl(254, 14%, 41%)
Frost	rgb(224, 229, 199)	hsl(70, 37%, 84%)
Mecha Metal	rgb(133, 127, 147)	hsl(258, 8%, 54%)

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.01:1 Very good#333B29 on #E0E5C7
Aa9.01:1 Very good#E0E5C7 on #333B29
Aa6.65:1 Good#333B29 on #C8BFDE
Aa6.65:1 Good#C8BFDE on #333B29
Aa5.00:1 Good#615A78 on #E0E5C7
Aa5.00:1 Good#E0E5C7 on #615A78
Aa4.10:1 Poor#333B29 on #929D83
Aa4.10:1 Poor#929D83 on #333B29

Color blindness preview

CSS variables

/* Graphite to Mecha Metal — https://swatchly.xyz/palette/333b29-c8bfde-929d83-615a78-e0e5c7-857f93 */
:root {
  --graphite: #333b29;
  --digital-lavender: #c8bfde;
  --whispering-willow: #929d83;
  --plummy: #615a78;
  --frost: #e0e5c7;
  --mecha-metal: #857f93;
}

Tailwind CSS v4

/* Graphite to Mecha Metal — https://swatchly.xyz/palette/333b29-c8bfde-929d83-615a78-e0e5c7-857f93 */
@theme {
  --color-graphite: #333b29;
  --color-graphite-50: #f2f8eb;
  --color-graphite-100: #e7eee0;
  --color-graphite-200: #d3dbca;
  --color-graphite-300: #bcc5b2;
  --color-graphite-400: #9da692;
  --color-graphite-500: #838c77;
  --color-graphite-600: #69725f;
  --color-graphite-700: #545c4a;
  --color-graphite-800: #424a3a;
  --color-graphite-900: #333b29;
  --color-graphite-950: #20251b;
  --color-digital-lavender: #c8bfde;
  --color-digital-lavender-50: #f8f5ff;
  --color-digital-lavender-100: #f0eafe;
  --color-digital-lavender-200: #ddd7ed;
  --color-digital-lavender-300: #c8bfde;
  --color-digital-lavender-400: #a89fbc;
  --color-digital-lavender-500: #8c83a0;
  --color-digital-lavender-600: #716884;
  --color-digital-lavender-700: #59526a;
  --color-digital-lavender-800: #453f54;
  --color-digital-lavender-900: #352f41;
  --color-digital-lavender-950: #211d2a;
  --color-whispering-willow: #929d83;
  --color-whispering-willow-50: #eef5e5;
  --color-whispering-willow-100: #e2ead7;
  --color-whispering-willow-200: #ccd5c0;
  --color-whispering-willow-300: #b3bda6;
  --color-whispering-willow-400: #929d83;
  --color-whispering-willow-500: #79836a;
  --color-whispering-willow-600: #606a53;
  --color-whispering-willow-700: #4c5540;
  --color-whispering-willow-800: #3b4330;
  --color-whispering-willow-900: #2e3424;
  --color-whispering-willow-950: #1d2116;
  --color-plummy: #615a78;
  --color-plummy-50: #f6f3ff;
  --color-plummy-100: #ece8fe;
  --color-plummy-200: #dbd5ef;
  --color-plummy-300: #c6c0dd;
  --color-plummy-400: #a9a2c1;
  --color-plummy-500: #8f88a8;
  --color-plummy-600: #766f8e;
  --color-plummy-700: #615a78;
  --color-plummy-800: #4c465f;
  --color-plummy-900: #3a354b;
  --color-plummy-950: #242130;
  --color-frost: #e0e5c7;
  --color-frost-50: #ecefdd;
  --color-frost-100: #e0e5c7;
  --color-frost-200: #ced2bb;
  --color-frost-300: #b9bea4;
  --color-frost-400: #9ca085;
  --color-frost-500: #82866b;
  --color-frost-600: #696d53;
  --color-frost-700: #545840;
  --color-frost-800: #424530;
  --color-frost-900: #323523;
  --color-frost-950: #1f2114;
  --color-mecha-metal: #857f93;
  --color-mecha-metal-50: #f6f2ff;
  --color-mecha-metal-100: #ebe7f5;
  --color-mecha-metal-200: #d7d3e3;
  --color-mecha-metal-300: #c0bbce;
  --color-mecha-metal-400: #a19baf;
  --color-mecha-metal-500: #857f93;
  --color-mecha-metal-600: #6b6678;
  --color-mecha-metal-700: #555061;
  --color-mecha-metal-800: #433e4d;
  --color-mecha-metal-900: #332f3c;
  --color-mecha-metal-950: #201d26;
}