Shades of Brown: Hex, RGB, and HSL Codes

What counts as a shade of brown?

Brown is the family that does not exist on the spectrum: it is dark orange, and every shade below is a red-to-yellow hue with the lightness pulled down. That is why the list is so long — 22 entries covering everything from the near-white Beige #F5F5DC and Wheat #F5DEB3, through Tan #D2B48C, Camel #C19A6B, and Chocolate #D2691E, to Coffee #6F4E37, Taupe #483C32, and Espresso #4E3524.

The names cluster by source, which is a useful way to pick one. Food browns — Caramel #C68E17, Cinnamon #D27D2D, Mocha #967969 — sit in the warm, mid-light range. Earth and pigment browns — Ochre #CC7722, Sienna #A0522D, Umber #635147 — are the traditional artist's palette and skew more muted. And the darkest, Espresso and Taupe, function as warm alternatives to black, which is exactly what a palette needs when true black feels too harsh.

How to use these color codes

1. Find your shade. The list runs roughly light to dark, with a live preview beside every name — scan it the way you would a paint chart.
2. Click a code to copy. Each row carries the hex, RGB, and HSL value of that color. One click copies that exact string to your clipboard.
3. Paste it into your project. Drop the hex into CSS, Figma, Photoshop, or a document. Clicking the swatch itself copies the hex, so you can grab colors without aiming at the small text.

What brown communicates

Brown reads as grounded and durable. It is the color of wood, leather, soil, and coffee, so it carries reliability and craft in a way no engineered color does — the reason it dominates in furniture, outdoor gear, and anything positioning itself as made rather than manufactured.

It is also the least fashionable of the twelve, which cuts both ways. Brown rarely feels exciting and is the color most often rated least favorite in preference surveys, but that same unfashionability makes it read as honest and unhurried. Paired with cream and Beige it becomes the standard palette for artisanal food and organic packaging; used alone at full darkness it reads as heavy and old-fashioned.

Honest limitations

A hex code is exact, but the color you see is not. The same #FF0000 looks different on an OLED phone, a cheap office monitor, and a printed page, because each device has its own gamut and calibration. Treat these values as a precise starting point for screens, and always check a physical proof before committing a color to print — CMYK cannot reproduce every shade listed here.

Color names are a mix of two things. Entries badged CSS are official CSS named colors: the name itself works in a stylesheet and every browser resolves it to exactly that hex. The rest are conventional names — Burgundy, Sage, Espresso — that no standards body owns. Their hex values follow the most widely cited convention, but another chart may place them a few percent lighter or darker, so quote the hex rather than the name when the exact value matters.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. This page is a static list of color values rendered in your browser — nothing to install, no account, no premium tier holding back the darker half of the palette. Copy as many codes as you need, as often as you need.

Other color families

redorangeyellowgreencyanbluepurplepinkgrayblackwhiteAll color families