Marsh Fog to Bitter Liquorice color palette

BFD7C1Marsh Fog 719D94Emerald Oasis 647161Knit Cardigan 40442EPalm Leaf 26281ABitter Liquorice

About this palette

Marsh Fog to Bitter Liquorice is a 5-color muted, cool, gradient palette: #BFD7C1 (Marsh Fog), #719D94 (Emerald Oasis), #647161 (Knit Cardigan), #40442E (Palm Leaf), #26281A (Bitter Liquorice). It mixes green, turquoise, gray tones and feels cool overall. The strongest text pairing is #BFD7C1 on #26281A with a contrast ratio of 9.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Marsh Fog	rgb(191, 215, 193)	hsl(125, 23%, 80%)
Emerald Oasis	rgb(113, 157, 148)	hsl(168, 18%, 53%)
Knit Cardigan	rgb(100, 113, 97)	hsl(109, 8%, 41%)
Palm Leaf	rgb(64, 68, 46)	hsl(71, 19%, 22%)
Bitter Liquorice	rgb(38, 40, 26)	hsl(69, 21%, 13%)

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.78:1 Very good#BFD7C1 on #26281A
Aa9.78:1 Very good#26281A on #BFD7C1
Aa6.58:1 Good#BFD7C1 on #40442E
Aa6.58:1 Good#40442E on #BFD7C1
Aa4.96:1 Good#719D94 on #26281A
Aa4.96:1 Good#26281A on #719D94
Aa3.36:1 Poor#BFD7C1 on #647161
Aa3.36:1 Poor#647161 on #BFD7C1

Color blindness preview

CSS variables

/* Marsh Fog to Bitter Liquorice — https://swatchly.xyz/palette/bfd7c1-719d94-647161-40442e-26281a */
:root {
  --marsh-fog: #bfd7c1;
  --emerald-oasis: #719d94;
  --knit-cardigan: #647161;
  --palm-leaf: #40442e;
  --bitter-liquorice: #26281a;
}

Tailwind CSS v4

/* Marsh Fog to Bitter Liquorice — https://swatchly.xyz/palette/bfd7c1-719d94-647161-40442e-26281a */
@theme {
  --color-marsh-fog: #bfd7c1;
  --color-marsh-fog-50: #e6f4e7;
  --color-marsh-fog-100: #d9e9db;
  --color-marsh-fog-200: #bfd7c1;
  --color-marsh-fog-300: #acc1ae;
  --color-marsh-fog-400: #8da38f;
  --color-marsh-fog-500: #738975;
  --color-marsh-fog-600: #5b705d;
  --color-marsh-fog-700: #475a49;
  --color-marsh-fog-800: #374738;
  --color-marsh-fog-900: #29372a;
  --color-marsh-fog-950: #182219;
  --color-emerald-oasis: #719d94;
  --color-emerald-oasis-50: #e5fef8;
  --color-emerald-oasis-100: #dcf7f1;
  --color-emerald-oasis-200: #c6e6df;
  --color-emerald-oasis-300: #aed3cb;
  --color-emerald-oasis-400: #8db6ae;
  --color-emerald-oasis-500: #719d94;
  --color-emerald-oasis-600: #558077;
  --color-emerald-oasis-700: #3e665e;
  --color-emerald-oasis-800: #2c5049;
  --color-emerald-oasis-900: #1e3d37;
  --color-emerald-oasis-950: #102522;
  --color-knit-cardigan: #647161;
  --color-knit-cardigan-50: #f0f8ee;
  --color-knit-cardigan-100: #e5eee3;
  --color-knit-cardigan-200: #d1dbce;
  --color-knit-cardigan-300: #b9c6b6;
  --color-knit-cardigan-400: #99a796;
  --color-knit-cardigan-500: #7e8b7b;
  --color-knit-cardigan-600: #647161;
  --color-knit-cardigan-700: #4e5a4c;
  --color-knit-cardigan-800: #3c463a;
  --color-knit-cardigan-900: #2d362c;
  --color-knit-cardigan-950: #1b221a;
  --color-palm-leaf: #40442e;
  --color-palm-leaf-50: #f4f7e8;
  --color-palm-leaf-100: #eaeddd;
  --color-palm-leaf-200: #d6dac7;
  --color-palm-leaf-300: #bfc4ad;
  --color-palm-leaf-400: #9fa48c;
  --color-palm-leaf-500: #848970;
  --color-palm-leaf-600: #696e57;
  --color-palm-leaf-700: #535742;
  --color-palm-leaf-800: #40442e;
  --color-palm-leaf-900: #313425;
  --color-palm-leaf-950: #1e2015;
  --color-bitter-liquorice: #26281a;
  --color-bitter-liquorice-50: #f5f6ec;
  --color-bitter-liquorice-100: #ebede1;
  --color-bitter-liquorice-200: #d7d9cc;
  --color-bitter-liquorice-300: #c0c3b3;
  --color-bitter-liquorice-400: #a1a393;
  --color-bitter-liquorice-500: #878a79;
  --color-bitter-liquorice-600: #6e7161;
  --color-bitter-liquorice-700: #595b4c;
  --color-bitter-liquorice-800: #47493c;
  --color-bitter-liquorice-900: #393b2f;
  --color-bitter-liquorice-950: #26281a;
}