ع

Forest Floor

Moss, fern and bark tones taken from a forest walk.

≈ Forest Night
≈ Hunter Green
≈ Asparagus
≈ Sand
≈ Mud

Color codes

HEXRGBHSLCMYK
hsl(151, 36%, 17%)cmyk(53%, 0%, 26%, 77%)
hsl(133, 27%, 33%)cmyk(42%, 0%, 33%, 58%)
hsl(98, 22%, 53%)cmyk(21%, 0%, 34%, 37%)
hsl(44, 37%, 66%)cmyk(0%, 8%, 31%, 21%)
hsl(26, 30%, 32%)cmyk(0%, 26%, 46%, 58%)

CSS

:root {
  --forest-floor-1: #1B3A2B;
  --forest-floor-2: #3E6B48;
  --forest-floor-3: #7FA16B;
  --forest-floor-4: #C9B88A;
  --forest-floor-5: #6B4F3A;
}

How these colors work together

Its hues are spread widely around the wheel, giving a balanced, varied scheme. Overall it reads warm. Lightness spans 50 points, which sets how much contrast you can create.

1 of 10 color pairs reach the 4.5:1 contrast needed for normal text. The most readable pair is ⁦#1B3A2B⁩ on ⁦#C9B88A⁩ (6.35:1).

Forest Floor — readable text using the best pair.

Suggested applications

  • Outdoor brands, wellness and sustainability projects.
  • Interface themes: use the lightest color for backgrounds and the darkest for text.
  • Brand kits, social graphics and presentations.

#green#earth#organic

Check accessibility Simulate color blindness CSS variables

Frequently asked questions

How do I use the Forest Floor palette?
The Forest Floor palette has 5 colors. Use one dominant color for large areas, a supporting color for secondary elements and the most saturated color sparingly as an accent.
Which colors in this palette are best for text?
Use ⁦#1B3A2B⁩ on ⁦#C9B88A⁩: it has a contrast ratio of 6.35:1.
Can I download this palette?
Yes. Export it as PNG, SVG, CSS variables, JSON or plain text with the buttons above the color table.

More palettes

Ocean Depths#03045E #0077B6 #00B4D8 #90E0EF #CAF0F8Olive Grove#4A5A23 #7A8B3A #B5B77C #E6E2C3 #5C4033Desert Dunes#F2D6B3 #E0A96D #C2763B #8C4A2F #3B2A20Coastal Living#FFFFFF #E8F1F2 #A7C7CB #4F7D87 #D9C4A5Mediterranean Villa#F7F1E5 #E3C9A1 #C86B3C #3E7C8A #20434DBold Food Brand#D62828 #F77F00 #FCBF49 #EAE2B7 #003049