Frosted Fir to Bats Cloak Color Palette

About this palette

Frosted Fir to Bats Cloak is a 4-color muted palette: #BBD4B9 (Frosted Fir), #46445C (Genie), #848F7C (Mummy’s Tomb), #1E141A (Bats Cloak). It mixes green, purple, gray, black tones and feels cool overall. The strongest text pairing is #BBD4B9 on #1E141A with a contrast ratio of 11.31:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(187, 212, 185)	hsl(116, 24%, 78%)
Genie	rgb(70, 68, 92)	hsl(245, 15%, 31%)
Mummy’s Tomb	rgb(132, 143, 124)	hsl(95, 8%, 52%)
Bats Cloak	rgb(30, 20, 26)	hsl(324, 20%, 10%)

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.

Aa11.31:1 Very good#BBD4B9 on #1E141A
Aa11.31:1 Very good#1E141A on #BBD4B9
Aa5.90:1 Good#BBD4B9 on #46445C
Aa5.90:1 Good#46445C on #BBD4B9
Aa5.30:1 Good#848F7C on #1E141A
Aa5.30:1 Good#1E141A on #848F7C

Color blindness preview

CSS variables

/* Frosted Fir to Bats Cloak — https://swatchly.xyz/palette/bbd4b9-46445c-848f7c-1e141a */
:root {
  --frosted-fir: #bbd4b9;
  --genie: #46445c;
  --mummy-s-tomb: #848f7c;
  --bats-cloak: #1e141a;
}

Tailwind CSS v4

/* Frosted Fir to Bats Cloak — https://swatchly.xyz/palette/bbd4b9-46445c-848f7c-1e141a */
@theme {
  --color-frosted-fir: #bbd4b9;
  --color-frosted-fir-50: #f2fff1;
  --color-frosted-fir-100: #e9f8e8;
  --color-frosted-fir-200: #d5e6d4;
  --color-frosted-fir-300: #bbd4b9;
  --color-frosted-fir-400: #9bb299;
  --color-frosted-fir-500: #7d947b;
  --color-frosted-fir-600: #617860;
  --color-frosted-fir-700: #4a5f49;
  --color-frosted-fir-800: #384936;
  --color-frosted-fir-900: #293728;
  --color-frosted-fir-950: #182317;
  --color-genie: #46445c;
  --color-genie-50: #f4f4ff;
  --color-genie-100: #eae9fb;
  --color-genie-200: #d6d5eb;
  --color-genie-300: #c0bfd7;
  --color-genie-400: #a2a0bb;
  --color-genie-500: #8785a0;
  --color-genie-600: #6e6c86;
  --color-genie-700: #58566e;
  --color-genie-800: #46445c;
  --color-genie-900: #363446;
  --color-genie-950: #21202d;
  --color-mummy-s-tomb: #848f7c;
  --color-mummy-s-tomb-50: #f2f9ed;
  --color-mummy-s-tomb-100: #e8f0e3;
  --color-mummy-s-tomb-200: #d5ddce;
  --color-mummy-s-tomb-300: #bec8b7;
  --color-mummy-s-tomb-400: #9faa97;
  --color-mummy-s-tomb-500: #848f7c;
  --color-mummy-s-tomb-600: #697361;
  --color-mummy-s-tomb-700: #525c4b;
  --color-mummy-s-tomb-800: #3f4839;
  --color-mummy-s-tomb-900: #30372b;
  --color-mummy-s-tomb-950: #1d2219;
  --color-bats-cloak: #1e141a;
  --color-bats-cloak-50: #fbf2f7;
  --color-bats-cloak-100: #f1e8ed;
  --color-bats-cloak-200: #dfd4da;
  --color-bats-cloak-300: #c9bdc4;
  --color-bats-cloak-400: #aa9da5;
  --color-bats-cloak-500: #8d8088;
  --color-bats-cloak-600: #71646c;
  --color-bats-cloak-700: #584d53;
  --color-bats-cloak-800: #43393f;
  --color-bats-cloak-900: #31292e;
  --color-bats-cloak-950: #1e141a;
}