Forestry to Let It Snow Color Palette

About this palette

Forestry to Let It Snow is a 5-color muted, cool, earthy, gradient palette: #373F27 (Forestry), #3B6451 (June Ivy), #7A9C8B (Parisian Patina), #AEB79E (Salvia), #D6F0F0 (Let It Snow). It mixes green, white tones and feels cool overall. The strongest text pairing is #373F27 on #D6F0F0 with a contrast ratio of 9.24:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forestry	rgb(55, 63, 39)	hsl(80, 24%, 20%)
June Ivy	rgb(59, 100, 81)	hsl(152, 26%, 31%)
Parisian Patina	rgb(122, 156, 139)	hsl(150, 15%, 55%)
Salvia	rgb(174, 183, 158)	hsl(82, 15%, 67%)
Let It Snow	rgb(214, 240, 240)	hsl(180, 46%, 89%)

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.24:1 Very good#373F27 on #D6F0F0
Aa9.24:1 Very good#D6F0F0 on #373F27
Aa5.62:1 Good#3B6451 on #D6F0F0
Aa5.62:1 Good#D6F0F0 on #3B6451
Aa5.29:1 Good#373F27 on #AEB79E
Aa5.29:1 Good#AEB79E on #373F27
Aa3.66:1 Poor#373F27 on #7A9C8B
Aa3.66:1 Poor#7A9C8B on #373F27

Color blindness preview

CSS variables

/* Forestry to Let It Snow — https://swatchly.xyz/palette/373f27-3b6451-7a9c8b-aeb79e-d6f0f0 */
:root {
  --forestry: #373f27;
  --june-ivy: #3b6451;
  --parisian-patina: #7a9c8b;
  --salvia: #aeb79e;
  --let-it-snow: #d6f0f0;
}

Tailwind CSS v4

/* Forestry to Let It Snow — https://swatchly.xyz/palette/373f27-3b6451-7a9c8b-aeb79e-d6f0f0 */
@theme {
  --color-forestry: #373f27;
  --color-forestry-50: #f2f8e8;
  --color-forestry-100: #e8eedc;
  --color-forestry-200: #d3dbc6;
  --color-forestry-300: #bbc4ab;
  --color-forestry-400: #9aa389;
  --color-forestry-500: #7d876c;
  --color-forestry-600: #626b52;
  --color-forestry-700: #4b533c;
  --color-forestry-800: #373f27;
  --color-forestry-900: #2a3020;
  --color-forestry-950: #191d12;
  --color-june-ivy: #3b6451;
  --color-june-ivy-50: #e4fcef;
  --color-june-ivy-100: #d7f3e5;
  --color-june-ivy-200: #c1e1d1;
  --color-june-ivy-300: #a8cdba;
  --color-june-ivy-400: #86af9b;
  --color-june-ivy-500: #6a9580;
  --color-june-ivy-600: #517a67;
  --color-june-ivy-700: #3b6451;
  --color-june-ivy-800: #2c4e3f;
  --color-june-ivy-900: #203d2f;
  --color-june-ivy-950: #11261d;
  --color-parisian-patina: #7a9c8b;
  --color-parisian-patina-50: #eafdf3;
  --color-parisian-patina-100: #e1f6eb;
  --color-parisian-patina-200: #cce5d8;
  --color-parisian-patina-300: #b5d2c3;
  --color-parisian-patina-400: #95b5a5;
  --color-parisian-patina-500: #7a9c8b;
  --color-parisian-patina-600: #5e7f6e;
  --color-parisian-patina-700: #466556;
  --color-parisian-patina-800: #344f42;
  --color-parisian-patina-900: #253c31;
  --color-parisian-patina-950: #15251d;
  --color-salvia: #aeb79e;
  --color-salvia-50: #ebf0e1;
  --color-salvia-100: #dee4d3;
  --color-salvia-200: #c7cfba;
  --color-salvia-300: #aeb79e;
  --color-salvia-400: #929a82;
  --color-salvia-500: #79816a;
  --color-salvia-600: #616953;
  --color-salvia-700: #4d5440;
  --color-salvia-800: #3d4332;
  --color-salvia-900: #303526;
  --color-salvia-950: #1d2116;
  --color-let-it-snow: #d6f0f0;
  --color-let-it-snow-50: #e9f7f7;
  --color-let-it-snow-100: #d6f0f0;
  --color-let-it-snow-200: #c8dbdb;
  --color-let-it-snow-300: #b0c5c5;
  --color-let-it-snow-400: #8fa6a6;
  --color-let-it-snow-500: #738b8b;
  --color-let-it-snow-600: #5a7171;
  --color-let-it-snow-700: #455a5a;
  --color-let-it-snow-800: #344646;
  --color-let-it-snow-900: #273636;
  --color-let-it-snow-950: #172222;
}