NodlumeCanyon Trail
A warm, earthy palette that feels organic and rugged. Suited to outdoor brands, eco-friendly product lines, or boutique lifestyle sites. (brand)
- Mesa
- #8c4a32
- Sandstone
- #c97d60
- Desert Sky
- #eed7c5
As the eight interface roles
Earthy and natural color palettes with hex codes
An earthy color palette draws on the browns, ochres, olives, clays and sands of soil, wood and stone — warm, muted hues that read as organic and grounded.
Earth tones are muted oranges and yellows with a few muted greens: terracotta, ochre, sand, olive, moss, clay. They share warmth and low saturation, which is why a whole earthy set feels like one material, and they pair naturally with cream and near-black rather than pure white and black.
Sustainable, outdoor, food, craft and wellness brands lean on this family because it signals natural without saying so. In an interface the light sands make paper-like canvases, the mid clays make borders and secondary controls, and the darkest brown carries text.
7 earthy palettes below, each with its named colors, the eight roles the palette generator derives from them, and a link that opens the generator on that palette.
Desert Dunes
Warm, desaturated earth tones perfect for minimalist fashion, ceramics, or interior design brands. (boho & lifestyle)
- Deep Canyon
- #5c4033
- Terracotta
- #a65e44
- Sandstorm
- #d99a6c
- Dusty Peach
- #f2c1a2
- Oasis
- #8c9a84
As the eight interface roles
Earth Tones
Grounded, organic palette of clay, sage, and sand for brands focusing on nature and sustainability. (sustainable & eco)
- Soil
- #593d3b
- Clay
- #9b6a6c
- Sage
- #77876b
- Dried Leaves
- #a8b092
- Sand
- #d6cfc4
As the eight interface roles
Forest Walk
A lush, monotonic progression of greens from shadow to highlight. Great for organic products or nutrition-focused applications. (health & wellness)
- Shadow
- #142117
- Pine
- #214028
- Canopy
- #2f613a
- Fern
- #548c54
- Moss
- #88b87a
As the eight interface roles
Matcha Latte
Calming greens mixed with creamy neutrals, giving a grounding and comforting aesthetic. (coffee shop & organic)
- Roast Coffee
- #3b2f2f
- Deep Matcha
- #6b8e23
- Pale Leaf
- #a9c25d
- Oat Milk
- #ebe5d9
- Vanilla Cream
- #f3efe0
As the eight interface roles
Botanical Archive
Muted, sophisticated plant tones mixed with warm neutrals. Ideal for gardening apps or botanical editorial sites. (editorial & plant care)
- Soil
- #3e2723
- Bark
- #6d4c41
- Moss
- #7a9e7e
- Sage
- #a4c3a2
- Seed
- #dad7cd
- Petal
- #f2e9e4
As the eight interface roles
Autumn Leaves
Comforting, nostalgic, and warm — for seasonal promotions, craft goods, artisanal coffee shops, or cozy home-grown brands. (retail & seasonal)
- Barn Red
- #4a0d0d
- Brick
- #8e2800
- Pumpkin
- #d85a00
- Mustard
- #e89d00
- Maize
- #f0c808
As the eight interface roles
Using a earthy palette in an interface
Use the lightest sand as the canvas instead of white, the darkest brown as text instead of black, one olive or terracotta as the primary action, and keep status colors slightly desaturated so they sit in the same world as the brand. The semantic palette guide explains the eight roles, and the guide to choosing colors for an app walks through the order to decide them in.
- What is a earthy color palette?
- An earthy color palette draws on the browns, ochres, olives, clays and sands of soil, wood and stone — warm, muted hues that read as organic and grounded.
- What are some earthy color palette hex codes?
- Canyon Trail is one: Mesa #8c4a32, Sandstone #c97d60, Desert Sky #eed7c5. This page lists 7 earthy palettes with every hex code, and each opens in the palette generator as a full eight-role UI palette.
- How do I use a earthy color palette in an app or website?
- Use the lightest sand as the canvas instead of white, the darkest brown as text instead of black, one olive or terracotta as the primary action, and keep status colors slightly desaturated so they sit in the same world as the brand.
Make one of these your own
Every palette here is a starting point in the palette generator: open one, drag any anchor on the wheel or swap the primary for your brand color, and copy the CSS variables. The theme generator takes it the rest of the way to a Tailwind v4 stylesheet with dark mode.
Open the palette generator