颜色代码与配色
棕色色值与色阶
棕色为数字配色带来材质感、温暖与稳定。沙色、焦糖色和浓缩咖啡色可自然搭配奶油色、绿色和低饱和橙色。
棕色
#A16207
颜色格式
同一基础色在常用网页格式中的表示。
色阶
| 颜色 | 名称 | HEX | RGB | HSL | 复制 |
|---|---|---|---|---|---|
| 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 关键字: brown
在 CSS 中可以直接写作关键字 brown。
文字对比度
以下比值基于 WCAG 相对亮度公式。
Aa 白色文字 4.92:1
AA
Aa 黑色文字 4.27:1
AA · 大号文字
棕色的使用场景
食品、工艺与传统品牌
天然产品包装
暖色背景和文字强调