Silkworm to Moor-Monster Color Palette

About this palette

Silkworm to Moor-Monster is a 5-color cool, earthy, vintage palette: #E7EDCF (Silkworm), #9CB883 (Foliage), #917F00 (Olive), #1F1B06 (Noir Mystique), #26522B (Moor-Monster). It mixes green, yellow, brown tones and feels cool overall. The strongest text pairing is #E7EDCF on #1F1B06 with a contrast ratio of 14.30:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Silkworm	rgb(231, 237, 207)	hsl(72, 45%, 87%)
Foliage	rgb(156, 184, 131)	hsl(92, 27%, 62%)
Olive	rgb(145, 127, 0)	hsl(53, 100%, 28%)
Noir Mystique	rgb(31, 27, 6)	hsl(50, 68%, 7%)
Moor-Monster	rgb(38, 82, 43)	hsl(127, 37%, 24%)

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.

Aa14.30:1 Super#E7EDCF on #1F1B06
Aa14.30:1 Super#1F1B06 on #E7EDCF
Aa7.88:1 Very good#9CB883 on #1F1B06
Aa7.88:1 Very good#1F1B06 on #9CB883
Aa7.49:1 Very good#E7EDCF on #26522B
Aa7.49:1 Very good#26522B on #E7EDCF
Aa4.30:1 Poor#917F00 on #1F1B06
Aa4.30:1 Poor#1F1B06 on #917F00

Color blindness preview

CSS variables

/* Silkworm to Moor-Monster — https://swatchly.xyz/palette/e7edcf-9cb883-917f00-1f1b06-26522b */
:root {
  --silkworm: #e7edcf;
  --foliage: #9cb883;
  --olive: #917f00;
  --noir-mystique: #1f1b06;
  --moor-monster: #26522b;
}

Tailwind CSS v4

/* Silkworm to Moor-Monster — https://swatchly.xyz/palette/e7edcf-9cb883-917f00-1f1b06-26522b */
@theme {
  --color-silkworm: #e7edcf;
  --color-silkworm-50: #f2f6e5;
  --color-silkworm-100: #e7edcf;
  --color-silkworm-200: #d4d9c3;
  --color-silkworm-300: #bec3aa;
  --color-silkworm-400: #9fa489;
  --color-silkworm-500: #84896e;
  --color-silkworm-600: #6a6f55;
  --color-silkworm-700: #545841;
  --color-silkworm-800: #414530;
  --color-silkworm-900: #323523;
  --color-silkworm-950: #1e2114;
  --color-foliage: #9cb883;
  --color-foliage-50: #f1ffe5;
  --color-foliage-100: #e7f8d9;
  --color-foliage-200: #d3e8c2;
  --color-foliage-300: #bdd4a9;
  --color-foliage-400: #9cb883;
  --color-foliage-500: #7f9a67;
  --color-foliage-600: #637d4b;
  --color-foliage-700: #4c6335;
  --color-foliage-800: #394d25;
  --color-foliage-900: #2a3b18;
  --color-foliage-950: #18240b;
  --color-olive: #917f00;
  --color-olive-50: #fff5c0;
  --color-olive-100: #f5eaad;
  --color-olive-200: #e2d58c;
  --color-olive-300: #ccbd68;
  --color-olive-400: #ad9c38;
  --color-olive-500: #917f00;
  --color-olive-600: #756600;
  --color-olive-700: #5d5100;
  --color-olive-800: #493f00;
  --color-olive-900: #393100;
  --color-olive-950: #241e00;
  --color-noir-mystique: #1f1b06;
  --color-noir-mystique-50: #f8f6e7;
  --color-noir-mystique-100: #efecdb;
  --color-noir-mystique-200: #dcd8c5;
  --color-noir-mystique-300: #c5c2ab;
  --color-noir-mystique-400: #a7a28a;
  --color-noir-mystique-500: #8a866d;
  --color-noir-mystique-600: #6f6b53;
  --color-noir-mystique-700: #57533e;
  --color-noir-mystique-800: #433f2e;
  --color-noir-mystique-900: #322f20;
  --color-noir-mystique-950: #1f1b06;
  --color-moor-monster: #26522b;
  --color-moor-monster-50: #e3fee4;
  --color-moor-monster-100: #d7f5d8;
  --color-moor-monster-200: #bfe3c0;
  --color-moor-monster-300: #a6cea8;
  --color-moor-monster-400: #84b186;
  --color-moor-monster-500: #68966b;
  --color-moor-monster-600: #4f7b53;
  --color-moor-monster-700: #3b643f;
  --color-moor-monster-800: #26522b;
  --color-moor-monster-900: #1f3f22;
  --color-moor-monster-950: #112813;
}