Why are none of the colours vivid?

Chroma is capped at about 0.14, which is deliberately low. Muted saturation is what separates an earth tone from a bright orange or a pure yellow.

Is the palette different every time?

Only in saturation. The five hues and the lightness ladder are computed from fixed bands, so Regenerate gives the same structure with slightly different chroma rather than an entirely new set.

Can I make the palette greener or greyer?

Not from the interface — the hue and chroma bands are fixed. The result is always a warm palette spanning roughly the ten to eighty degree arc of the wheel.

How do the five colours relate to each other?

They form a lightness ladder from about thirty-five to sixty-five percent, evenly spaced. The darkest reads as terracotta, the lightest as straw, and the middle three fill the range between.

What does the earth tone color generator not do?

There is no contrast checking and no light or dark variant. As a source of earth tone colors to design against, though, it removes the hardest part of building a muted warm color palette — knowing which combinations of hue, lightness and low saturation actually hold together as brown and ochre — and it hands you the sy

Earth Tone Color Generator

CSS

You Might Also Need

Earth Tone Palette Generator

Generate warm earth-tone palettes

Warm Color Generator

Generate warm-tone colors

Muted Color Generator

Generate muted, low-saturation colors

Cool Color Generator

Generate cool-tone colors

The earth tone color generator produces a five-color palette from the warm part of the color wheel — terracottas, ochres and olive greens at low saturation — with every swatch written out as a CSS custom property.

What is Earth Tone Color Generator?

The earth tone color generator returns five swatches at a time with their hex values, plus a CSS panel listing them as numbered custom properties that can be copied in one go. A single Regenerate button produces a new set. There are no other controls, because the point of the tool is a specific band of colour rather than a configurable one.

That band is defined by two constraints.
The hues all fall between roughly ten and eighty degrees on the wheel, which is the arc running from a warm red-orange through terracotta and ochre to a yellowed olive; nothing in this palette is cool.
And chroma is held between about 0.06 and 0.14, which is low enough that no swatch reads as vivid.
Those two together are what make a colour earthly rather than merely brown: the warmth supplies the clay and pigment character, while the limited saturation keeps the result looking like a material sample rather than a paint chip.

Lightness is the third variable and it is a ladder rather than a random draw. The five swatches climb from roughly thirty-five to sixty-five percent in even steps, so the set always contains a deep terracotta at one end and a lighter straw tone at the other, with three intermediate values between them. That even spread is what makes the palette usable without adjustment — there is a dark enough value for text or a border and a light enough one for a surface, and the middle values fill the roles in between. It also means the output is a gradient in all but name, so the swatches sit together naturally.

What Regenerate actually re-rolls is only the chroma. The hues of the five positions and their lightness ladder are computed rather than random, so each press keeps the same overall structure — the same warm-to-olive progression at the same tonal spacing — and shifts only how saturated each swatch is. That behaviour is worth knowing, because it makes regeneration predictable: you are choosing a saturation level for the set rather than gambling on a new palette, and a set you like can be nudged without losing what you liked about it.

The workflow is to regenerate until the palette feels dry enough or rich enough for the material you have in mind, then copy the CSS block. A brown and ochre palette of this kind is best read as a ladder rather than a set of equal colours: since the properties are numbered by position, mapping them onto real tokens is a matter of walking from the darker end, which suits text, borders and shadowed surfaces, up to the lighter end, which suits page backgrounds and highlight fills. Fewer decisions are needed than building an earth tone palette from scratch, because the tonal spacing is already even. Renaming the numbered properties to something semantic is the one manual step, and it is the same step every generated palette needs.

Being straight about the limits: this is a fixed band, not a configurable one, so there is no way to push the palette greener or paler than the ranges allow, and ten degrees of overlap at the cool end means you cannot get a genuinely neutral grey.
There is no contrast checking and no light or dark variant.
As a source of earth tone colors to design against, though, it removes the hardest part of building a muted warm color palette — knowing which combinations of hue, lightness and low saturation actually hold together as brown and ochre — and it hands you the syntax already written.

How to use Earth Tone Color Generator

Press the generate button for a fresh five-colour set drawn from the earth preset.
Press again to reroll within the same hue, lightness and chroma bands.
Copy the hex values you want to keep before the next roll.

When to use Earth Tone Color Generator vs related tools

Use this when a project needs a warm, muted, natural-material direction — craft, food, ceramics, outdoors, editorial — and you want a five-colour set with usable tonal spread. Use the desert or forest themed generators when the reference is a specific landscape rather than materials. For the neighbouring steps, see the daily color generator and the color of the year browser.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.