Palette
Muted earth tones and greens that capture the dappled light and shadows of a quiet forest floor.
Preview
Interface
A quick look at how Sun-Dappled Forest Floor reads on buttons, badges, and alerts before you commit.
Marketing banner
A bolder treatment that stretches the primary and secondary colors across a full gradient banner.
Data visualization
Palette guide
The Sun-Dappled Forest Floor palette captures the muted earth tones and deep shadows of a quiet woodland. This serene collection features a light taupe (#91816A), a medium taupe (#7A6E58), a deep taupe (#645B47), a dark olive brown (#4E4836), and a very dark brown (#383526). It's an ideal choice for designs that aim to evoke calmness, natural beauty, and a sense of peaceful contemplation, perfect for eco-conscious or minimalist aesthetics.
primary
Use #7A6E58 as a calm, earthy primary tone for backgrounds, large content blocks, or main graphical elements.
secondary
Apply #4E4836 to add depth and grounding, ideal for navigation, footers, or important supporting elements.
accent
Employ #91816A as a subtle highlight, perfect for textural details, icons, or to provide a gentle contrast.
background
Utilize #383526 for a deep, atmospheric background in dark mode, or a very light cream/off-white for a brighter design.
text
For dark backgrounds, use light cream or off-white text. For lighter backgrounds, a dark brown like #383526 ensures optimal readability.
Create grounding elements, atmospheric dark mode themes, or rich, layered backgrounds.
#383526 · #4E4836 · #645B47Ideal for layered textures, natural illustrations, or to suggest subtle variations in light.
#91816A · #7A6E58 · #4E4836Use for subtle gradients, organic patterns, or to convey a soft, natural, and harmonious feel.
#7A6E58 · #645B47 · #91816A:root {
--sun-dappled-forest-floor-1: #91816A;
--sun-dappled-forest-floor-2: #7A6E58;
--sun-dappled-forest-floor-3: #645B47;
--sun-dappled-forest-floor-4: #4E4836;
--sun-dappled-forest-floor-5: #383526;
}theme: {
extend: {
colors: {
"sun-dappled-forest-floor": {
1: "#91816A",
2: "#7A6E58",
3: "#645B47",
4: "#4E4836",
5: "#383526",
}
}
}
}Palette colors
Accessibility
Similar palettes