Forest Moss Palette

CSS variables

:root {
  --color-1: #1A2E1A;
  --color-2: #38571A;
  --color-3: #6B8F3A;
  --color-4: #A3B565;
  --color-5: #E0E5C8;
}

Tailwind config

// tailwind.config.js
colors: {
  "forest-moss-1": "#1A2E1A",
  "forest-moss-2": "#38571A",
  "forest-moss-3": "#6B8F3A",
  "forest-moss-4": "#A3B565",
  "forest-moss-5": "#E0E5C8",
}

About this palette

The Forest Moss palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.

Readable text on each color

White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.

#1A2E1AWhite14.49:1AA

#38571AWhite8.25:1AA

#6B8F3ANear-black5.05:1AA

#A3B565Near-black8.42:1AA

#E0E5C8Near-black14.59:1AA

These colours on each other

6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.

text \\ background	#1A2E1A	#38571A	#6B8F3A	#A3B565	#E0E5C8
#1A2E1A	·	1.76Fails	3.87Large only	6.45AA	11.18AA
#38571A	1.76Fails	·	2.21Fails	3.67Large only	6.37AA
#6B8F3A	3.87Large only	2.21Fails	·	1.67Fails	2.89Fails
#A3B565	6.45AA	3.67Large only	1.67Fails	·	1.73Fails
#E0E5C8	11.18AA	6.37AA	2.89Fails	1.73Fails	·

More palettes

Gradients in the same range

Cosmic Midnight Blue Sand Dune

Forest Moss Palette

Related

Gradients in the same range