Frosted Fir to Black Box color palette

A7D3B5Frosted Fir 77BBB3Mintnight 4E8754Beanpole 006D58Into the Green 082E31Black Box

About this palette

Frosted Fir to Black Box is a 5-color cool, gradient palette: #A7D3B5 (Frosted Fir), #77BBB3 (Mintnight), #4E8754 (Beanpole), #006D58 (Into the Green), #082E31 (Black Box). It mixes green, turquoise tones and feels cool overall. The strongest text pairing is #A7D3B5 on #082E31 with a contrast ratio of 8.74:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Frosted Fir	rgb(167, 211, 181)	hsl(139, 33%, 74%)
Mintnight	rgb(119, 187, 179)	hsl(173, 33%, 60%)
Beanpole	rgb(78, 135, 84)	hsl(126, 27%, 42%)
Into the Green	rgb(0, 109, 88)	hsl(168, 100%, 21%)
Black Box	rgb(8, 46, 49)	hsl(184, 72%, 11%)

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.

Aa8.74:1 Very good#A7D3B5 on #082E31
Aa8.74:1 Very good#082E31 on #A7D3B5
Aa6.60:1 Good#77BBB3 on #082E31
Aa6.60:1 Good#082E31 on #77BBB3
Aa3.79:1 Poor#A7D3B5 on #006D58
Aa3.79:1 Poor#006D58 on #A7D3B5
Aa3.40:1 Poor#4E8754 on #082E31
Aa3.40:1 Poor#082E31 on #4E8754

Color blindness preview

CSS variables

/* Frosted Fir to Black Box — https://swatchly.xyz/palette/a7d3b5-77bbb3-4e8754-006d58-082e31 */
:root {
  --frosted-fir: #a7d3b5;
  --mintnight: #77bbb3;
  --beanpole: #4e8754;
  --into-the-green: #006d58;
  --black-box: #082e31;
}

Tailwind CSS v4

/* Frosted Fir to Black Box — https://swatchly.xyz/palette/a7d3b5-77bbb3-4e8754-006d58-082e31 */
@theme {
  --color-frosted-fir: #a7d3b5;
  --color-frosted-fir-50: #e8ffef;
  --color-frosted-fir-100: #ddf7e4;
  --color-frosted-fir-200: #c6e5d0;
  --color-frosted-fir-300: #a7d3b5;
  --color-frosted-fir-400: #89b196;
  --color-frosted-fir-500: #6b9579;
  --color-frosted-fir-600: #51795f;
  --color-frosted-fir-700: #3c6149;
  --color-frosted-fir-800: #2b4c37;
  --color-frosted-fir-900: #1e3a28;
  --color-frosted-fir-950: #102418;
  --color-mintnight: #77bbb3;
  --color-mintnight-50: #e7fffc;
  --color-mintnight-100: #d4faf5;
  --color-mintnight-200: #bbeae4;
  --color-mintnight-300: #a0d7d0;
  --color-mintnight-400: #77bbb3;
  --color-mintnight-500: #5a9d95;
  --color-mintnight-600: #3c8079;
  --color-mintnight-700: #256660;
  --color-mintnight-800: #14504a;
  --color-mintnight-900: #083d38;
  --color-mintnight-950: #022522;
  --color-beanpole: #4e8754;
  --color-beanpole-50: #e0ffe2;
  --color-beanpole-100: #d5f9d7;
  --color-beanpole-200: #bee9c1;
  --color-beanpole-300: #a5d6a9;
  --color-beanpole-400: #83ba87;
  --color-beanpole-500: #67a06c;
  --color-beanpole-600: #4e8754;
  --color-beanpole-700: #376d3e;
  --color-beanpole-800: #26562c;
  --color-beanpole-900: #19421f;
  --color-beanpole-950: #0b2a10;
  --color-into-the-green: #006d58;
  --color-into-the-green-50: #d9fff2;
  --color-into-the-green-100: #c5f8e8;
  --color-into-the-green-200: #abe8d5;
  --color-into-the-green-300: #8ed5bf;
  --color-into-the-green-400: #67b8a1;
  --color-into-the-green-500: #479e86;
  --color-into-the-green-600: #2a836d;
  --color-into-the-green-700: #006d58;
  --color-into-the-green-800: #005544;
  --color-into-the-green-900: #004234;
  --color-into-the-green-950: #002a20;
  --color-black-box: #082e31;
  --color-black-box-50: #e4fafc;
  --color-black-box-100: #d8f1f3;
  --color-black-box-200: #c1dee0;
  --color-black-box-300: #a7c8cb;
  --color-black-box-400: #85a9ac;
  --color-black-box-500: #6b9093;
  --color-black-box-600: #53777a;
  --color-black-box-700: #406164;
  --color-black-box-800: #314f51;
  --color-black-box-900: #254042;
  --color-black-box-950: #082e31;
}