カラーコードとパレット
ブラウン系の色一覧
ブラウンはデジタルの配色に素材感のある温かさと安定感をもたらします。サンド、キャラメル、エスプレッソは、手触り感や伝統を感じさせるデザインでクリーム、グリーン、くすんだオレンジと自然になじみます。
ブラウン
#A16207
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | 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 · 大きなテキスト
ブラウンの使い方
食品・クラフト・老舗ブランド
ナチュラル製品のパッケージ
温かみのある背景と文字のアクセント
ブラウン と相性のよい色
#A16207 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。