Frosted Fir to Lemongrass Color Palette

About this palette

Frosted Fir to Lemongrass is a 5-color muted palette: #BBD5BD (Frosted Fir), #798157 (Bonsai), #4D4331 (Turtle), #201C14 (Coco’s Black), #9B9A83 (Lemongrass). It mixes green, gray tones and feels cool overall. The strongest text pairing is #BBD5BD on #201C14 with a contrast ratio of 10.80:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(187, 213, 189)	hsl(125, 24%, 78%)
Bonsai	rgb(121, 129, 87)	hsl(71, 19%, 42%)
Turtle	rgb(77, 67, 49)	hsl(39, 22%, 25%)
Coco’s Black	rgb(32, 28, 20)	hsl(40, 23%, 10%)
Lemongrass	rgb(155, 154, 131)	hsl(58, 11%, 56%)

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.

Aa10.80:1 Very good#BBD5BD on #201C14
Aa10.80:1 Very good#201C14 on #BBD5BD
Aa6.18:1 Good#BBD5BD on #4D4331
Aa6.18:1 Good#4D4331 on #BBD5BD
Aa5.93:1 Good#201C14 on #9B9A83
Aa5.93:1 Good#9B9A83 on #201C14
Aa4.11:1 Poor#798157 on #201C14
Aa4.11:1 Poor#201C14 on #798157

Color blindness preview

CSS variables

/* Frosted Fir to Lemongrass — https://swatchly.xyz/palette/bbd5bd-798157-4d4331-201c14-9b9a83 */
:root {
  --frosted-fir: #bbd5bd;
  --bonsai: #798157;
  --turtle: #4d4331;
  --coco-s-black: #201c14;
  --lemongrass: #9b9a83;
}

Tailwind CSS v4

/* Frosted Fir to Lemongrass — https://swatchly.xyz/palette/bbd5bd-798157-4d4331-201c14-9b9a83 */
@theme {
  --color-frosted-fir: #bbd5bd;
  --color-frosted-fir-50: #e3f3e4;
  --color-frosted-fir-100: #d6e8d7;
  --color-frosted-fir-200: #bbd5bd;
  --color-frosted-fir-300: #a9bfaa;
  --color-frosted-fir-400: #8aa28c;
  --color-frosted-fir-500: #718973;
  --color-frosted-fir-600: #59705b;
  --color-frosted-fir-700: #455a47;
  --color-frosted-fir-800: #364837;
  --color-frosted-fir-900: #283729;
  --color-frosted-fir-950: #172318;
  --color-bonsai: #798157;
  --color-bonsai-50: #f1f7dd;
  --color-bonsai-100: #e5ebce;
  --color-bonsai-200: #cfd6b4;
  --color-bonsai-300: #b7bf98;
  --color-bonsai-400: #969e74;
  --color-bonsai-500: #798157;
  --color-bonsai-600: #616841;
  --color-bonsai-700: #4d532f;
  --color-bonsai-800: #3c4122;
  --color-bonsai-900: #2e3318;
  --color-bonsai-950: #1d200d;
  --color-turtle: #4d4331;
  --color-turtle-50: #fbf4e8;
  --color-turtle-100: #f2eadd;
  --color-turtle-200: #dfd6c7;
  --color-turtle-300: #cac0ae;
  --color-turtle-400: #aca18d;
  --color-turtle-500: #918672;
  --color-turtle-600: #766c59;
  --color-turtle-700: #5f5644;
  --color-turtle-800: #4d4331;
  --color-turtle-900: #3b3327;
  --color-turtle-950: #252016;
  --color-coco-s-black: #201c14;
  --color-coco-s-black-50: #f8f5ef;
  --color-coco-s-black-100: #eeebe4;
  --color-coco-s-black-200: #dbd7cf;
  --color-coco-s-black-300: #c5c0b7;
  --color-coco-s-black-400: #a6a197;
  --color-coco-s-black-500: #8a857b;
  --color-coco-s-black-600: #6f6a61;
  --color-coco-s-black-700: #57534b;
  --color-coco-s-black-800: #444039;
  --color-coco-s-black-900: #33302a;
  --color-coco-s-black-950: #201c14;
  --color-lemongrass: #9b9a83;
  --color-lemongrass-50: #f3f3e5;
  --color-lemongrass-100: #e8e7d7;
  --color-lemongrass-200: #d3d2c0;
  --color-lemongrass-300: #bbbba6;
  --color-lemongrass-400: #9b9a83;
  --color-lemongrass-500: #81806a;
  --color-lemongrass-600: #696853;
  --color-lemongrass-700: #53523f;
  --color-lemongrass-800: #424130;
  --color-lemongrass-900: #333224;
  --color-lemongrass-950: #202016;
}