Frosted Fir to Black Cherry Color Palette

About this palette

Frosted Fir to Black Cherry is a 5-color cool, earthy palette: #B0D1B0 (Frosted Fir), #D09A65 (Kombucha), #50825A (Kale), #1B5C94 (Hyper Blue), #2D1B2E (Black Cherry). It mixes green, orange, blue, purple tones and feels cool overall. The strongest text pairing is #B0D1B0 on #2D1B2E with a contrast ratio of 9.63:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(176, 209, 176)	hsl(120, 26%, 75%)
Kombucha	rgb(208, 154, 101)	hsl(30, 53%, 61%)
Kale	rgb(80, 130, 90)	hsl(132, 24%, 41%)
Hyper Blue	rgb(27, 92, 148)	hsl(208, 69%, 34%)
Black Cherry	rgb(45, 27, 46)	hsl(297, 26%, 14%)

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.63:1 Very good#B0D1B0 on #2D1B2E
Aa9.63:1 Very good#2D1B2E on #B0D1B0
Aa6.49:1 Good#D09A65 on #2D1B2E
Aa6.49:1 Good#2D1B2E on #D09A65
Aa4.19:1 Poor#B0D1B0 on #1B5C94
Aa4.19:1 Poor#1B5C94 on #B0D1B0
Aa3.58:1 Poor#50825A on #2D1B2E
Aa3.58:1 Poor#2D1B2E on #50825A

Color blindness preview

CSS variables

/* Frosted Fir to Black Cherry — https://swatchly.xyz/palette/b0d1b0-d09a65-50825a-1b5c94-2d1b2e */
:root {
  --frosted-fir: #b0d1b0;
  --kombucha: #d09a65;
  --kale: #50825a;
  --hyper-blue: #1b5c94;
  --black-cherry: #2d1b2e;
}

Tailwind CSS v4

/* Frosted Fir to Black Cherry — https://swatchly.xyz/palette/b0d1b0-d09a65-50825a-1b5c94-2d1b2e */
@theme {
  --color-frosted-fir: #b0d1b0;
  --color-frosted-fir-50: #ecfeec;
  --color-frosted-fir-100: #e2f6e1;
  --color-frosted-fir-200: #cce4cc;
  --color-frosted-fir-300: #b0d1b0;
  --color-frosted-fir-400: #91b091;
  --color-frosted-fir-500: #749374;
  --color-frosted-fir-600: #5a775a;
  --color-frosted-fir-700: #445f44;
  --color-frosted-fir-800: #324a33;
  --color-frosted-fir-900: #253925;
  --color-frosted-fir-950: #152315;
  --color-kombucha: #d09a65;
  --color-kombucha-50: #fff5ec;
  --color-kombucha-100: #ffead6;
  --color-kombucha-200: #fbd2ac;
  --color-kombucha-300: #eabb8f;
  --color-kombucha-400: #d09a65;
  --color-kombucha-500: #b27e49;
  --color-kombucha-600: #94622e;
  --color-kombucha-700: #794c19;
  --color-kombucha-800: #613909;
  --color-kombucha-900: #4c2b02;
  --color-kombucha-950: #301900;
  --color-kale: #50825a;
  --color-kale-50: #e1fee5;
  --color-kale-100: #d6f7db;
  --color-kale-200: #c0e6c6;
  --color-kale-300: #a7d3ae;
  --color-kale-400: #85b68e;
  --color-kale-500: #699c73;
  --color-kale-600: #50825a;
  --color-kale-700: #3a6844;
  --color-kale-800: #295232;
  --color-kale-900: #1c4024;
  --color-kale-950: #0e2814;
  --color-hyper-blue: #1b5c94;
  --color-hyper-blue-50: #eef6ff;
  --color-hyper-blue-100: #dcedff;
  --color-hyper-blue-200: #badcff;
  --color-hyper-blue-300: #92c8fd;
  --color-hyper-blue-400: #6da9e3;
  --color-hyper-blue-500: #4f8ec9;
  --color-hyper-blue-600: #3573ac;
  --color-hyper-blue-700: #1b5c94;
  --color-hyper-blue-800: #124876;
  --color-hyper-blue-900: #07375e;
  --color-hyper-blue-950: #02223e;
  --color-black-cherry: #2d1b2e;
  --color-black-cherry-50: #fef0fe;
  --color-black-cherry-100: #f5e5f5;
  --color-black-cherry-200: #e3d1e3;
  --color-black-cherry-300: #ceb9ce;
  --color-black-cherry-400: #af99b0;
  --color-black-cherry-500: #957e95;
  --color-black-cherry-600: #7a657b;
  --color-black-cherry-700: #635064;
  --color-black-cherry-800: #4f3e50;
  --color-black-cherry-900: #3f303f;
  --color-black-cherry-950: #2d1b2e;
}