Brown is made by mixing red, yellow, and black in different amounts
Brown doesn't exist as a primary color — you build it by combining other colors. The exact shade depends on what medium you're working in: digital screens use light (RGB), while print uses pigment (CMYK). The basic formula is the same either way: start with red and yellow to make orange, then add black or blue to darken and desaturate it until it reads as brown rather than orange.
The reason brown is tricky is that it's really just dark orange. Your eye perceives it as brown only when it's surrounded by lighter colors. Put the same shade next to pure black and it looks orange; put it next to white and it looks brown. This is why the same hex code can look different depending on what's around it on the page.
Key Takeaways
- In RGB (screens), mix red and green light to make yellow, then add less blue to create brown tones.
- In CMYK (print), combine magenta and yellow ink, then add black to reach brown without it looking muddy.
- Brown is essentially dark orange, so start by making orange, then darken it with black or reduce its brightness.
- The hex codes for common browns range from #8B4513 (saddle brown) to #A0522D (sienna) to #654321 (darker chocolate tones).
- Brown looks different depending on the colors next to it, so test your shade against the actual background it will sit on.
Creating brown in RGB (for screens and digital design)
RGB stands for red, green, and blue — the three colors of light that screens use to display everything you see. Each color channel runs from 0 to 255. To make brown on a screen, you need high red, medium-to-high green, and low blue.
A straightforward brown uses something like RGB(139, 69, 19) — that's saddle brown. The red is high (139), the green is roughly half that (69), and the blue is very low (19). If you want a warmer, more reddish brown, increase the red and keep green lower. If you want a cooler, more grayish brown, bring the green and blue closer together while keeping them both lower than the red.
Most design tools let you enter these numbers directly, or you can use the hex code shorthand: #8B4513 for saddle brown, #A0522D for sienna, #8B6914 for a more olive-brown. Hex codes compress the RGB values into six digits (two for each channel, in hexadecimal). If you're working in a tool that shows a color picker, you can also just drag the sliders until the preview looks brown to you.
Creating brown in CMYK (for print)
CMYK stands for cyan, magenta, yellow, and black — the four inks used in color printing. The percentages work differently than RGB because you're subtracting light (ink blocks light) rather than adding it. A typical brown in CMYK is around 0% cyan, 50% magenta, 100% yellow, and 50% black.
The magenta and yellow combination is what gives you the red-orange base. The black is what darkens it into brown territory. If you add too much black, the brown becomes muddy and loses warmth. If you don't add enough black, it stays orange. Start with 100% yellow and 50% magenta, then adjust the black percentage up or down until it matches the brown you want.
If you're sending a design to a printer, they'll usually handle the RGB-to-CMYK conversion automatically. But if you're designing in a print-focused tool like Adobe InDesign, you can set your color mode to CMYK from the start and work directly in those percentages. This matters because a brown that looks perfect on your screen might print slightly different if the conversion isn't done carefully.
Why brown is harder to see than other colors
Brown occupies a weird spot in color theory. It's not a hue that appears in the visible light spectrum the way red, green, or blue does. Instead, your brain interprets dark orange as brown based on context. This is why the same RGB or CMYK values can look orange in one design and brown in another.
Surrounding colors matter enormously. A shade on a white background reads as brown. The same shade on a black background reads as orange. This is called simultaneous contrast — your eye judges a color partly by what's next to it. When you're designing with brown, always check it against the actual background colors it will appear on, not just on a neutral gray.
Common brown shades and their codes
Here are browns you'll see named in design tools, with their hex codes and approximate RGB values:
| Brown Name | Hex Code | RGB Values | Feel |
|---|---|---|---|
| Saddle Brown | #8B4513 | RGB(139, 69, 19) | Warm, reddish, classic |
| Sienna | #A0522D | RGB(160, 82, 45) | Warm, earthy, lighter |
| Chocolate | #D2691E | RGB(210, 105, 30) | Warm, medium, approachable |
| Dark Goldenrod | #B8860B | RGB(184, 134, 11) | Yellowish, muted gold |
| Maroon | #800000 | RGB(128, 0, 0) | Dark, cool, burgundy-leaning |
These are just starting points. You can adjust any of them by tweaking the RGB values slightly. If you want a lighter brown, increase all three RGB numbers equally. If you want a darker brown, decrease them. If you want it warmer, increase red slightly and decrease blue. If you want it cooler, increase blue and decrease red.
Testing your brown before you use it
Once you've picked a brown, view it in context before committing. If you're designing a website, open it on multiple screens — laptop, phone, tablet. Screens vary in how they display color, and a brown that looks right on one device might look too orange or too gray on another. If you're designing for print, ask your printer for a color proof or sample sheet so you can see how the brown actually prints on the paper stock you're using.
Also check how your brown looks next to the other colors in your design. Brown pairs well with cream, tan, white, and muted greens. It can clash with bright primary colors or neon shades. If your design includes text in brown, make sure it has enough contrast against the background so it's readable — a light brown on a light background will be hard to read, even if it looks aesthetically pleasing.
Frequently Asked Questions
What's the difference between brown and maroon?
Maroon is a dark reddish-brown with much less yellow in it. In RGB terms, maroon is something like (128, 0, 0) — high red, almost no green, almost no blue. Brown has more green in the mix, which gives it that orange undertone. Maroon looks cooler and more burgundy; brown looks warmer and earthier.
Can I make brown by mixing just red and black?
You can make a dark reddish color that way, but it won't read as brown — it will look like dark red or maroon. True brown needs yellow or green in the mix to shift the hue away from pure red. That's what makes it look brown instead of just dark.
Why does my brown look different on my phone than on my computer?
Screens have different color profiles and brightness settings. A phone screen might be brighter or have a warmer color temperature than a laptop. The same hex code displays slightly differently on each device. This is normal and not a mistake — it's why designers test on multiple devices before finalizing colors.
What brown should I use for text?
Saddle brown (#8B4513) or chocolate (#D2691E) work well for body text on light backgrounds because they have enough contrast to stay readable. Avoid very light browns like tan for text — they don't have enough contrast against white or cream backgrounds. Always check the contrast ratio if accessibility matters for your project.
Is there a brown that works in both RGB and CMYK?
Most browns convert reasonably well between the two, but there will always be some shift because RGB and CMYK have different color ranges. A brown that looks perfect on screen might print slightly warmer or cooler. If you need the color to match exactly, work with your printer to create a custom color swatch before printing the full job.