Color guide · Earth & brown colors

Brown Color

CSS brown is a red-brown, rather than a universal wood or soil color. It can support a warm material palette, especially when paired with tan highlights and a dark outline. Share the hex code when the exact digital shade matters.

A red-leaning brown with a strong midtone#A52A2ACSS keyword: brown

Brown color codes

HEX#A52A2A
RGBrgb(165, 42, 42)
HSLhsl(0, 59.4%, 40.6%)
CSS keywordbrown

RGB values use the 0–255 scale. HSL values are rounded to one decimal place for display. CSS Color: named colors ↗

The name & the reference

What makes brown interesting?

The keyword brown is fixed at #A52A2A in CSS. Material references such as bark, leather or clay can lean yellow, orange, red or gray. A convincing illustration separates those surfaces using texture and value, rather than filling every earthy object with one named brown.

Read the reference: CSS Color: named colors ↗

Things with brown tones

These illustrated references explore a color family. Objects vary; none is a claim of an exact #A52A2A match.

Illustrated placeholder · image coming later

Bark-inspired forms

Bark needs lighter ridges, dark cracks and a shape that describes the tree.

Illustrated placeholder · image coming later

Leather-colored fabric

A red-brown material reference can be balanced by tan stitching or light surroundings.

Illustrated placeholder · image coming later

Earthy pottery

A warm ceramic surface can pair with cream and muted green.

Ideas for using brown

01

Interfaces

Use brown as a warm accent rather than a replacement for every dark text color.

02

Games

Build wood from a base brown, tan highlights and a deep shadow; vary grain direction with the object shape.

03

Packaging

Start with the actual product reference and check print proofs when matching materials.

Watch out: Brown and red can compete when their values are close. Make their roles distinct.

Tints, shades & companion hues

These tints and shades are simple sRGB channel mixes with white or black. They are useful starting points, not perceptually equal steps or guaranteed accessible pairs. Select a swatch to copy its hex code.

Hue companions

Calculated in HSL with the same saturation and lightness. Complementary and analogous colors suggest hue relationships; they do not promise contrast.

Palettes featuring brown

Earthwork

Warm browns with an explicit dark outline

Explore palette →

See the palette at work

Palette preview studio

Compare two colors →

Try a website, a game scene, a poster or a room. Pick a role, then select a swatch to repaint it. These are schematic design previews, not rendered materials or a game engine.

Text is automatically chosen as black or white for opaque preview surfaces. This does not certify your exported palette for every use.

Color & craftStories · Studio
A thoughtful starting point

Make something worth exploring.

A clear reading surface, one useful accent and room for the details.

Explore the collection →
Design notesNew ideasSmall details

Try it in context

Live design & contrast preview

Change the surface and text independently. The text result uses opaque sRGB colors; it does not evaluate your entire page.

7.08:1 · AAA normal text

AA normal text needs 4.5:1; AA large text needs 3:1. Large text means at least 18 pt, or 14 pt bold. Ratios are assessed before rounding. This is a text check, not a complete accessibility audit. W3C: understanding text contrast ↗

A little color goes a long way

Your next good idea

Try a readable heading, a short paragraph and a clear action on this surface.

Example action →Static design sample · use the controls to change it

Compare brown with another color →

Questions about brown

Is CSS brown the same as CSS chocolate?

No. Brown is a darker red-brown; chocolate is a lighter orange-brown.

Will this look the same in print?

No exact print match is promised. Paper, ink, color profiles and lighting affect the result. Use a physical proof when a precise material match matters.

Can I use these codes in a website or game?

Yes. Copy the exact code, give it a clear role in your palette and test text contrast. Add labels or shapes when color communicates important information.

Keep exploring

Explore earth & brown colors →

#D2691E
Earth & brown colors

Chocolate

A warm orange-brown, lighter than a chocolate bar

Explore color →
#FFFFF0
Light & dark neutrals

Ivory

A near-white with a small warm shift

Explore color →
#36454F
Light & dark neutrals

Charcoal

A dark blue-gray for text and structure

Explore color →

A color name is a starting point

Digital codes describe sRGB colors. Natural objects, paint, ink and screens can look different under different lighting or calibration. Visual references illustrate color families rather than exact measured matches. Placeholder illustrations are clearly labeled. Design ideas are suggestions, not universal claims about emotion or culture.

Pick colors from an image · Convert a color · Check a complete text pair · Suggest a color guide