Frosted Fir to Twilight Zone color palette

B1D4B7Frosted Fir 95AF9ENinja Turtle 658070Ecological 334C3FPine Needle 111914Twilight Zone

About this palette

Frosted Fir to Twilight Zone is a 5-color muted, cool, earthy, gradient palette: #B1D4B7 (Frosted Fir), #95AF9E (Ninja Turtle), #658070 (Ecological), #334C3F (Pine Needle), #111914 (Twilight Zone). It mixes green, black tones and feels cool overall. The strongest text pairing is #B1D4B7 on #111914 with a contrast ratio of 11.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(177, 212, 183)	hsl(130, 29%, 76%)
Ninja Turtle	rgb(149, 175, 158)	hsl(141, 14%, 64%)
Ecological	rgb(101, 128, 112)	hsl(144, 12%, 45%)
Pine Needle	rgb(51, 76, 63)	hsl(149, 20%, 25%)
Twilight Zone	rgb(17, 25, 20)	hsl(142, 19%, 8%)

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.06:1 Very good#B1D4B7 on #111914
Aa11.06:1 Very good#111914 on #B1D4B7
Aa7.59:1 Very good#95AF9E on #111914
Aa7.59:1 Very good#111914 on #95AF9E
Aa5.77:1 Good#B1D4B7 on #334C3F
Aa5.77:1 Good#334C3F on #B1D4B7
Aa4.16:1 Poor#658070 on #111914
Aa4.16:1 Poor#111914 on #658070

Color blindness preview

CSS variables

/* Frosted Fir to Twilight Zone — https://swatchly.xyz/palette/b1d4b7-95af9e-658070-334c3f-111914 */
:root {
  --frosted-fir: #b1d4b7;
  --ninja-turtle: #95af9e;
  --ecological: #658070;
  --pine-needle: #334c3f;
  --twilight-zone: #111914;
}

Tailwind CSS v4

/* Frosted Fir to Twilight Zone — https://swatchly.xyz/palette/b1d4b7-95af9e-658070-334c3f-111914 */
@theme {
  --color-frosted-fir: #b1d4b7;
  --color-frosted-fir-50: #eefff0;
  --color-frosted-fir-100: #e3f7e6;
  --color-frosted-fir-200: #cee6d2;
  --color-frosted-fir-300: #b1d4b7;
  --color-frosted-fir-400: #92b298;
  --color-frosted-fir-500: #74957a;
  --color-frosted-fir-600: #59795f;
  --color-frosted-fir-700: #436049;
  --color-frosted-fir-800: #314b36;
  --color-frosted-fir-900: #233928;
  --color-frosted-fir-950: #142317;
  --color-ninja-turtle: #95af9e;
  --color-ninja-turtle-50: #edfcf2;
  --color-ninja-turtle-100: #e3f3e8;
  --color-ninja-turtle-200: #cee1d5;
  --color-ninja-turtle-300: #b6cdbe;
  --color-ninja-turtle-400: #95af9e;
  --color-ninja-turtle-500: #799282;
  --color-ninja-turtle-600: #5e7667;
  --color-ninja-turtle-700: #485e50;
  --color-ninja-turtle-800: #36493d;
  --color-ninja-turtle-900: #28382e;
  --color-ninja-turtle-950: #17221b;
  --color-ecological: #658070;
  --color-ecological-50: #eafaf0;
  --color-ecological-100: #e1f3e8;
  --color-ecological-200: #cde2d5;
  --color-ecological-300: #b7cfc0;
  --color-ecological-400: #98b2a2;
  --color-ecological-500: #7d9988;
  --color-ecological-600: #658070;
  --color-ecological-700: #4d6658;
  --color-ecological-800: #3a5043;
  --color-ecological-900: #2b3d33;
  --color-ecological-950: #19261e;
  --color-pine-needle: #334c3f;
  --color-pine-needle-50: #eafaf1;
  --color-pine-needle-100: #def0e6;
  --color-pine-needle-200: #c8ded2;
  --color-pine-needle-300: #b0c8bb;
  --color-pine-needle-400: #90aa9c;
  --color-pine-needle-500: #748f81;
  --color-pine-needle-600: #5b7567;
  --color-pine-needle-700: #475e52;
  --color-pine-needle-800: #334c3f;
  --color-pine-needle-900: #283a31;
  --color-pine-needle-950: #17251e;
  --color-twilight-zone: #111914;
  --color-twilight-zone-50: #f1f7f3;
  --color-twilight-zone-100: #e6ede9;
  --color-twilight-zone-200: #d2dad4;
  --color-twilight-zone-300: #bac4bd;
  --color-twilight-zone-400: #9aa49e;
  --color-twilight-zone-500: #7d8781;
  --color-twilight-zone-600: #616b65;
  --color-twilight-zone-700: #4a534d;
  --color-twilight-zone-800: #373e39;
  --color-twilight-zone-900: #272d29;
  --color-twilight-zone-950: #111914;
}