Color code and palette
Shades of Brown
Brown brings material warmth and stability to digital palettes. Sand, caramel and espresso values work naturally with cream, green and muted orange in tactile or heritage-inspired systems.
Brown
#A16207
Color formats
The same base color in common web formats.
Shades
| Color | Name | HEX | RGB | HSL | Copy |
|---|---|---|---|---|---|
| Cream | #FFFBEB | 255, 251, 235 | 48, 100%, 96% | ||
| Vanilla | #FEF3C7 | 254, 243, 199 | 48, 96%, 89% | ||
| Beige | #FDE68A | 253, 230, 138 | 48, 97%, 77% | ||
| Sand | #FCD34D | 252, 211, 77 | 46, 97%, 65% | ||
| Tan | #FBBF24 | 251, 191, 36 | 43, 96%, 56% | ||
| Camel | #F59E0B | 245, 158, 11 | 38, 92%, 50% | ||
| Amber | #D97706 | 217, 119, 6 | 32, 95%, 44% | ||
| Bronze | #B45309 | 180, 83, 9 | 26, 90%, 37% | ||
| Brown | #92400E | 146, 64, 14 | 23, 83%, 31% | ||
| Dark Brown | #78350F | 120, 53, 15 | 22, 78%, 26% | ||
| Sepia Light | #FEF2F2 | 254, 242, 242 | 0, 86%, 97% | ||
| Blush Brown | #FEE2E2 | 254, 226, 226 | 0, 93%, 94% | ||
| Taupe Light | #FECACA | 254, 202, 202 | 0, 96%, 89% | ||
| Taupe | #FCA5A5 | 252, 165, 165 | 0, 94%, 82% | ||
| Cocoa | #F87171 | 248, 113, 113 | 0, 91%, 71% | ||
| Terracotta | #EF4444 | 239, 68, 68 | 0, 84%, 60% | ||
| Rust | #DC2626 | 220, 38, 38 | 0, 72%, 51% | ||
| Brick | #B91C1C | 185, 28, 28 | 0, 74%, 42% | ||
| Mahogany | #991B1B | 153, 27, 27 | 0, 70%, 35% | ||
| Espresso | #7F1D1D | 127, 29, 29 | 0, 63%, 31% |
CSS keyword: brown
In CSS you can write it as the keyword brown.
Text contrast
These ratios use the WCAG relative luminance formula.
Aa White text 4.92:1
AA
Aa Black text 4.27:1
AA · Large text
Ways to use Brown
Food, craft and heritage brands
Natural product packaging
Warm backgrounds and typography accents
Colors that go with Brown
Color-wheel harmonies built from #A16207. Click a swatch to copy it or open the set in the color wheel.
Split complementary
Open in color wheelA base plus the two neighbors of its complement — contrast with less tension.