Brown palettes and pairings
HEX
#964B00
RGB
150, 75, 0
HSL
30°, 100%, 29%
HSV
30°, 100%, 59%
Earth's default "solid" color — woodsmoke, soil, and dependable material without needing a metaphor. #964B00 anchors compositions the way a bass note anchors a song. It can feel rustic or corporate depending on texture and pairing.
Best for
SaaS dashboards, admin panels, and professional UI themes.
Accessibility
Brown text on white passes AA at 6.36:1, which makes it usable for headings and short labels.
How does brown compare to nearby colors?
What is the difference between brown and mahogany?
Brown (#964B00) and Mahogany (#C04000) are close enough that the split is more about finish than headline contrast: Brown feels more coffee, leather, and wood, while Mahogany reads more warm wood. Brown brings more shadow to the system, so it handles contrast-heavy jobs more naturally than Mahogany. Begin with brown when the family needs its current undertone and surface character; keep mahogany for the nearby alternative that shifts the mood without leaving the same hue neighborhood.
What color is brown?
Brown is one of the broadest everyday color words, covering everything from leather goods to coffee branding to outdoor gear. In print, brown ink and kraft paper signal craft, economy, or natural materials.
What is the hex code for brown?
| Format | Value |
|---|---|
| HEX | #964B00 |
| RGB | rgb(150, 75, 0) |
| HSL | hsl(30°, 100%, 29%) |
| HSV / HSB | hsv(30°, 100%, 59%) |
| CMYK (approx.) | cmyk(0%, 50%, 100%, 41%) |
Convert Brown to other color formats
Open the color converter with Brown (#964B00) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Brown in the color converter →What does brown mean in design?
Brown is often associated with stability, warmth, and straightforward honesty. Compared with tan it is deeper and more anchoring; compared with taupe or umber it is typically warmer and less gray.
How do I use brown in code?
| CSS (hex) | color: #964B00; |
| CSS (rgb) | color: rgb(150, 75, 0); |
| CSS (hsl) | color: hsl(30, 100%, 29%); |
| RGB % | rgb(59%, 29%, 0%) |
| Tailwind | text-[#964B00] |
| SwiftUI | Color(red: 0.588, green: 0.294, blue: 0.000) |
| UIKit | UIColor(red: 0.588, green: 0.294, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(150, 75, 0) |
| Compose | Color(0xFF964B00) |
| Web Safe | #993300 |
Is brown accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 6.36:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaBlack text on this color | 3.3:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on white | 6.36:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on black | 3.3:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does brown look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with brown
White helps brown stay legible in charts, labels, and UI states where a muddier light neutral would blur the edges.
Navy blue gives brown a cooler anchor that keeps the palette from turning too sepia or overly heritage-coded.
Cream takes the hard digital edge off brown and makes the color feel more printed, paper-backed, and approachable.
Charcoal gives brown a darker, quieter partner, which helps vivid accents look deliberate instead of loud for their own sake.
Sage Green gives brown a second note that is different enough to feel intentional but not so different that the palette loses coherence.
What colors clash with brown
Neon Green makes brown feel cheaper and less material, which is exactly the opposite of what these grounded colors usually contribute.
Magenta pushes brown toward a nightclub or cosmetic register that is hard to square with calmer editorial or product work.
Cyan redirects brown toward a more technical, backlit interpretation, which is risky when the goal is warmth, polish, or print-minded editorial work.
With brown, Pastel Pink often steers the system toward nursery or confectionery cues instead of the more grounded mood the source color supports.
How should I use brown in design?
- •Try brown as your primary dark value instead of black — it adds character and warmth while still providing strong contrast for readability.
- •Brown leans warm, so cool counterparts like navy, teal, or slate create the cleanest contrast. For a softer, tonal look, stay within neighboring warm hues and let value differences do the work.
- •Brown's high saturation makes it most effective in small doses — buttons, chart highlights, notification badges, and social media accents.
What are good brown palettes?
Clean slate
Brand guidelines, design systems, and visual identity documents.
Design with brown in Moda
Create a presentation or document using brown as your accent color. Moda's AI applies your color palette automatically.
Create a design with brown →What are the shades and tints of brown?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for brown?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Chocolate
Chocolate sits close to brown in hue, but its orange-warm cast changes the mood of the palette even when the contrast shift is small.
Sepia
Sepia is nearly adjacent to brown in hue; what separates them is intensity, with sepia reading dustier and easier to extend across a layout.
Mahogany
Mahogany is almost the same hue as brown; the real difference is value, with mahogany feeling more open and surface-friendly.
Mocha
Mocha is nearly adjacent to brown in hue; what separates them is intensity, with mocha reading dustier and easier to extend across a layout.
Burnt Orange
Burnt Orange stays very close to brown in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Frequently asked questions
What is the hex code for brown?
The hex code for brown is #964B00. In RGB, that's 150 red, 75 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 50% magenta, 100% yellow, and 41% key (black).
Is brown a warm or cool color?
Brown sits on the warm side of the palette, so it pairs easily with other warm tones and becomes more energetic when you place it against cooler blues or blue-grays.
Should brown lead the palette or stay in supporting roles?
Brown has enough chroma to take the lead, but it usually performs best when the surrounding system stays quieter. Treat it as the voice of emphasis, not the answer to every layout need.
Where does brown work best in a layout?
Brown has enough depth to anchor a layout while still reading as a color, which makes it useful for dark section blocks, headlines, and heavier accents.
Is brown accessible?
Brown can work as text on white at 6.36:1 contrast, but it is usually safest in headings, labels, and accent moments rather than long body copy.
More brown colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Brown colors
Compare brown with other brown tones.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Orange colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.