ホワイト＆ブラウンのカラーコーディネート20選｜HEXコード付き

ホワイトブラウンのカラーパレットは、明るいホワイトと落ち着いたブラウンを組み合わせて、温かみがあり、清潔感と信頼感のあるデザインを作り出します。派手な色に頼らずに高級感を演出できる簡単な方法です。

カフェのメニューからミニマルなUIまで、これらの温かいニュートラルカラーは穏やかで構造的、柔らかいコントラストと「クラフトされた」自然な雰囲気を、印刷やデジタルで幅広く活用できます。

ホワイトブラウンパレットがなぜこんなに優れているのか

ホワイトはクリアさと余白を、ブラウンは重厚感と温かみ、自然らしさをもたらします。両者の組み合わせは、心地よいコントラストとなり、モダンでタイムレス、そして「リアル」な印象を与えます。

これらのパレットは柔軟性があります。明るくすればミニマルで編集向け、深みを増せば高級感やムーディなブランドに。紙の質感、木や石、柔らかい影などのテクスチャーともよく合います。

色味がクリーム、コーヒー、砂、ウォルナットなど親しみやすいので、ホワイトとブラウンの配色は信頼感と親近感をもたらします。商品ラベルやライフスタイルブランド、落ち着いたインターフェイスに最適です。

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

1）リネンラテ

HEX: #fbf6ef #efe2cf #d6bc9a #a67852 #4b2f22

雰囲気: 居心地よく、招き入れる、柔らかいラスティック

おすすめ用途: カフェのブランディングやメニュー設計

居心地よく招き入れる雰囲気は、雨の朝のエスプレッソにミルクが溶け込むようなイメージ。淡いリネン色は余白として、キャラメルブラウンは見出しや区切りに使えます。カフェロゴやメニュー、ロイヤルティカードで、コントラストより温かさを重視する場面にぴったり。ポイント：非コート紙に印刷するとタン色がより濃厚に。

media.ioで生成したリネンラテの画像例

Media.io

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

無料で今すぐ試す

2）マーブルモカ

HEX: #ffffff #f2f2f0 #cbb9a7 #8c6a52 #2c1d16

雰囲気:洗練、高級感、編集向け

おすすめ用途:高級スキンケアパッケージ

洗練された高級感は、マーブルカウンタートップと深煎りコーヒーのイメージ。ほぼ白の色調は表面に、モカやエスプレッソは文字や成分表記に。メタリック箔やスポットグロスとも相性抜群。ポイント：最も深いブラウンは細部だけに使うと、パック全体が明るく保てます。

media.ioで生成したマーブルモカ画像例

3）オートミルクスタジオ

HEX: #f7f2ea #e7dccd #c8b29a #9a7657 #5a3c2a

雰囲気:ミニマル、穏やか、モダン

おすすめ用途:ライフスタイルショップ向け2D UIモックアップ

穏やかでモダンな雰囲気は、日の差すスタジオとオーク棚、柔らかいテキスタイルのよう。オートやサンドはパネルやカードに、ウォルナットはアクションやナビゲーションに。優しいコントラストなので長いスクロールのショッピングページに最適。ポイント：ウォームグレーアイコンと組み合わせてUIを冷たくしない。

media.ioで生成したオートミルクスタジオの画像例

4）ココアペーパー

HEX: #fffaf3 #eadfce #c6aa8c #8a5c3c #3a241c

雰囲気:クラフト感、落ち着いた、温かい

おすすめ用途:クラフトチョコレート包装デザイン

クラフト感と落ち着きは、折りたたみ紙とココアニブの香りのイメージ。クリーミーホワイトはブランドロゴ、ミッドブラウンはパターンや成分ブロックに。小ロットのパッケージやラベル、ギフトセットに最適。ポイント：最も淡いトーンに繊細なグレインテクスチャーを加えると平坦な印刷を避けられます。

media.ioで生成したココアペーパー画像例

5）サンディキャビン

HEX: #f5efe6 #e2d0ba #b69574 #7b543a #2b1a12

雰囲気:ラスティック、アウトドア、安らぎ

おすすめ用途:山小屋ウェブサイトヒーロー

ラスティックで安らぐ雰囲気は、ハイキング後のキャビンポーチと玄関のそばのブーツ。淡いサンド色は背景に、チェスナットは見出しで堅実・歓迎的な印象を。自然写真や常緑樹、石の質感とよく合います。ポイント：本文は最も深いブラウンで、淡いパネル上でも読みやすさを保てます。

media.ioで生成したサンディキャビンの画像例

6）ポーセレンチェスナット

HEX: #ffffff #f1ece6 #d0bfae #9b7558 #563525

雰囲気:タイムレス、洗練、柔らかいコントラスト

おすすめ用途:結婚式招待状セット

タイムレスで洗練された雰囲気は、磁器の皿と磨かれた木材のイメージ。ホワイトはフォーマル感を持たせ、チェスナットはモノグラムや枠線、RSVPに。セリフ体やエンボス、封筒のライナーとも好相性。ポイント：ウォームホワイト紙に印刷するとブラウンがオレンジっぽくならず、より自然。

media.ioで生成したポーセレンチェスナット画像例

7）バニラウォルナット

HEX: #fff7e8 #eddcc0 #c9a57b #8b6241 #3e2618

雰囲気:スイート、居心地よい、親しみやすい

おすすめ用途:ベーカリー商品ラベル

スイートで親しみやすい雰囲気は、バニラのフロスティングとローストナッツのイメージ。バターのような淡いトーンはラベルベース、ウォルナット色は商品名やフレーバーバッジに。特に瓶やパン袋、季節のステッカーに最適。ポイント：最も深いブラウンで高コントラストのバッジを小さく付けると、棚で見つけやすい。

media.ioで生成したバニラウォルナット画像例

8）クレイ＆クリーム

HEX: #fcf5ec #e8d2bd #c39b7d #9a6b4a #4a2b1f

雰囲気:アース感、クリエイティブ、職人風

おすすめ用途:陶芸ワークショップフライヤー

アース感とクリエイティブさは、手に乗る湿った粘土や窯の棚のイメージ。クリームは見出しに、粘土・テラコッタブラウンは形やクラス情報、価格ブロックに。シンプルな線画イラストと好相性。ポイント：最も深い色をコールトゥアクションに使うと、スキャンしやすいフライヤーになります。

media.ioで生成したクレイ＆クリーム画像例

9）カプチーノドリフト

HEX: #f9f4ee #e6d7c9 #bfa58c #7b5a45 #2a1a14

雰囲気:リラックス、親密、クラシック

おすすめ用途: ブックカバーデザイン

リラックスして親密な雰囲気。カプチーノのフォームアートがゆっくりと消えていくようなイメージです。淡いトーンは背景グラデーションに、中間のブラウンは文学的で温かみのあるタイトル文字に最適です。控えめな紙の質感やミニマルなイラストとの相性が良いです。ヒント：背景に粒子感がある場合は、ダーク文字の周りに細い白の縁取りを加えてください。

media.io で生成されたカプチーノドリフトの画像例

10) バーチバーク（白樺の樹皮）

HEX: #fffdf8 #efe7db #cdbfae #8a6f57 #3b2a20

雰囲気: ナチュラル、エアリー、北欧風

おすすめ用途: インテリアデザインムードボード

ナチュラルでエアリーな雰囲気。冬空に映える白樺の木のようです。オフホワイトや淡いトープは広いブロックに使い、樹皮のようなブラウンは家具のアクセントやラベルに使用します。マットブラックの金具や控えめなセージグリーンともよく合います。ヒント：パターンは控えめにし、質感で変化を持たせましょう。

media.io で生成されたバーチバークの画像例

11) アンティークパーチメント

HEX: #fff8e9 #ead8bf #c7ad88 #9a744f #5a3c25

雰囲気: ヴィンテージ、学術的、暖かみ

おすすめ用途: 編集雑誌の見開き

ヴィンテージで知的な印象。古い羊皮紙やレザーバインディングを思わせます。最も明るいクリーム色はマージンやカラムに、リッチなブラウンはセクション見出しや引用に使うと効果的です。快適さと明確さが同じくらい大事な長めのレイアウトに向いています。ヒント：本文にはわずかに暖色がかったブラックを選び、全体のパレットとなじませましょう。

media.io で生成されたアンティークパーチメントの画像例

12) トーステッドアーモンド

HEX: #fdf6ee #ead9c9 #d2b49a #a37a56 #5b3926

雰囲気: フレンドリー、健康的、日差しのよう

おすすめ用途: フードブログレシピカード

親しみやすく陽だまりのような雰囲気。リネンナプキンの上にちらばるトーストアーモンドのイメージです。淡いトーンはレシピ手順や余白に、キャラメルブラウンはタイトルや材料のハイライトに向いています。真上からのフード写真やシンプルなアイコンとも好相性です。ヒント：区切り線には中間のブラウンを使い、レイアウトをやわらかく保ちましょう。

media.io で生成されたトーステッドアーモンドの画像例

13) エスプレッソグレーズ

HEX: #faf2e7 #e3d1bf #b99378 #6b4632 #1f1410

雰囲気: 力強い、ドラマチック、ムーディー

おすすめ用途: プレミアムコーヒー製品広告

力強くムーディーな印象。クリームにエスプレッソシロップを注いだような雰囲気です。ほとんど黒に近いエスプレッソカラーは見出しの基調とし、やわらかなベージュの余白でレイアウトに明るさを加えます。コントラストや抑制が贅沢さを感じさせるハイエンドな広告に最適。ヒント：最も濃い色はアクセント要素を一つだけに絞り、淡い色を打ち消さないようにしましょう。

media.io で生成されたエスプレッソグレーズの画像例

14) ミルクティーミニマル

HEX: #fffaf6 #efe3da #d7c1b3 #a47b67 #5a3a2f

雰囲気: ソフト、モダン、控えめ

おすすめ用途: ウェルネスアプリの2D UIモックアップ

ソフトで控えめな雰囲気。透明なグラスのミルクティーのよう。血色感のあるベージュはカードや入力欄に、より濃いココアは主要ボタンやアクティブな状態に使います。落ち着いたオンボーディング画面に適していますが、ぼんやりしすぎません。ヒント：カチッとした枠線よりもさりげないドロップシャドウを加え、やわらかい印象を与えましょう。

media.io で生成されたミルクティーミニマルの画像例

15) ラスティックギャラリー

HEX: #f8f4ef #e4d8cc #c0a894 #7f604c #3a2a23

雰囲気: キュレーション、あたたかみ、アート感

おすすめ用途: ポートフォリオサイトレイアウト

選び抜かれたアート感のある雰囲気。小さなギャラリーで温かいスポットライトが木製フレームを照らすような空間です。背景はほぼ白にして写真が映えるようにし、ナビゲーションやキャプションにはトープやブラウンを使用します。控えめで自信のある印象を与え、作品の邪魔になりません。ヒント：最も濃いシェードはホバーステート専用に使い、全体を軽やかに仕上げましょう。

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

16) デザートコットン

HEX: #fffdfb #f0e6db #d8c3ad #b08463 #6b4630

雰囲気: 日差しに洗われた、リラックス、エアリー

おすすめ用途: ブティック内装サイン

日差しで乾く綿布のように、リラックスしたやわらかい雰囲気。負のスペースには淡いホワイトを、やや温かみのあるタンカラーは案内表示や価格札に使うことで親しみが出ます。真鍮金具やライトオーク、ドライフラワーとの調和も抜群です。ヒント：中間色はマットなビニール上で試して、暖色ライトでも判読しやすくしましょう。

media.io で生成されたデザートコットンの画像例

17) ストーン＆スコーン

HEX: #f6f3ee #e2d8ce #bca998 #806452 #38261f

雰囲気: しっかり、家庭的、バランス

おすすめ用途: ブランチ用ポスターデザイン

しっかりとした家庭的な雰囲気。石器のお皿に載せられた温かいスコーンのイメージです。クリーミーなベースはポスターの地に、中間のブラウンはイラストやスケジュール部分にレイヤーします。地域イベントやシーズンメニューに親しみを与えます。ヒント：階層をさらに明確化したいときは、ごく控えめなグリーンを小さく一点使いましょう。

media.io で生成されたストーン＆スコーンの画像例

18) シナモンウィスパー

HEX: #fff6ef #f0ddcf #d3b19a #b07a5a #5f3a2a

雰囲気: ロマンティック、やさしい、心地よい

おすすめ用途: ハンドメイドキャンドルのラベル

ロマンティックでやさしい印象。夕暮れに漂うシナモンの香りのようです。クリームやローズ系タンは美しいラベルのベースに、濃いスパイス系ブラウンは香り名を引き締めます。小さなパッケージでも読みやすさを保ちつつ、やわらかな白とブラウンの配色は扱いやすい組み合わせです。ヒント：丸みのあるフォントとゆとりある余白で、落ち着いた雰囲気を表現しましょう。

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

19) ミュージアムセピア

HEX: #fbfbf8 #ede6dc #cdbba8 #91725a #4a3227

雰囲気: 歴史的、思慮深い、洗練

おすすめ用途: 展示会パンフレット

歴史を感じさせる、しっとり落ち着いた雰囲気。静かなミュージアムホールのセピア写真のようです。淡いニュートラルはゆとりあるマージンに、温かなブラウンは見出しやタブに使います。単色写真や細いウォームグレーのルールとも好相性。ヒント：小さなキャプションは最も濃い2色から選んでコントラストを際立たせましょう。

media.io で生成されたミュージアムセピアの画像例

20) ココナッツココア

HEX: #fffefc #f1ede6 #d6c7b8 #9d7e66 #50372b

雰囲気: クリーン、オーガニック、モダン

おすすめ用途: ナチュラルソープ包装

清潔感があり有機的な印象。ダークココアの上にココナッツがかかったイメージです。ホワイト系は新鮮で素材感を打ち出すベース、ココアブラウンは香りのバリエーションやスタンプマークに使います。エコブランドにも最適なバランスのとれた白×ブラウン系パレットです。ヒント：中間色で小さな植物線画を加えると全体に統一感が生まれます。

media.io で生成されたココナッツココアの画像例

21) ウィンターモカミスト

HEX: #ffffff #f3f1ee #d9d0c6 #a98b77 #5a4237

雰囲気: ソフト、エアリー、静かにあたたかい

おすすめ用途: ホリデーメールヘッダー デザイン

柔らかくエアリーな雰囲気。温かいマグを持つ冬の朝のようです。クール寄りのホワイトはレイアウトをシャープに保ち、モカブラウンは赤や緑に寄らず季節感を加えます。メールヘッダーやバナー、シンプルなプロモブロックに最適です。ヒント：中間色は雪のようなドットやパターンに控えめに使い、面を濃くしすぎないようにしましょう。

media.io で生成されたウィンターモカミストの画像例

22) ビスケット＆バーク

HEX: #fff8f0 #edd9c8 #caa487 #855a3f #2f1d15

雰囲気: 安心感、アーシー、はっきりしたコントラスト

おすすめ用途: ラスティックレストランブランディング

安心感のあるアーシーな雰囲気。ウッドボードの上のビスケットのイメージです。ビスケットクリームはサイン背景に、バークブラウンはロゴやスタンプ風マークに用います。紙の質感やレタープレス、シンプルなバッジロゴとも好相性。ヒント：アクセントカラーはチリレッドのドットのような、ごく小さな要素一つだけに留め、ブランドの軸を守りましょう。

media.io で生成されたビスケット＆バークの画像例

ホワイトブラウンに合う色は？

白とブラウンは、ウォームグレー、ソフトチャコール、控えめなグリーン（セージ、オリーブ、ユーカリ）と自然になじみます。こうした色味を加えると落ち着いたパレットを保ちつつ、UIの状態変化やアイコン、タイポグラフィの階層にも深みを与えられます。

少し高級感や編集系に寄せたいなら、メタリック（ゴールド、ブラス）やインキーなダーク系ブラックもおすすめです。モダンで新鮮な印象を求める場合はダスティーブルーで温かみを冷ましつつ、色のぶつかりを避けられます。

アクセントカラーを加えるときは範囲を絞って意図的に使いましょう ― バッジやリンク、ひとつのハイライトだけなど。温かみのあるニュートラルの基調を損なわないように配慮できます。

ホワイトブラウンのカラーパレットを実際のデザインで使う方法

最も明るいホワイト／クリームをキャンバスにし、ミッドブラウンはセカンダリーサーフェス（カード、パネル、ラベル）に割り当てます。最も濃いブラウンはテキストやアイコン、重要なCTAに限定し、可読性を守りましょう。

印刷物の場合、白×ブラウンの配色は素材感（未加工紙、さりげないグレイン、エンボスやスポットグロス）を活かした仕上げが最適。デジタルでは太い枠線の代わりに、やわらかなシャドウとウォームグレーの区切り線で“濁った”印象を避けましょう。

コントラストが弱く感じる場合は、色を増やすのではなく、スケール（見出しを大きくする）、スペース（余白を増やす）、テクスチャ（中間色のみのパターン）で分離感を高めましょう。

AIでホワイトブラウンパレットのビジュアルを作成する

これらのHEXコードを本物のモックアップ（メニュー、パッケージ、ポスター、UI画面など）で見たいですか？Media.ioなら、ワンプロンプトでブランドに合わせたビジュアルを生成し、素早く反復できます。

求めるレイアウト・スタイル・ライティングを説明してください（例：「ミニマルなスキンケアラベル、クリーム色の背景、モカのタイポグラフィ」）。その後、プロジェクトに最適なパレットになるまで調整します。

次へ： グレー ライトブルー カラーパレット