What Colors Make Brown? Mixing Brown in Paint, RGB & CSS

Brown is everywhere — wood, coffee, leather, soil, chocolate — yet it is missing from the color wheel and from most boxes of paint. So what colors make brown? The short answer is that brown is just a dark, muted orange, which means you can mix it from the three primaries, from any complementary pair, or build it directly in RGB and CSS hex for a screen. This guide covers both worlds: how to mix brown paint, and how brown actually works in pixels.

The short answer: how to make brown

Brown does not get its own slot on the color wheel because it is not a separate hue — it is orange with the lightness turned down, usually with some of the saturation removed too. Once you see brown as "dark orange," every recipe falls out of that one idea.

You're working in	Make brown by
Paint / pigment	Mixing red + yellow + blue, or orange + a little blue
Any medium	Mixing two complementary colors (blue + orange, red + green, yellow + purple)
Screen / RGB	High red, medium green, low blue — e.g. rgb(139, 69, 19)
CSS hex	A dark, desaturated orange — e.g. #8B4513 (saddle brown)

The reason paint and screens need different recipes is that they mix light in opposite directions, which we will get to. First, the two classic paint methods.

From the three primaries (red + yellow + blue)

The most reliable way to mix brown paint is to start from the three subtractive primaries and combine them in unequal amounts. Do it in two steps so you stay in control:

1. Red + yellow → orange. Roughly equal parts gives a clean orange; more red leans it toward red-orange, more yellow toward amber.
2. Orange + a little blue → brown. Blue is orange's complement, so adding a small amount knocks the brightness and saturation out of the orange and pulls it down into brown. Add blue a touch at a time — a little goes a long way, and too much tips you into a cold gray.

You can also mix all three primaries at once, but the staged approach makes it obvious how to steer the result. The ratio sets the flavor of brown:

Lean the mix toward	You get
More red	A warm, reddish brown (chestnut, mahogany)
More yellow	A light, golden brown (ochre, tan, caramel)
More blue	A cooler, darker brown (coffee, espresso)

Because mixing pigments removes light (more on that below), it is hard to mix a light brown this way — the blend keeps getting darker. To lighten it, add white once you have the hue you want.

From complementary pairs (blue + orange, red + green, yellow + purple)

Here is the trick the paint-only tutorials rarely explain: any two complementary colors make brown. Complements sit opposite each other on the wheel, so when you mix them they cancel each other's saturation and collapse toward a dark, neutral middle. Lean that neutral even slightly warm and it reads as brown rather than gray.

Complementary pair	Why it browns
Blue + orange	Orange is the warm base; blue neutralizes and darkens it
Red + green	Red's warmth dominates the muddy neutral
Yellow + purple	Yellow's warmth survives the cancellation

This is the secret to mixing brown without black — you never reach for a dark pigment, you just let two opposites mute each other. It is also why a painter's "mud" (the result of over-mixing a busy palette) is almost always brownish: complements keep meeting and neutralizing. The same wheel relationship powers harmonies on the bright side, which the complementary colors guide walks through; to find the exact opposite of any starting color, drop it into the complementary color finder.

Adjusting brown (warmer, cooler, lighter, darker)

Once you have a base brown, four small moves cover almost every adjustment. The physical-paint move and the digital (HSL) move are two sides of the same coin:

Goal	In paint	In code (HSL)
Warmer	Add red or orange	Lower the hue toward 15–20°
Cooler	Add a touch of blue	Raise the hue toward 35–40°, drop saturation
Lighter	Add white	Raise the lightness
Darker	Add black, blue, or burnt umber	Lower the lightness

Lightening is where the two worlds diverge most. Add enough white to brown and you climb a recognizable ladder — brown to caramel to tan to beige — each step a higher-lightness version of the same warm hue. In CSS that is one number:

:root {
  --brown:       hsl(25, 76%, 31%);  /* #8B4513 base */
  --brown-warm:  hsl(15, 60%, 31%);  /* redder  -> #7E3720 */
  --brown-cool:  hsl(38, 45%, 35%);  /* yellower -> #816431 */
  --brown-dark:  hsl(25, 76%, 18%);  /* espresso -> #51280B */
  --brown-light: hsl(30, 45%, 65%);  /* tan      -> #CEA67E */
}

Paint vs pixels: why mixing differs on screen (subtractive vs additive)

If you have ever tried to "mix" brown on a screen the way you would on a palette, you have hit the core difference between the two media: they combine color in opposite directions.

Paint is subtractive. Pigments work by absorbing (subtracting) wavelengths of light and reflecting the rest. Every pigment you add removes more light, so mixtures get darker and duller. Pile red, yellow and blue together and they absorb across the whole spectrum — the result trends toward a dark, muddy brown, then black. Brown is easy to mix with paint precisely because subtractive mixing naturally heads toward dark, neutral warmth.

Screens are additive. Pixels emit red, green and blue light, and combining light makes things brighter, not darker. Add all three at full strength and you get white. Crucially, red light + green light = yellow, not brown — there is no amount of full-intensity light-adding that produces brown, because brown is defined by being dark, and adding light only goes the other way.

So you do not mix brown on screen by adding bright primaries. You make it by specifying a color that is already a dark, low-saturation orange: keep red highest, green in the middle, blue low, and the overall brightness down. Brown only exists on a monitor as a dim orange surrounded by brighter context — which is exactly what the next section builds.

Making brown in RGB & CSS hex (with values)

For the web, the rule of thumb is simple: red highest, green about half of red, blue lowest, total brightness kept moderate. Saddle brown, rgb(139, 69, 19), fits the pattern exactly — green (69) is roughly half of red (139), and blue (19) is a small fraction of both.

The cleanest way to see that brown is dark orange is to take orange and dim it. Pure orange is #FF8000 — rgb(255, 128, 0). Halve every channel and you get #804000, an unmistakable brown:

.orange { background: rgb(255, 128, 0); } /* #FF8000 — bright orange */
.brown  { background: rgb(128, 64, 0);  } /* #804000 — same hue, dimmed */

In HSL the move is even more direct — keep the hue and saturation, lower the lightness:

.orange { background: hsl(30, 100%, 50%); } /* #FF8000 */
.brown  { background: hsl(30, 100%, 25%); } /* #804000 — half the lightness */

If you would rather sample a brown from a photo of wood or coffee than build one by hand, use the color picker to lift the exact value, then run it through the color format converter to get the hex, RGB, HSL and OKLCH forms side by side. Both make it easy to confirm a candidate brown really is "low-lightness orange" under the hood.

Common brown hex codes & names

These are the browns you will reach for most on the web, all verified values. Notice every one is a warm hue (roughly 15–35° on the wheel) at low-to-mid lightness — the signature of brown.

Name	Hex	RGB	HSL
Saddle Brown	#8B4513	rgb(139, 69, 19)	hsl(25, 76%, 31%)
Brown (CSS keyword)	#A52A2A	rgb(165, 42, 42)	hsl(0, 59%, 41%)
Sienna	#A0522D	rgb(160, 82, 45)	hsl(19, 56%, 40%)
Chocolate	#D2691E	rgb(210, 105, 30)	hsl(25, 75%, 47%)
Coffee	#6F4E37	rgb(111, 78, 55)	hsl(25, 34%, 33%)
Peru	#CD853F	rgb(205, 133, 63)	hsl(30, 59%, 53%)
Tan	#D2B48C	rgb(210, 180, 140)	hsl(34, 44%, 69%)
Burnt Umber	#6E2C00	rgb(110, 44, 0)	hsl(24, 100%, 22%)

For the full range of tones, shades and tints — plus the color's meaning and pairings — see the brown color page. Its two parent hues each have their own pages worth a look: orange, which brown is a darkened version of, and red, which warms brown toward chestnut and mahogany.

Palettes that use brown well (2026 neo earth tones)

Brown spent years stereotyped as dated, but it is back as the anchor of the neo earth tone palettes dominating 2026 — warm, grounded, slightly desaturated schemes that feel natural without looking rustic. The move is to treat a rich brown as a neutral (in place of black or pure gray) and surround it with soft creams, muted greens and a single clay or terracotta accent.

A practical neo-earth set:

Role	Color	Hex
Anchor (text / headers)	Espresso brown	#4A4036
Primary brown	Saddle brown	#8B4513
Warm neutral background	Cream	#F5F0E8
Soft accent	Clay / terracotta	#D9A88A
Cool balance	Sage green	#7C9070

Brown pairs especially well with its wheel neighbors and near-complements: sage and olive greens read calm against it, cream and beige give it room to breathe, and a touch of teal or dusty blue (orange's complement) makes it pop without shouting. To build a full ramp around any of these, feed a base brown into the color palette generator and let it derive the supporting tints and shades; the color schemes explained guide shows which harmony rule fits the mood you are after. And because brown carries strong associations — earthiness, warmth, reliability, craft — it is worth checking those signals against your brand using the color psychology guide before you commit.

Frequently asked questions

What two colors make brown?

The simplest two-color recipe is orange plus a touch of blue: orange supplies the warm red-yellow base and blue darkens and neutralizes it into brown. Any complementary pair works the same way, such as red and green or yellow and purple.

What colors make brown without black?

Mix a color with its complement: blue and orange, red and green, or yellow and purple. Each pair cancels toward a dark, muted brown with no black at all, and whichever color you favor sets the brown's temperature.

How do you make brown in RGB?

Use a high red value, a medium green value, and a low blue value, all kept fairly dark. For example rgb(139, 69, 19) is saddle brown. On screen, brown is essentially a dimmed, desaturated orange.

How do you make a darker or lighter brown?

To darken brown, lower its lightness or add a little black or blue; in code, drop the HSL lightness value. To lighten it, add white or raise the lightness, which gives tan, caramel and beige tones.

What complementary colors make brown?

Any complementary pair makes brown because complements neutralize each other into a dark, warm near-gray: blue and orange, red and green, or yellow and purple. Favor the warmer half of the pair to keep the result clearly brown.