Shades of Brown

What this tool does

Brown is the colour of earth, wood, coffee, and leather, warm and dependable in a way bright colours never quite are. It runs a long way, from a pale, sandy tan to a deep, near-black coffee, and a good brown palette usually needs several points along that line: a light tan surface, a mid brown, a dark brown for text.

That is what this does. You give it a brown, and it builds the whole run of that brown in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named browns and a genuinely odd fact about what brown actually is.

How to use it

1. Set your brown. The page opens on a brown with its Hex shown. Use Change Color or the Color Picker to choose another, or paste a hex in.
2. Pick how many shades. The Color Shades number sets the total, ten to start, and a higher value gives a finer gradient.
3. Copy the codes. Each shade lists its HEX, RGB, HSL, and HSV, ready to paste.

Brown is a warm, low-saturation colour, so its range stays earthy throughout. The lighter steps soften toward tan and beige, and the darker steps deepen into rich coffee and chocolate.

How it works

The tool runs on TinyColor, a colour library that adjusts a colour lighter and darker cleanly rather than just fading it. It takes your brown, walks it toward white on one side and black on the other, spaces the steps evenly, and writes each one out in the four code formats.

Brown gives a rich, usable range because it is really a dark, muted orange under the surface. The lighter steps reveal that warmth as they open up into tan and sand, while the darker steps close down into deep, woody browns, which together cover everything from a soft background to strong, dark text.

Brown is really dark orange

Here is the odd part: there is no brown in the rainbow. Brown is not a colour of light in its own right, it is simply a dark, dull orange. What makes that strange is that brown only appears as brown when there is brighter light around it. Take the exact same patch of light, remove the brighter surroundings, and it stops looking brown and starts looking orange or yellow. Brown, in other words, is orange in context.

There is a second surprise hiding in your stylesheet. The CSS colour named brown, #A52A2A, is not really a true brown at all, it is a fairly red red-brown. A more honest, traditional brown sits closer to #964B00, a clear dark orange. So if you write the word brown into your CSS expecting a warm, earthy tone and get something redder than you wanted, that is why.

The named browns, with hex codes

Brown spans a huge range of warm, low-saturation tones. Here are useful reference points, with a hex for each.

• Brown (#A52A2A): the CSS named brown, though it is noticeably redder than a true brown.
• Saddle Brown (#8B4513): a deep, classic leather brown.
• Sienna (#A0522D) and Peru (#CD853F): warm, earthy red-browns named after pigments and places.
• Chocolate (#D2691E): a rich, warm orange-brown.
• Tan (#D2B48C) and Burlywood (#DEB887): pale, soft, sandy browns.
• Sandy Brown (#F4A460): a light, warm, orange-leaning brown.

Many of these names come from real earth pigments, sienna and umber among them, which artists have used for centuries. That history is part of why browns read as so natural and authentic: they are, quite literally, the colours of soil and clay.

What brown says

Brown is the most grounded colour there is. It speaks of earth, wood, and nature, and so it reads as stable, reliable, honest, and warm, the colour of things that last. It carries the comfort of coffee, chocolate, and worn leather, which is why it suits anything that wants to feel natural, rugged, or dependable rather than flashy.

It has a humble streak too. Brown was the colour of monks' robes and the clothing of the poor, a sign of simplicity and modesty, and even now it can read as plain or old-fashioned if used carelessly. But that same earthiness has made it a favourite for organic, artisanal, and craft-led brands, where its honesty and warmth are exactly the point. Brown rarely shouts, and that is its strength.

Building a palette from your brown

Brown is a natural anchor, and it likes natural company. Use the steps from this tool as the spine of a palette: a deep brown for text and headers, your main brown for blocks, and a pale tan or beige surface behind content. Kept in one earthy family, it feels warm and cohesive.

For accents, brown sits beautifully with other organic tones, cream and beige for a soft neutral scheme, sage or olive green for something natural, and terracotta or rust for warmth. A muted blue makes a calm, earthy contrast, and a touch of gold adds richness. Because brown is quiet and warm, it carries large areas comfortably, so you have plenty of freedom to build around it.

Questions people ask

What is the hex code for brown?

The CSS named brown is #A52A2A, but it is fairly red. A truer, more traditional brown sits closer to #964B00. Brown is a named CSS colour, so you can write "brown" in your stylesheet, while a specific brown will have its own hex.

Is brown a real colour? It is not in the rainbow.

Brown has no single wavelength, so it does not appear in the rainbow. It is essentially a dark, dull orange, and it only looks brown when there is brighter light around it. The same light in isolation looks orange or yellow.

What does the colour brown mean?

Most strongly, earth, nature, and reliability. It reads as stable, warm, honest, and grounded, with the comfort of wood, coffee, and leather. It can also feel humble or plain, which is why it suits natural and artisanal designs.

Can I use my own brown?

Yes. Paste your exact brown in as the base, and the tool builds the lighter and darker steps of that colour, so you get a matching set for surfaces, text, and accents.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Brown, the dark-orange nature of the colour, pigments, and symbolism. Wikipedia. https://en.wikipedia.org/wiki/Brown