おしゃれなブラウン系カラーパレット21選｜HEXコード付き配色見本

ブラウンは最も多用途なデザインのニュートラルカラーの1つです。深みやクリーミーさによって、居心地よく素朴にも、モダンでミニマルにも、プレミアムでエディトリアルな印象にもなります。

以下はHEXコード付きの20種類以上のブラウンカラーパレットアイデア、組み合わせのコツ、そしてマッチするビジュアルを素早く生成できるAI向けプロンプトです。

ブラウンパレットがうまく機能する理由

ブラウンは、木、革、土、石など、私たちが自然界でよく目にするものの近くに位置しているので、親しみや信頼感を与えます。そのため、温かさが必要だけど派手すぎないブランド作りの強い基盤となります。

また、バリューの面でも高い柔軟性があります。エスプレッソのようなダークブラウンはブラックの代用としてタイポグラフィを柔らかく仕上げ、タンやクリームはリッチで意図的な雰囲気を保ちながら呼吸できるような背景になります。

そしてブラウンはウォーム系・クール系のアクセントどちらとも相性が良いです。くすみグリーン、ダスティローズ、オフホワイトなどを合わせることで雰囲気をがらりと変えつつ、パレット全体はバランスよく保てます。

20種類以上のブラウンカラーパレットアイデア（HEXコード付き）

1) ココアキャビン

HEX： #3B2418 #6B3F2A #A6754C #D8C2A4 #F3E9DC

雰囲気： 居心地よい、素朴、暖炉のそば

おすすめ用途： キャビンレンタルのブランディングやランディングページ

居心地よく暖炉のような色合いで、シダーの壁やウールブランケット、ホットココアを思わせます。濃いココアカラーを基準に、タンとクリームで余白を広くとって可読性を保ちます。シンプルなセリフ体の見出しと温かいライフスタイル写真を合わせてプレミアム感を演出しましょう。ポイント：最もダークな色はボタンやCTAに使い、パレット全体の軽やかさを保ちましょう。

media.ioを使って生成したココアキャビンの画像例

Media.io

Media.ioは、ブラウザ上で動画、画像、音声の生成・編集ができるオンラインAIスタジオです。

今すぐ無料で試す

2) トフィーラテ

HEX： #4A2E22 #7A4B34 #B07A52 #E3C6A7 #FFF3E7

雰囲気： 温かみ、クリーミー、親しみやすい

おすすめ用途： カフェのメニューやポイントカード

温かくクリーミーなこの配色は、エスプレッソのクレマ、トフィーソース、スチームミルクの泡を連想させます。コントラストが重要な印刷メニューにも最適ですが、真っ黒では強すぎる場合にぴったり。オフホワイトのペーパー調と濃いアクセントを値段や見出しに使いましょう。ポイント：本文テキストは一番濃い色で、タン×クリームの低コントラストを避けて。

media.ioを使って生成したトフィーラテの画像例

3) ウォルナットセージ

HEX： #2F1F18 #5B3A2A #8D6B4A #A7B08A #F2EFE8

雰囲気： 落ち着き、自然体、穏やか

おすすめ用途： ウェルネスブランドのアイデンティティやラベル

大地に根差した自然体なこの配色は、クルミの殻やドライハーブ、リネンの布を感じさせます。くすんだセージ色がアース系ブラウンを和らげて、アイコンやコールアウトのさりげないアクセントに。ミニマルなレイアウトやマット系のパッケージでモダン＆リラックスした雰囲気へ。ポイント：セージはハイライトにのみ使い、グリーン感が強くなりすぎないよう注意。

media.ioを使って生成したウォルナットセージの画像例

4) セピアスタジオ

HEX： #2C1B14 #5A3D33 #8A6A5A #C8B2A3 #F6F1EC

雰囲気： ヴィンテージ感、エディトリアル、洗練

おすすめ用途： 雑誌レイアウトやフォトエッセイ

ヴィンテージでエディトリアルな雰囲気。セピア調の色味が暗室プリントやクラシックな紙質を思わせます。ミドルブラウンはキャプションや引用文に、淡いペーパー色はページの主役に使います。モノクロ写真やウォームフィルター写真で統一感を。ポイント：グリッドは広めにとり、重くならず洗練された印象に。

media.ioを使って生成したセピアスタジオの画像例

5) デザートデューン

HEX： #3A261A #6A4A34 #A07B58 #D6C1A6 #EEE3D3

雰囲気： 日差しを浴びた、空気感、冒険的

おすすめ用途： 旅行ポスターやアウトドア系キャンペーン

日差しを浴びた砂漠のようなニュートラルカラーです。タンやサンド色は大胆なタイポグラフィやシンプルな地図グラフィックの背景に最適。ミニマルなラインイラストと十分な余白でモダンな印象に。ポイント：テクスチャは少しだけ加え、小さなサイズでもシャープさを保ちましょう。

media.ioを使って生成したデザートデューンの画像例

6) モカミニマル

HEX： #1F1410 #4A2F24 #7B5645 #BFA79A #F7F3F0

雰囲気： 洗練、モダン、親密感

おすすめ用途： ポートフォリオサイトやUXケーススタディ

洗練され親密感あるこのパレットは、静かなカフェバーや柔らかい照明、クリーンなテーブル面を思わせます。UIのブラウンカラーにはエスプレッソ近いブラックをナビやテキストに、ダスティトープはカードや区切り線に。ニュートラルなグレースケール写真やウォーム系商品写真を合わせると色のぶつかりを防げます。ポイント：インタラクティブステートは、1段階だけ明度を調整してさりげなく演出。

media.ioを使って生成したモカミニマルの画像例

7) キャラメルクレイ

HEX： #40261B #7A4A33 #C07A4B #E6B98E #FFF1E2

雰囲気： 手作り感、温もり、職人技

おすすめ用途： 陶芸ショップのブランディングやパッケージ

手作りの温かみを持つこの色合いは、窯で焼かれたクレイやキャラメルの釉薬、滑らかなクリームを思わせます。明るいキャラメル色はシールやアイコンなどのアクセントにおすすめ。クラフト紙や未加工紙など素材感を活かして職人らしさを強調しましょう。ポイント：ライトクリームを背景に使うことで商品写真の色が自然に映えます。

media.ioを使って生成したキャラメルクレイの画像例

8) オータムバーク

HEX： #2A1A12 #5A3323 #8E5A3C #C99A74 #F2E1D2

雰囲気： 居心地よい、季節感、アウトドア

おすすめ用途： 秋のイベントチラシやコミュニティポスター

居心地よい秋らしい配色。木の皮やシナモンスティック、トレイルに落ちたカサカサの葉を思わせます。ミドルブラウンは見出しに、淡いベージュは余白たっぷりのマージンに。温かみのある写真とシンプルなリーフモチーフを合わせてミニマルに仕上げましょう。ポイント：濃いブラウンはマット紙で印刷すると色が沈みやすいので試し刷り推奨。

media.ioを使って生成したオータムバークの画像例

9) エスプレッソリネン

HEX： #1B1210 #3C2A24 #6A4A3D #BDAA9A #FAF6F0

雰囲気： プレミアム、落ち着き、控えめ

おすすめ用途： ラグジュアリースキンケア広告

プレミアムかつ控えめな雰囲気のこの色合いは、エスプレッソのクレマと清潔なリネン生地を想起させます。商品ビジュアルではリネンホワイトを基調とし、深いエスプレッソカラーのタイポグラフィや細部を強調しましょう。柔らかな影や最小限のコピーと組み合わせることで、高級感が漂うブラウンの組み合わせになります。コツ：レイアウトが平坦にならないよう、暖かい中間色の細いセパレーターラインをプラスしましょう。

media.ioで生成されたエスプレッソリネンの画像例

10) チェスナットブルーム

HEX： #2B1915 #62362C #9B5D44 #D3A48C #F7E8DE

雰囲気： ロマンティック、ソフト、親しみやすい

おすすめ用途： ウェディング招待状・RSVPカード

ロマンティックで柔らかな色合いは、栗の木や淡い花びら、キャンドルの灯りのディナーを連想させます。紙色には淡いブラッシュタンを使い、正式な印象にしたい場合は最も暗い色で文字を配置しましょう。繊細な花柄やモノラインのイラストをエッジ部分に加えると良いでしょう。コツ：箔押しは控えめに、温かみのある色を活かしましょう。

media.ioで生成されたチェスナットブルームの画像例

11) ピーカンピクニック

HEX： #3C2318 #6B402B #9A6A44 #DABF9A #F5EDDE

雰囲気： フレンドリー、懐かしい、陽気

おすすめ用途： ファーマーズマーケットの看板・ラベル

フレンドリーで懐かしい色調が、ピーカンやピクニックブランケット、日差しのバスケットを感じさせます。商品名を強調しつつ、温かみが出るため看板にも最適です。素朴なスラブセリフ体や手描きアイコンと合わせてローカルで誠実な雰囲気を演出しましょう。コツ：最も明るい色を看板のベースに使い、暗めのインクが遠くからでもはっきり見えるようにしましょう。

media.ioで生成されたピーカンピクニックの画像例

12) スモークドアンバー

HEX： #140D0B #2D1B16 #5A3A33 #8A6F66 #E8E0DB

雰囲気： ムーディー、シネマティック、ドラマチック

おすすめ用途： 音楽ポスター・アルバムプロモーション

ムーディーで映画的なこの色合いは、ステージの煙、ダークウッド、ベルベットのカーテンを思わせます。ほぼブラックや深いアンバーで大胆な文字や高コントラストのシェイプを作り、スモーキーなトープでサブテキストをやわらげましょう。大胆な階層と余白が特徴のミニマルな構成にぴったりです。コツ：背景には少しテクスチャを加え、暗いグラデーションのバンディングを防ぎましょう。

media.ioで生成されたスモークドアンバーの画像例

13) メープルレザー

HEX： #23150F #4C2D1F #7A4B32 #B47B55 #EFE2D6

雰囲気： ヘリテージ、タフ、高級

おすすめ用途： メンズウェアのブランド・ルックブック

伝統的かつタフな印象の色合いは、使い込んだレザー、メープルの木目、しっかりとした縫い目を連想させます。クリーンな編集タイポグラフィと高コントラストのプロダクト撮影と相性が良いです。ブラックのアクセントは最小限にし、クリームを多めに使うことでページが高級感を保てます。コツ：メープルハイライトは価格タグや重要なポイントだけに少し使うのがおすすめ。

media.ioで生成されたメープルレザーの画像例

14) ブロンズオーチャード

HEX： #2B1C12 #5A3A24 #8B5A35 #C5A06A #F3E9D6

雰囲気： 収穫、日差し、健康的

おすすめ用途： オーガニック食品パッケージ・ラベル

収穫の温かみと日差しを感じるこのパレットは果樹園や焼きたてのクラスト、琥珀色のシロップを連想させます。ブロンズゴールドの色は味の特徴やバッジを強調するのに使い、深いブラウンでロゴや栄養情報を落ち着かせましょう。シンプルな植物イラストや非コート紙と合わせて信頼感を演出します。コツ：ラベルの主なフィールドにはライトクリームを使い、棚での視認性を高めましょう。

media.ioで生成されたブロンズオーチャードの画像例

15) シナモンペーパー

HEX： #2E1A12 #6A3B2A #A35A3A #D7A98A #F9EFE6

雰囲気： スパイス感、陽気、手作り感

おすすめ用途： ホリデーレシピカード・印刷物

スパイス感と明るさがあるこの色合いは、温かい紙に降り注ぐシナモンパウダーのような雰囲気。ローズ系の中間色がエネルギーを与えつつ派手な赤にはなりませんので、季節の印刷物にも最適です。遊び心のある落書きや、クリアなサンセリフ体と組み合わせるとキッチンで読みやすくなります。コツ：最も暗い色を材料名のヘッダーにして階層を明瞭に保ちましょう。

media.ioで生成されたシナモンペーパーの画像例

16) マホガニーナイト

HEX： #0F0A09 #2B1512 #5A2A24 #8A5A50 #E6D6D0

雰囲気： ラグジュアリー、夜、大胆

おすすめ用途： レストランブランディング・ワインリスト

ラグジュアリーで夜の雰囲気のこの色調は、マホガニーのテーブルや柔らかな照明、熟成ワインを想起させます。ほぼブラックの基調でドラマ性を出し、くすんだローズブラウンでセクションの区切りや装飾に使いましょう。セリフ体や十分なスペースと組み合わせることで重くなりすぎずエレガントに仕上がります。コツ：印刷の際は暗色のベタ塗りは避け、リッチなテクスチャを加えてムラを防ぎましょう。

media.ioで生成されたマホガニーナイトの画像例

17) サンドストーントレイル

HEX： #3D2A1E #6D4C36 #9A7355 #CDB79D #F4EBDD

雰囲気： アウトドア感、バランス、清潔感

おすすめ用途： ハイキングアプリUI・トレイルガイド

アウトドア感とバランスの取れたこの色合いは、砂岩の道や埃っぽいブーツ、日差しを浴びた地図を連想させます。ライトサンドストーンをメインキャンバスにし、深いブラウンでナビゲーションやピンを強調しましょう。シンプルな地形線や抑えたアイコンでインターフェイスの読みやすさを保つことが大切です。コツ：特に中間色タンの上のテキストはコントラストをテストし、アクセシビリティを確認しましょう。

media.ioで生成されたサンドストーントレイルの画像例

18) ラスティックハース

HEX： #2A1A14 #553326 #7C4A33 #B88B6B #F2E6DA

雰囲気： 家庭的、安らぎ、伝統的

おすすめ用途： インテリアデザインムードボード・パンフレット

家庭的で安らぎあるこの色合いは、素朴な暖炉や焼きたてのパン、暖かい漆喰壁を連想させます。クリーミーな色で空間を演出し、中間色ブラウンで家具や素材のスウォッチを重ねましょう。歓迎感のあるブラウンの組み合わせとしてリネン、オーク、マットな金属の自然な質感と相性が良いです。コツ：最も暗い色は細いアウトラインや見出しに使い、レイアウトが暗くならないようにしましょう。

media.ioで生成されたラスティックハースの画像例

19) プラリネサンセット

HEX： #2B1A12 #5C2F23 #8B4A34 #C9865E #F1D5C3

雰囲気： ゴールド感、ロマンティック、活気

おすすめ用途： ベーカリーのSNSプロモーション

ゴールドで活気のある色合いは、夕暮れ時の冷めていくプラリネをイメージさせます。キャラメルカッパーのハイライトがステッカーや割引バッジ、ボタンにアクセントを与えます。クリーミーな背景やパンのクローズアップ写真と合わせ、魅力的なSNSフィードに仕上がります。コツ：ライトブラッシュの上にテキストを置いて視認性を保ち、ダークトーンはフレーム要素に使いましょう。

media.ioで生成されたプラリネサンセットの画像例

20) アースバウンドエディトリアル

HEX： #1E1411 #463028 #705144 #B79E91 #F5F1EE

雰囲気： モダン、堅実、静か

おすすめ用途： ブランドガイドライン・ピッチデック

モダンかつ静かに堅実なこのニュートラルカラーは、リサイクル紙や粘土インク、柔らかなスタジオの光を感じさせます。緻密な文字体系と広い余白が中間色ブラウンに自信を感じさせます。チャートや区切り、タイトルスライドなど一貫した色調が求められるデックにも強みがあります。コツ：チャートの塗りにはロージータウプ、軸には最も暗い色を使ってデータの読みやすさを確保しましょう。

media.ioで生成されたアースバウンドエディトリアルの画像例

21) カッパーケトル

HEX： #2A1711 #563024 #7A3F2C #B96A43 #F2D9C7

雰囲気： アーティザン、暖かい、元気

おすすめ用途： クラフト飲料缶デザイン

アーティザンかつ元気なこの色合いは、銅製ケトルやトーストシュガー、小さなブリュワリーで舞い上がる蒸気を連想させます。カッパーのアクセントはブランドを際立たせつつ、派手な原色を使わなくてもOK。パンチのあるブラウンの組み合わせは最も暗い色で文字をはっきりさせ、ライトブラッシュを余白に使いましょう。コツ：缶にはグラデーションを控えて、印刷時のバンディングを避けるために単色フィールドを多用しましょう。

media.ioで生成されたカッパーケトルの画像例

ブラウンと相性の良い色は？

ブラウンはクリーム、アイボリー、暖かいグレイなどの柔らかいニュートラルと自然に調和し、レイアウトを明るく保ちつつブラウンのタイポグラフィもブラックほど強くなりません。

アクセントにはくすんだグリーン（セージ、オリーブ）でアース感を出したり、ダスティピンクやテラコッタで暖かくロマンティックな方向もおすすめです。よりクリーンでモダンなコントラストを求めるなら、冷たいオフホワイトと控えめなスレートやチャコールを加えましょう。

ブロンズやカッパーのようなメタリックな色調もブラウンパレットと美しく調和し、バッジや区切り線、小さなハイライトに特に合います。

ブラウンカラーパレットを実際のデザインで使用する方法

まず「基準」になるブラウン（通常最も濃い色）を見出しやボタン、ナビゲーションに選びましょう。次に中間色をUIや印刷要素のサポート用に、最も明るいクリームは背景や余白用に割り当てます。

コントラストには注意を。タンとクリームの組み合わせはおしゃれですが読みづらくなることも。ウェブやモバイル向けなら、テキストの中間色上での視認性をテストし、本文には最も濃いブラウンを使うことを検討しましょう。

テクスチャを意図的に加えましょう——クラフト紙、リネン、木目、さりげないノイズなどはブラウン系の印象を高めますが、やりすぎは重くなるので最小限かつ一貫性を持たせるのが大切です。

AIでブラウンパレットのビジュアルを作成

ムードボードやランディングページ、ポスター、パッケージングのコンセプトを作る場合、ブランドに合ったビジュアルを数点生成してカラーパレットの検証を素早く行うのもおすすめです。

各パレット下のプロンプトを出発点に、対象（メニュー、ラベル、UI、ポスター）を調整しつつ同じブラウンとライティングスタイルを維持して一貫性を作りましょう。

良い方向性が決まったら、ヒーロー画像、SNS投稿、商品モックアップ、背景テクスチャなど小さなセットを作り、ブラウンのカラースキームを全チャネルで統一しましょう。

次へ： オレンジカラーパレット