Named color category

Brown Colors

Brown colors are low-lightness warm hues that read earthy, practical, and material.

Indexed brown hex colors

A reference grid selected from Hexpedia CSS, xkcd, Material, Tailwind, and generated static color datasets.

Light Brown

Saddle Brown#8B4513 Reference #804000#804000 Tailwind Amber 800#92400E Tailwind Yellow 800#854D0E Tailwind Amber 900#78350F Sienna#A0522D Warm Brown#964E02 Reference #804020#804020 Sienna#A9561E Burnt Umber#A0450E Sepia#985E2B Rust Brown#8B3103

Dark Brown

Saddle Brown#8B4513 Reference #804000#804000 Tailwind Amber 800#92400E Tailwind Yellow 800#854D0E Tailwind Amber 900#78350F Warm Brown#964E02 Reference #804020#804020 Burnt Umber#A0450E Rust Brown#8B3103 Milk Chocolate#7F4E1E Tailwind Yellow 900#713F12 Chestnut#742802

Muted Brown

Cocoa#875F42 Reference #806040#806040 Mocha#9D7651 Brownish#9C6D57 Dirt#8A6E45 Dull Brown#876E4B Dark Taupe#7F684E Greyish Brown#7A6A4F Grey Brown#7F7053 Brownish Grey#86775F Reference Umber#635147 Tailwind Stone 600#57534E

Vibrant Brown

Saddle Brown#8B4513 Reference #804000#804000 Tailwind Amber 800#92400E Tailwind Yellow 800#854D0E Tailwind Amber 900#78350F Warm Brown#964E02 Sienna#A9561E Burnt Umber#A0450E Rust Brown#8B3103 Tailwind Yellow 900#713F12 Reference #A06020#A06020 Chestnut#742802

How designers use brown

Brown colors are most useful when they are treated as a family rather than a single swatch. Start with the central values for accents, then use lighter versions for surfaces and darker versions for text, borders, or active states. In product interfaces, brown can guide attention, but it should not carry meaning alone; pair it with labels, spacing, and predictable hierarchy. For editorial pages, this family can create a recognizable mood while still leaving room for neutral backgrounds. Always test contrast before using any brown value behind body text, because perceived brightness can shift quickly across adjacent hues.

Combinations with brown

Palette pages use Brown as the nearest stable anchor for this color family.

Amber + Brown#FFBF00#8B4513 Beige + Brown#F5F5DC#8B4513 Black + Brown#000000#8B4513 Blue + Brown#0000FF#8B4513 Brown + Cyan#8B4513#00FFFF Brown + Gold#8B4513#FFD700 Brown + Gray#8B4513#808080 Brown + Green#8B4513#008000

Build with brown in CSS Forge

Move from reference values into practical CSS experiments with pre-filled generator links.

Build a brown gradient Tint a shadow