ブラウン×ブルー配色：おすすめパレット20選【組み合わせ例】

ブラウンとブルーは、自然でありながらデザインされた稀な組み合わせです。ブラウンは大地の安定感を、ブルーは明快さと自信を生み出します。現代的なブランド、インテリア、UIに最適です。

下記にHEXコード付きの20種類のブラウンブルーカラーパレットアイデア、使い方のヒント、そしてMedia.ioでリミックスできるAIプロンプトを紹介します。

なぜブラウンブルーパレットはうまく機能するのか

ブラウンは、温かみや質感、クラフト感をもたらします。木、革、コーヒー、粘土、石などをイメージしてください。ブルーは構造、落ち着き、信頼感を加えるため、デジタル製品やプロフェッショナルなブランドに頻繁に採用されています。

組み合わせることで、ブラウンとブルーは「人間らしさ」と「現代性」をバランスよく表現します。ブルーがレイアウトを清潔で整理された印象に保ち、ブラウンはデザインが冷たくなりすぎたり企業的になりすぎるのを防ぎます。

この組み合わせはさまざまな媒体で絶妙にスケールします。パッケージで高級感を演出したり、インテリアで親しみやすさを生み出したり、UIでは読みやすさを向上させます。特にやわらかなオフホワイトと組み合わせると、余白の効果が際立ちます。

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

1) ハーバーココア

HEX： #1F3B5C #3F6FA6 #A9C9E8 #7A4E2D #E7D8C9

雰囲気： 穏やか、海岸的、落ち着き

最適： 海辺のホテルブランディング

穏やかな海辺のエネルギーと温かい流木がハーバーの黄昏時のように融合しています。濃いブルーはロゴやヘッダーに使い、ココアブラウンがタイプやアイコンを支えます。クリーミーな砂色は主要な背景として利用すると全体が軽やかになります。ヒント：淡いブルーは小さなアクセントにとどめると、ブランドが高級感を保てます。

ハーバーココアのイメージ例（media.io生成）

Media.io

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

今すぐ無料で試す

2) デニムとウォルナット

HEX： #223A5E #4E7BB6 #C9DBF0 #6B4A2B #F2E9DF

雰囲気： カジュアル、信頼感、モダン

最適： カジュアルなECサイトUI

気軽なデニムブルーとウォルナットの温もりは、親しみやすく信頼感が生まれます。最も濃いブルーはナビゲーションや主要なボタンに、淡いブルーはホバー時やカードに。ウォルナットは価格タグやバッジ、選択フィルターのアクセントに適しています。ヒント：ブラウンは強調に使い、行動を促す要素は明快さを保つ。

デニムとウォルナットのイメージ例（media.io生成）

3) ストーミーサドル

HEX： #1E2F3F #3D6D8C #B7D0DE #8A5A3A #EFE5D8

雰囲気： ムーディー、冒険的、ラスティック

最適： アウトドア用品ランディングページ

ムーディーな空のブルーと使い込まれたサドルレザーが、雲の動くトレイルライドを連想させます。このブラウンブルーパレットでは、一番濃いトーンをヒーローテキストや上部バーに使い、淡いブルーでセクションを広げてください。レザーのブラウンは配送情報や評価、特徴アイコンなどの強調に。ヒント：十分な余白を加えて、荒々しい雰囲気を保ちつつ読みやすさを守る。

ストーミーサドルのイメージ例（media.io生成）

4) コースタルクレイ

HEX： #274C77 #6096BA #D9E8F5 #A06A42 #F3E7DA

雰囲気： 日差し、リラックス、ナチュラル

最適： リビングルームインテリアスタイリング

日差しを浴びたブルーと粘土色のブラウンは、テラコッタ植木鉢のそばにあるペイントシャッターを思わせます。最もソフトなトーンは壁やテキスタイルに、深いブルーは家具やアート、ラグなどのポイントに。粘土色のブラウンは木製家具や革、陶器の装飾に最適です。ヒント：同じブルーを小さなインテリアに2回繰り返すと部屋の統一感が生まれます。

コースタルクレイのイメージ例（media.io生成）

5) ミッドナイトモカ

HEX： #0F2A43 #2F5D8A #8FB7D6 #4B2F22 #EADFD6

雰囲気： ラグジュアリー、親密、シネマティック

最適： 高級キャンドルパッケージ

濃いミッドナイトブルーとモカブラウンは、低照明のベルベットや焙煎コーヒーのような印象。ダークブルーはラベルや箱のベースに、モカは箔やエンボスディテールに。淡いブルーはパターンや補足情報に最適。ヒント：最も濃い色と並べてメタリックインクをワンポイントで使うと高級感がアップ。

ミッドナイトモカのイメージ例（media.io生成）

6) ヴィンテージワークウェア

HEX： #1D3557 #457B9D #DCE8F2 #7B4B2A #F5EFE6

雰囲気： ヘリテージ、頑丈、働き者

最適： ワークウェアポスターデザイン

ヘリテージなブルーと頑丈なブラウンは、インディゴジャケットやオイルドレザーブーツのよう。これらの組み合わせは、大きめの文字やシンプルなアイコン、ややテクスチャ風なオフホワイトのベースと相性抜群。ミッドブルーは補助的なブロックに、ダークブルーは見出しに使って階層を明確に。ヒント：ブラウンのスタンプ風バッジを一つ加えてヴィンテージ感を強調。

ヴィンテージワークウェアのイメージ例（media.io生成）

7) リバーバンクスエード

HEX： #214E6B #6FA3C1 #CFE2EE #8C6239 #F0E6DA

雰囲気： フレッシュ、アウトドア、親しみやすい

最適： アウトドアブランドWebサイトUI

フレッシュな川のブルーとスエードブラウンは、水辺までのハイキングのような印象。濃いブルーはナビゲーションや見出しに、淡いトーンは広々としたセクション背景に。スエードブラウンはタブやバッジ、小さな補助ボタンのアクセントに最適。ヒント：シンプルなラインアイコンと組み合わせて、モダンなトレイルイメージを保つ。

リバーバンクスエードのイメージ例（media.io生成）

8) ブルージェイバーク

HEX： #2A4D8F #6EA0D6 #D7E7F7 #7A5B3E #F6F0E8

雰囲気： 明るい、親しみやすい、おとぎ話のよう

最適： 子供向け絵本イラスト

鮮やかなブルージェイの羽と温かな木の皮は、楽しくおとぎ話のような組み合わせ。強いブルーはキャラクターや注目オブジェクトに、ソフトブルーは空や柔らかな影に。バークブラウンは幹、巣、輪郭などの安定感に。ヒント：輪郭は細くしてパレットでコントラストを表現。

ブルージェイバークのイメージ例（media.io生成）

9) ダスティインディゴラテ

HEX： #2B3A67 #6C7DAE #E1E6F2 #8B6B4F #F7F1E9

雰囲気： ソフト、ロマンチック、上品

最適： ウェディング招待状セット

ダスティインディゴとラテブラウンは、リネンやドライフラワー、夕暮れの誓いのような雰囲気。インディゴは名前や主要情報に、淡いラベンダーブルーは背景のウォッシュに、ラテブラウンはモノグラムや枠線、RSVPアクセントに。ヒント：最も濃いインクはネイビーより少し明るく印刷すると繊細な印象に。

media.ioを使って生成したダスティインディゴラテの画像例

10) 北极木材

HEX：#102A43 #4A90C2 #E6F0FA #6A4B3A #F2ECE6

雰囲気：鮮明、建築的、ミニマル

最適：アーキテクチャポートフォリオ社説

ウッドブラウンの鮮明なアークティックブルーは、暖かい木のインテリアに対してガラスのファサードのように感じます。ページスペースとグリッド構造にはほぼ白のトーンを使用し、セクションのタイトルとキャプションには深い青を使用します。Timber brown は、プル クォートやプロジェクト タグの微妙なハイライトとして美しく機能します。ヒント: 青いアクセントがまとまりを感じるように、写真を少しクールトーンに保ちます。

media.ioを使って生成した北極木材の画像例

11) コバルトトリュフ

HEX：#143D66 #2F80C0 #CFE5F5 #5C3A2E #F3E6DD

雰囲気：洗練された、自信を持った、高級

最適：スキンケア製品広告

コバルトの輝きとトリュフの温もりが、光沢のあるガラス、濃厚なクリーム、ブティックカウンターディスプレイを示唆しています。大胆な茶色と青の色の組み合わせでは、コバルトが見出しと主要な主張をリードし、トリュフは成分のコールアウトと微妙な影をサポートします。淡いブルーとクリーム色が通気性とモダンなレイアウトを保ちます。ヒント: 製品をより明るく見せるために、柔らかいグラデーションを控えめに使用してください。

media.ioを使って生成したコバルトトリュフの画像例

12) 雨の小屋

HEX：#1B2A41 #3E5C76 #CAD7E5 #6B4F3A #F0E9E1

雰囲気：居心地がよく、静かで、思索に満ちた

最適：生産性ダッシュボードui

キャビンブラウンの静かな雨のブルーは、窓辺のマグカップのように感じられ、近くには柔らかいウールがあります。パネルとカードには中央の青を使用し、見出しとアクティブな状態には最も暗い色合いを使用します。キャビンブラウンは、警告メモ、小さなハイライト、または暖かい進捗状況インジケーターに最適です。ヒント: データ テーブルのコントラストを高く保ち、明瞭さを犠牲にすることなく雰囲気を快適に保ちます。

media.ioを使って生成したrainy cabinの画像例

13) 青写真の革

HEX：#0B3C5D #328CC1 #E1EFFA #7A4B33 #F6EFE8

雰囲気：テクニカル, シャープ, 男性

最適：メンズウェア ルックブック レイアウト

レザーブラウンと組み合わせたブループリントブルースは、正確でカスタマイズされ、少し大胆な感じがします。ページ構造とセクション区切りには最も濃い青を使用し、明るい青で製品名またはサイズの詳細を強調表示します。レザーブラウンは、小さなラベル、ベルトや靴の張り出し、微妙なアイコンに最適です。ヒント: 構造化された雰囲気に合わせて、タイポグラフィをきれいで凝縮した状態に保ちます。

media.ioを使って生成したブループリントレザーの画像例

14) ミュージアム エスプレッソ

HEX：#1E3A5F #5A88B5 #DCEAF6 #4A2D22 #F4EEE7

雰囲気：文化的、クラシック、キュレーション

最適：博物館展示サイネージシステム

キュレーションされたギャラリーブルースとエスプレッソブラウンは、プラカード、磨かれた木材、静かなホールを思い起こさせます。ブラウンブルーのカラーパレットを洗練された感じにするには、エスプレッソがタイポグラフィとウェイファインディングアイコンを処理し、ブルーが落ち着いたパネルとセクションヘッダーを設定します。視覚的な疲労を避けるために、マップや長い形式のテキスト領域には淡いトーンを使用してください。ヒント: サイネージの背景には 1 つの青に固執し、アクセシビリティのハイライトには 2 つ目の青を予約します。

media.ioを使って生成したミュージアムエスプレッソの画像例

15) 土鍋空

HEX：#244B6B #7FB0D6 #E3F0FA #B06F45 #F7EDE3

雰囲気：ハンドメイド、明るく、歓迎的

最適：セラミックスショップのソーシャル広告

澄んだ空の下で手作りの粘土の暖かさは楽観的で工芸品の前進を感じます。クリーンな背景とテキストオーバーレイには青色のトーンを使用し、クレイブラウンが製品自体にスポットライトを当てます。明るいニュートラルは、写真を自然に見せ、色に忠実に見せるのに役立ちます。ヒント: コピーを短くして、中央の青を使用して、単一の高コントラストの行動呼びかけを行います。

media.ioを使って生成した土鍋空の画像例

16) 海洋焙煎所

HEX：#12324B #2E6FA3 #BFD8EC #7D4E2F #F2E6DB

雰囲気：大胆な, 職人, 海洋

最適：コーヒーバッグ包装

ブラウンをローストした大胆なノーティカルブルースは、小さなロースタリーの外の海の空気のように感じます。棚のインパクトにはダークブルーをメインバッグカラーとして使用し、原産地、ローストレベル、テイスティングノートなどのバッジにはローストブラウンを追加します。ライトブルーは、タイポグラフィを圧倒することなく、微妙なウェーブパターンに適しています。ヒント: 小売で実用的なパッケージを維持できるように、大きくて読みやすいラベル領域を 1 つ保持してください。

media.ioを使用して生成された海洋焙煎の画像例

17) スレートとシエナ

HEX：#2A3D4F #5B7C99 #D7E4EF #8A5A44 #F5EFE8

雰囲気：プロフェッショナル、着実、控えめ

最適：金融webアプリui

シエナ・ブラウンとの控えめなスレート・ブルースは、安定していてナンセンスではありません。ナビゲーション、チャート、主要なメトリクスには濃い青を使用しますが、淡いトーンはダッシュボードを開いて落ち着いた状態に保ちます。Sienna は、攻撃的に感じることなく、アラート、選択された状態、小さな強調タグに最適です。ヒント: インターフェイスを鮮明に保つために、大きな背景で sienna を使用しないでください。

media.ioを使って生成したslateとsiennaの画像例

18) カッパーラグーン

HEX：#0E3B5A #3F8FB6 #D4EEF7 #A4653A #F6E7DA

雰囲気：新鮮な、修復的な、ブティック

最適：スパの内部方向

コッパーブラウンのクールなラグーンブルーは、ミネラルウォーターや温かい石のように回復感があります。壁やタオルには最も明るい色調を使用し、タイル、ガラス、またはアートワークを通して深い青を導入します。カッパーブラウンは、木製のスラット、真鍮の備品、小さな装飾品で輝きます。ヒント: 照明を暖かく保ち、ブルースが冷たくなく心地よく読めるようにしてください。

media.ioを使って生成したcopper lagoonの画像例

19) 大草原の夕暮れ

HEX：#22324A #6B8FB6 #E2ECF6 #9A6B4A #F7F0E8

雰囲気：優しい、懐かしい、開放的な

最適：風景水彩画プリント

穏やかな夕暮れブルーとプレーリーブラウンは、色あせていく空の下で背の高い草のように感じられます。洗濯物や紙のような空間には淡い色調を使用し、遠くの丘や雲の中で濃い青で深みを構築します。温かみのあるブラウンは、前景の質感と柔らかい影に最適です。ヒント: 透明なストロークを重ねて、パレットを風通しがよく落ち着かせます。

media.ioを使って生成したprairie duskの画像例

20) インクストーンキャラメル

HEX：#12263A #3C78A8 #D9EAF8 #8B5A3C #F4E9DD

雰囲気：文学、エレガント、モダンクラシック

最適：ブックカバーデザイン

キャラメルブラウンのインクストーンブルーは、さわやかなページや革のしおりのように、文学的で時代を超越した感じがします。タイトルと背骨の要素には最も暗い色合いを使用し、より明るい青は形状やイラストの詳細にモダンなコントラストを追加します。キャラメルブラウンは、著者名、小さな装飾品、または微妙なフレームに適しています。ヒント: カバーをシンプルに保ち、大胆なタイポグラフィック要素 1 つでデザインを表現します。

media.ioを使って生成したinkstone caramelの画像例

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

柔らかいオフホワイトと温かみのあるクリームは、プリントやスクリーン全体でスキームを明るく、読みやすく、柔軟に保つため、ブラウンブルーのカラーパレットに最も簡単な追加色です。

よりリッチな外観には、落ち着いたグリーン (セージ、オリーブ) を試して土のような側面を増幅したり、抑制されたメタリック (ゴールド/真鍮) を追加してプレミアム パッケージやホスピタリティ ブランディングを行ったりしてください。

UI のコントラストを増やす必要がある場合は、クール グレーまたはチャコールを使用すると、システムを引き締め、階層を改善できます。特にテキスト、ディバイダー、データが多いコンポーネントの場合はそうです。

リアルなデザインでブラウンブルーカラーパレットを使う方法

まずはロールを割り当てることから始めます。深い青に構造 (ヘッダー、ナビゲーション、ヒーロー テキスト) を処理させ、水色またはオフホワイトをメインの背景にし、茶色をアクセントにして暖かさと強調を与えます。

インテリアでは、スケールが重要です。明るい青とクリームは大きな表面 (壁、ラグ) でうまく機能しますが、茶色は木、革、セラミックなどの触覚素材で輝きます。部屋が意図的に感じられるように、小さな装飾要素に1つの青を繰り返します。

ブランディングとパッケージングには、「鉛」の色 (多くの場合、ネイビーまたはコバルト) を 1 つ選択し、シール、バッジ、または二次タイポグラフィには茶色を使用します。これにより、アイデンティティがモダンに保たれながらも、細工された地に足を踏み入れているように感じられます。

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

ランディングページ、パッケージモックアップ、部屋など、実際のシーンで茶色と青がどのように見えるかをプレビューしたい場合は、AIビジュアルを使用して、最終的なデザインにコミットする前に方向性をテストするのに役立ちます。

上記のプロンプトをテンプレートとして使用します。製品タイプ、スタイルキーワード (ミニマル、ヴィンテージ、編集)、アスペクト比をユースケースに合わせて交換し、パレットが適切に感じるまで繰り返します。

Media.io を使用すると、ブラウザで直接オンブランドのパレット モックアップを簡単に生成できます。インストールは必要ありません。

次へ： グレーブラウンカラーパレット