Paying Mantis to Silent Snowfall color palette

6B9573Paying Mantis 271D25Ink Black CCBBABSmoke Dragon 344F68Outer Space E9F7FFSilent Snowfall

About this palette

Paying Mantis to Silent Snowfall is a 5-color muted palette: #6B9573 (Paying Mantis), #271D25 (Ink Black), #CCBBAB (Smoke Dragon), #344F68 (Outer Space), #E9F7FF (Silent Snowfall). It mixes green, gray, blue, white tones and feels cool overall. The strongest text pairing is #271D25 on #E9F7FF with a contrast ratio of 14.91:1, and 5 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Paying Mantis	rgb(107, 149, 115)	hsl(131, 17%, 50%)
Ink Black	rgb(39, 29, 37)	hsl(312, 15%, 13%)
Smoke Dragon	rgb(204, 187, 171)	hsl(29, 24%, 74%)
Outer Space	rgb(52, 79, 104)	hsl(209, 33%, 31%)
Silent Snowfall	rgb(233, 247, 255)	hsl(202, 100%, 96%)

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.91:1 Super#271D25 on #E9F7FF
Aa14.91:1 Super#E9F7FF on #271D25
Aa8.74:1 Very good#271D25 on #CCBBAB
Aa8.74:1 Very good#CCBBAB on #271D25
Aa7.80:1 Very good#344F68 on #E9F7FF
Aa7.80:1 Very good#E9F7FF on #344F68
Aa4.79:1 Good#6B9573 on #271D25
Aa4.79:1 Good#271D25 on #6B9573

Color blindness preview

CSS variables

/* Paying Mantis to Silent Snowfall — https://swatchly.xyz/palette/6b9573-271d25-ccbbab-344f68-e9f7ff */
:root {
  --paying-mantis: #6b9573;
  --ink-black: #271d25;
  --smoke-dragon: #ccbbab;
  --outer-space: #344f68;
  --silent-snowfall: #e9f7ff;
}

Tailwind CSS v4

/* Paying Mantis to Silent Snowfall — https://swatchly.xyz/palette/6b9573-271d25-ccbbab-344f68-e9f7ff */
@theme {
  --color-paying-mantis: #6b9573;
  --color-paying-mantis-50: #e5fde9;
  --color-paying-mantis-100: #d9f5de;
  --color-paying-mantis-200: #c3e3c8;
  --color-paying-mantis-300: #a9ceaf;
  --color-paying-mantis-400: #87b08e;
  --color-paying-mantis-500: #6b9573;
  --color-paying-mantis-600: #517959;
  --color-paying-mantis-700: #3c6144;
  --color-paying-mantis-800: #2c4c33;
  --color-paying-mantis-900: #1f3b25;
  --color-paying-mantis-950: #112515;
  --color-ink-black: #271d25;
  --color-ink-black-50: #faf2f8;
  --color-ink-black-100: #f1e8ef;
  --color-ink-black-200: #ded4dc;
  --color-ink-black-300: #c8bdc6;
  --color-ink-black-400: #aa9da7;
  --color-ink-black-500: #8f828c;
  --color-ink-black-600: #746872;
  --color-ink-black-700: #5d525b;
  --color-ink-black-800: #4a4048;
  --color-ink-black-900: #393138;
  --color-ink-black-950: #271d25;
  --color-smoke-dragon: #ccbbab;
  --color-smoke-dragon-50: #fcf2e9;
  --color-smoke-dragon-100: #f2e7dd;
  --color-smoke-dragon-200: #e0d3c6;
  --color-smoke-dragon-300: #ccbbab;
  --color-smoke-dragon-400: #ac9c8d;
  --color-smoke-dragon-500: #918172;
  --color-smoke-dragon-600: #776859;
  --color-smoke-dragon-700: #5f5245;
  --color-smoke-dragon-800: #4b4034;
  --color-smoke-dragon-900: #3b3127;
  --color-smoke-dragon-950: #251e17;
  --color-outer-space: #344f68;
  --color-outer-space-50: #edf6ff;
  --color-outer-space-100: #dceeff;
  --color-outer-space-200: #c2d9ef;
  --color-outer-space-300: #a6c1da;
  --color-outer-space-400: #83a0bb;
  --color-outer-space-500: #66839e;
  --color-outer-space-600: #4c6780;
  --color-outer-space-700: #344f68;
  --color-outer-space-800: #293d50;
  --color-outer-space-900: #1e2f3f;
  --color-outer-space-950: #101d28;
  --color-silent-snowfall: #e9f7ff;
  --color-silent-snowfall-50: #e9f7ff;
  --color-silent-snowfall-100: #e4ecf1;
  --color-silent-snowfall-200: #cfd9df;
  --color-silent-snowfall-300: #b7c3c9;
  --color-silent-snowfall-400: #97a3ab;
  --color-silent-snowfall-500: #7c888f;
  --color-silent-snowfall-600: #626e75;
  --color-silent-snowfall-700: #4c575d;
  --color-silent-snowfall-800: #3b4449;
  --color-silent-snowfall-900: #2c3439;
  --color-silent-snowfall-950: #1a2023;
}