Mecha Metal to Scented Spring color palette

88829FMecha Metal 98BBA1Lichen 665E40Ochicha Latte 39351FGraphite E4D5F8Scented Spring

About this palette

Mecha Metal to Scented Spring is a 5-color muted, cool, earthy, vintage palette: #88829F (Mecha Metal), #98BBA1 (Lichen), #665E40 (Ochicha Latte), #39351F (Graphite), #E4D5F8 (Scented Spring). It mixes purple, green, brown tones and feels cool overall. The strongest text pairing is #39351F on #E4D5F8 with a contrast ratio of 8.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mecha Metal	rgb(136, 130, 159)	hsl(252, 13%, 57%)
Lichen	rgb(152, 187, 161)	hsl(135, 20%, 66%)
Ochicha Latte	rgb(102, 94, 64)	hsl(47, 23%, 33%)
Graphite	rgb(57, 53, 31)	hsl(51, 30%, 17%)
Scented Spring	rgb(228, 213, 248)	hsl(266, 71%, 90%)

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.91:1 Very good#39351F on #E4D5F8
Aa8.91:1 Very good#E4D5F8 on #39351F
Aa5.85:1 Good#98BBA1 on #39351F
Aa5.85:1 Good#39351F on #98BBA1
Aa4.68:1 Good#665E40 on #E4D5F8
Aa4.68:1 Good#E4D5F8 on #665E40
Aa3.37:1 Poor#88829F on #39351F
Aa3.37:1 Poor#39351F on #88829F

Color blindness preview

CSS variables

/* Mecha Metal to Scented Spring — https://swatchly.xyz/palette/88829f-98bba1-665e40-39351f-e4d5f8 */
:root {
  --mecha-metal: #88829f;
  --lichen: #98bba1;
  --ochicha-latte: #665e40;
  --graphite: #39351f;
  --scented-spring: #e4d5f8;
}

Tailwind CSS v4

/* Mecha Metal to Scented Spring — https://swatchly.xyz/palette/88829f-98bba1-665e40-39351f-e4d5f8 */
@theme {
  --color-mecha-metal: #88829f;
  --color-mecha-metal-50: #f6f3ff;
  --color-mecha-metal-100: #ece8fc;
  --color-mecha-metal-200: #d9d4ec;
  --color-mecha-metal-300: #c2bdd8;
  --color-mecha-metal-400: #a39dba;
  --color-mecha-metal-500: #88829f;
  --color-mecha-metal-600: #6d6883;
  --color-mecha-metal-700: #57516a;
  --color-mecha-metal-800: #443f55;
  --color-mecha-metal-900: #343042;
  --color-mecha-metal-950: #201d2a;
  --color-lichen: #98bba1;
  --color-lichen-50: #f1fff4;
  --color-lichen-100: #e5faea;
  --color-lichen-200: #d1ead7;
  --color-lichen-300: #bad6c1;
  --color-lichen-400: #98bba1;
  --color-lichen-500: #7b9c83;
  --color-lichen-600: #5e7f67;
  --color-lichen-700: #46644f;
  --color-lichen-800: #334e3b;
  --color-lichen-900: #253b2b;
  --color-lichen-950: #142318;
  --color-ochicha-latte: #665e40;
  --color-ochicha-latte-50: #faf5e3;
  --color-ochicha-latte-100: #f1ebd6;
  --color-ochicha-latte-200: #e0d9c1;
  --color-ochicha-latte-300: #ccc5a9;
  --color-ochicha-latte-400: #afa788;
  --color-ochicha-latte-500: #958d6d;
  --color-ochicha-latte-600: #7c7355;
  --color-ochicha-latte-700: #665e40;
  --color-ochicha-latte-800: #504930;
  --color-ochicha-latte-900: #3e3822;
  --color-ochicha-latte-950: #272313;
  --color-graphite: #39351f;
  --color-graphite-50: #f8f6e7;
  --color-graphite-100: #efecdb;
  --color-graphite-200: #dbd8c4;
  --color-graphite-300: #c5c2ab;
  --color-graphite-400: #a7a38a;
  --color-graphite-500: #8c886f;
  --color-graphite-600: #726d56;
  --color-graphite-700: #5b5742;
  --color-graphite-800: #484431;
  --color-graphite-900: #39351f;
  --color-graphite-950: #232115;
  --color-scented-spring: #e4d5f8;
  --color-scented-spring-50: #faf7ff;
  --color-scented-spring-100: #f4ebff;
  --color-scented-spring-200: #e4d5f8;
  --color-scented-spring-300: #cbbfdc;
  --color-scented-spring-400: #ab9ebd;
  --color-scented-spring-500: #8f81a1;
  --color-scented-spring-600: #746685;
  --color-scented-spring-700: #5c506b;
  --color-scented-spring-800: #473d55;
  --color-scented-spring-900: #372e42;
  --color-scented-spring-950: #221c2a;
}