青とダークブラウンのおすすめ配色20選｜カラーコード付き

青みがかったダークブラウンのカラーパレットは、クールなクリア感と温もりのある落ち着きを融合し、現代的なブランドや居心地の良いインテリア、洗練されたデジタルUIにも幅広く活用できる選択肢です。

以下に、20種類の厳選された青×茶の配色例（HEXコード付き）、そして実践的なコツやマッチするビジュアルを生成するためのAIプロンプトを紹介します。

なぜ青×ダークブラウンのパレットがうまく機能するのか

青は信頼感や秩序、穏やかさをもたらします（特に深いネイビーはその傾向が強いです）。ダークブラウンは温かみや手触り感を加え、全体の見た目が冷たすぎたり、ビジネスライクになりすぎるのを防ぎます。

二つの色を組み合わせることで、高級感がありながら自然なコントラストが生まれます―インクとレザー、海と木、デニムとウォールナットのようなイメージです。このため、青×茶系パレットはデジタルデザインだけでなく、パッケージや看板、インテリアなどの物理的な素材でも優れた効果を発揮します。

もう一つの利点は視認性です。深い青やほぼ黒のブラウンは力強いタイポグラフィーにぴったりで、温かみのあるクリームやグレーベージュは真っ白ではなくても読みやすいレイアウトを保ちます。

20種類以上の青×ダークブラウンカラーパレット例（HEXコード付き）

1）ミッドナイトエスプレッソ

HEX： #0B1D3A #163A63 #2E2A28 #5B3A2B #E7DCCF

雰囲気： ムーディー、洗練、居心地の良さ

おすすめ用途： 高級ブランディング、コーヒーのパッケージ

夜更けのカフェや磨き上げられた革を思わせる、ミッドナイトブルーとエスプレッソブラウン。ブランドのコアカラーには深いネイビー、レイアウトのベースにはダークローストブラウンを使うと引き締まり、クリーミーな中間色でラベルやウェブヘッダーも読みやすくなります。コツ：ネイビー地にブラウンの箔押し装飾を加えると高級感がさりげなくアップします。

media.ioで生成したミッドナイトエスプレッソの画像例

Media.io

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

今すぐ無料でお試しください

2）ハーバーココア

HEX： #08213B #1F5A86 #3B2A24 #8A6B55 #D9C7B4

雰囲気：雰囲気：海辺、暖かさ、安定感

おすすめ用途：おすすめ用途：コースタルスタイルのインテリアやリビングのコーディネート

海を想わせるブルーとココアブラウンで、使い込まれた桟橋やロープ、温かなランプの光の雰囲気を再現。壁やファブリック、木製アイテムにもぴったりで、“冷たくない落ち着き”を演出します。リネンやジュートなど自然素材と組み合わせれば海辺の温もりがアップ。コツ：広い面には明るいベージュ、最も濃いネイビーはフレームや造作のアクセントに。

media.ioで生成したハーバーココアの画像例

3）デニムウォールナット

HEX： #123A5A #2E6F9E #2B2624 #6B4A36 #F1E8DD

雰囲気：雰囲気：カジュアル、親しみやすい、モダン

おすすめ用途：おすすめ用途：EC商品ページやライフスタイルブランド

デニムのようなブルーとウォールナットのブラウンは、カジュアルで馴染みやすく、静かにモダンな印象。中間ブルーはボタンやハイライト用、ほぼ黒に近いブラウンは見出しや価格表示で使えば、黒より柔らかな雰囲気に。温かみのあるオフホワイトは、商品画像を清潔に見せつつ、白飛びしません。コツ：鮮やかなブルーはCTA（行動喚起）にだけ使うことで、ページ全体が落ち着き集中力が高まります。

media.ioで生成したデニムウォールナットの画像例

4）ストーミーモカ

HEX： #0F2A3D #355B77 #3A2F2A #9A7B64 #CFC8C1

雰囲気：雰囲気：嵐のよう、落ち着き、洗練

おすすめ用途：おすすめ用途：雑誌や編集記事のレイアウト

ストーミーブルーとモカのブラウンは、雨粒のついた窓ガラスや蒸気がたちのぼるマグカップを彷彿とさせます。抑えめなブルーは引用文やセクション分けに最適で、モカは見出しやキャプションに温もりを加えます。背景はソフトなグレーベージュにすれば抜け感と可読性もアップ。コツ：濃いブラウンでも行間をしっかりとり、洗練されたエディトリアルリズムを演出しましょう。

media.ioで生成したストーミーモカの画像例

5）インクチェスナット

HEX： #071A2F #1B3F6B #241B18 #7C4E3B #EADBCB

雰囲気：雰囲気：ドラマティック、クラシック、知的

おすすめ用途：おすすめ用途：書籍カバーやポッドキャストのアートワーク

インクのようなネイビーとチェスナットブラウンは、万年筆の筆跡や古い図書館の本棚のイメージ。コントラストが強く、クリーム色を使って濃紺にタイトルを配置すればインパクト抜群。チェスナットは縁取りやイラストに使えば暖かさを添えられます。コツ：中間色の青は少なめに控えて、表紙が落ち着いてドラマティックな印象になるよう意識しましょう。

media.ioで生成したインクチェスナットの画像例

6）ディープシートリュフ

HEX： #06263A #0E5176 #2A2422 #5A463E #B8AEA5

雰囲気：雰囲気：深み、土っぽさ、空気感

おすすめ用途：おすすめ用途：飲食店のメニューやバーのデザイン

ディープシーブルーとトリュフブラウンは、親密でアースィー、どこか謎めいた雰囲気。メニューの背景には一番濃いブルー、本文は暖かいグレーにすれば照明が暗めでも読みやすいです。明るめの青でセクション見出しやドリンクアイコンを加えて視線を誘導。コツ：用紙はマットや黒板風のテクスチャをチョイスするとブラウンがよりリッチに。

media.ioで生成したディープシートリュフの画像例

7）ブループリントバーボン

HEX： #0C2C59 #2A76B8 #2B1F1A #6A3F2B #F3E6D6

雰囲気：雰囲気：自信、職人感、堂々とした印象

おすすめ用途：おすすめ用途：クラフト系スピリッツのブランディングやラベル設計

ブループリントの如き青とバーボンブラウンは、もの作りへの誇りや確かな自信を感じさせます。伝統と現代のバランスが絶妙で、ボトルラベルなどで本領を発揮。繊細な彫刻風の線画や暖かいクリーム地を合わせれば細部までくっきり。コツ：鮮やかなブルーはワンポイントのストライプのみで、プレミアム感を損なわないように。

media.ioで生成したブループリントバーボンの画像例

8）サファイアティンバー

HEX： #0A2A4A #1F66A5 #2D2420 #8B6A52 #DCD2C5

雰囲気：雰囲気：アウトドア、クリーン、信頼感

おすすめ用途：おすすめ用途：旅行サイトやコテージ・キャビンの掲載ページ

サファイアブルー×ティンバーブラウンで、澄んだ山の空気や頑丈なキャビン、清々しい朝のイメージを表現。ブルー系でナビゲーションやリンク、温かいブラウンはバッジや価格表示、地図ピンに。ニュートラルなベース色は写真映えのするレイアウトに最適。コツ：ボタン類は明るいブルー、見出しには暗いネイビーを使い分けると視覚ノイズ軽減に。

media.ioで生成したサファイアティンバーの画像例

9）トワイライトレザー

HEX： #111E3A #3A5E86 #1F1714 #704C3B #EFE2D4

雰囲気：雰囲気：スリーク、男性的、高級感

おすすめ用途：おすすめ用途：メンズグルーミングの広告やプロダクトページ

トワイライトネイビーとレザーブラウンは、洗練された高級感と静かな男性らしさを演出。濃いベースはコントラストの強い商品写真を引き立て、レザーカラーはポイントや成分アイコンなどのアクセントに。ネガティブスペースにクリーム色を使えば重さも回避。コツ：ブルー系だけほんのりグラデーションを利かせ、全体を上品にまとめましょう。

media.io を使用して生成されたトワイライトレザーの画像例

10）ネイビーバーク

HEX： #08162C #21476F #2B211D #5D443A #C9BEB2

雰囲気： ナチュラル、安定感、控えめ

おすすめ用途： アウトドアアパレルのブランディング＆タグ

ネイビーとバークブラウンは、夕暮れ時の森の小道のように、地に足がついていて頼れる印象です。濃紺をメインのロゴに使い、バークカラーはサブラベルや縫い目、タグの縁取りなどに活用してください。暖かいグレーニュートラルは、リサイクルペーパーでもタイポグラフィの可読性を保ちます。コツ：余分な色ではなく紙のテクスチャで質感を出すことで、パレットの誠実さと無骨さを演出します。

media.io で生成されたネイビーバーク画像例

11）レイニーピア

HEX： #0A2336 #2B5D7D #2E241F #906A51 #E3D6C8

雰囲気： 映画的、落ち着き、懐かしさ

おすすめ用途： 映画ポスターやイベントフライヤー

映画のようなブルーや古びたブラウンが雨の桟橋や街灯、反射する水面を思い出させます。このブルー×ダークブラウンの組み合わせはポスターで深みを演出します。クリーム色の狭い文字を合わせれば遠くからの視認性も抜群です。コツ：画像は涼しげな影で構成し、暖かいブラウンはフォーカルポイントにのみ使いましょう。

media.io で生成されたレイニーピア画像例

12）コズミックカカオ

HEX： #0B1430 #2E4D8C #231A17 #6E4B3C #B9B0A7

雰囲気： 神秘的、テクノロジー感、エレガント

おすすめ用途： SaaSダッシュボードやアナリティクスUI

コズミックネイビーとカカオブラウンは、暖かな街の灯りに覆われた夜空のようです。最も濃いブルーをアプリのシェルに使い、中間ブルーはチャートやアクティブ状態に。ブラウンは、温かみが欲しいバッジや小さなハイライトに意外と合います。コツ：カードの背景はシェルよりやや明るくして階層を保ちましょう。

media.io で生成されたコズミックカカオ画像例

13）アークティックロースト

HEX： #0C2A43 #4A87B5 #2C2320 #7A5846 #F6EFE6

雰囲気： フレッシュ、居心地よい、バランス

おすすめ用途： カフェの内装やメニューボード

フレッシュなアークティックブルーとローストブラウンは、外の冷たい空気と温かいカフェのような心地よさのバランス。ライトな背景はメニューや価格の視認性を保ちます。淡い木やシンプルなアイコンを合わせるとクリーン＆モダンな雰囲気に。コツ：明るいブルーはカテゴリー名に、ローストブラウンは商品名に使い、読みやすさを導きます。

media.io で生成されたアークティックロースト画像例

14）ヴィンテージインディゴウッド

HEX： #16233A #334E72 #2A201C #8C6A54 #D8D0C7

雰囲気： 伝統、穏やかさ、時を超える

おすすめ用途： 伝統ロゴやステーショナリーセット

ヴィンテージインディゴと暖かいウッドブラウンは、活版印刷のインクや質感のある紙を思わせるタイムレスな印象です。インディゴでモノグラムや印章に、ミディアムブルーは線や補助マークへ。ウッドトーンで封筒や名刺、パッケージ挿入物に温かみを添えられます。コツ：ブラウンは印刷時スクリーンよりやや明るくすることで無塗装紙での濁りを防ぎます。

media.io で生成されたヴィンテージインディゴウッド画像例

15）ミュージアムナイト

HEX： #0A1633 #2D4A7B #1F1A17 #5C4337 #E8E1DA

雰囲気： 芸術的、静か、高級感

おすすめ用途： ギャラリー招待状や展示ポスター

美術館の夜のブルーと柔らかいブラウンは、美術館の暗いホールやスポットライトを浴びた額縁を思わせる芸術的かつ高級な印象です。ネイビーを主背景に、展示詳細は淡いニュートラルで可読性を高めましょう。ブラウンは案内線や日付、キュレーター名など小さなアクセントに最適です。コツ：余白を多く取ることで、デザインが洗練されて窮屈になりません。

media.io で生成されたミュージアムナイト画像例

16）スレートブラウンストーン

HEX： #0D2633 #3F6A7A #2E2521 #6B554A #D0C6BD

雰囲気： 都会的、成熟、落ち着き

おすすめ用途： 建築ポートフォリオやスタジオサイト

スレートブルーとブラウンストーンは雨上がりの都会のファサードのような都市的で落ち着いた雰囲気。最も濃い色はナビや見出しで威厳を演出し、ミュートブルーはリンクやホバーなどに。暖かいグレー背景はプロジェクト写真や図面が冷たすぎず見やすくなります。コツ：ブラウンは細いグリッドラインで使用し、ケーススタディにさりげなく構造を与えます。

media.io で生成されたスレートブラウンストーン画像例

17）ブルーベリーブランデー

HEX： #1A2B5A #3E78B2 #2A1C16 #7B4A33 #F0E2D2

雰囲気： リッチ、祝祭感、招待

おすすめ用途： ホリデーパーティー招待状やドリンクプロモーション

リッチなブルーベリーとブランデーブラウンは華美になりすぎず、祝祭感と親しみやすさを演出します。暖かさと深み、華やかさを求める招待状に最適で、クリーム紙のテクスチャや箔印刷を足すとより映えます。コツ：レイアウトはシンプルに、力強いブルーヘッドラインに役割を持たせましょう。

media.io で生成されたブルーベリーブランデー画像例

18）コバルトシダー

HEX： #0D2E63 #2E74D4 #2A211C #6C4D3A #E6D9CB

雰囲気： エネルギッシュ、モダン、自信

おすすめ用途： テックブランドやアプリランディングページ

コバルトのエネルギーとシダーブラウンはモダンで自信と少しの大胆さを感じさせます。明るいブルーは主要アクションやヒーロー部に、濃紺はヘッダーやフッターでページを支えます。シダーはアイコンやイラスト、レビューカードに温かみを提供。コツ：明るいブルーはアクションに絞るとコンバージョンが際立ちます。

media.io で生成されたコバルトシダー画像例

19）ノワールラテ

HEX： #0A1224 #2B4F79 #1E1816 #5E3F33 #DCCFC3

雰囲気： ミニマル、親密、高級感

おすすめ用途： ブティックホテルのブランディングやサイネージ

ノワールブルーとラテブラウンは柔らかなロビーのような親密かつ上質なムードを醸します。ほぼブラックのトーンはサイネージのタイプに、ミュートブルーは方向案内やルームナンバーに使えます。暖かいニュートラルが全体を親しみやすくまとめます。コツ：暗色サイネージでは文字間隔を広げて遠くから読みやすくしましょう。

media.io で生成されたノワールラテ画像例

20）オーシャンキャビン

HEX： #082A44 #2C6B8F #2A231F #7C5D49 #EEE5DA

雰囲気： リラックス、ラスティック、通気性

おすすめ用途： Pinterest風のインテリアムードボード

オーシャンブルーとキャビンブラウンは、流木と穏やかな水辺のようなリラックスしたラスティックさを持ちます。明るいブルーはエアリーなテキスタイルやペイントアクセントに、ブラウンは木製家具や照明で最も効果的です。クリームニュートラルが全体を調和させることで通気性の良いムードボードに。コツ：小物にブラウンを繰り返すことでスペースの一体感を保てます。

media.io で生成されたオーシャンキャビン画像例

青×ダークブラウンと相性の良い色は？

暖かいニュートラルは最も合わせやすい色です：クリーム、オートミール、ベージュ、グレージュはディープブルーとダークブラウンの間の移行を滑らかにしつつ、可読性と高級感を保ちます。

アクセントには、ミュートなメタリック（真鍮、ブロンズ、ソフトゴールド）がクラフト感を加え、クールなアクセント（ティールやスレート）はブルーをモダンにするのに有効です。

より明るい差し色が必要な場合は、コバルトや柔らかなテラコッタなどを控えめに、CTAやバッジ、装飾の小要素で使うのが理想です。

青×ダークブラウンのパレットを実際のデザインに活かす方法

まず役割を割り当てましょう：最も濃いネイビーはアンカー（ヘッダー、背景、ヒーローセクション）に、ダークブラウンはタイポグラフィやトリムなど温かみを与えたい部分に。

ライトニュートラルは可読性向上に重要です。WebやUIではカードやコンテンツエリアに理想的で、写真や商品画像が自然に映ります。

彩度の管理も重要です：ブルーは深く、ブラウンは土っぽさを保つことでパレットが高級に見えます。明るいブルー（含まれる場合）はアクションカラーとしてリンクや主要ボタンにのみ使いましょう。

AIで青×ダークブラウン配色のビジュアルを作る

すでにHEXコードがある場合もビジュアル（モックアップ、ポスター、UI、ムードボード）生成をAIで行えば、探索が早くなりコンセプトを一貫性あるものにできます。

プロンプトには素材（レザー、ウォルナット、マットペーパー、ネイビーインク）や照明（ソフトな昼光やスタジオライティング）を必ず入れてブルー×ブラウンの雰囲気を強調しましょう。

方向性が決まったら、一度に変えるのは一変数（例：余白を増やす、最小アクセントストライプにする等）だけにしパレットの一貫性を保ちます。

次へ： レインボーカラーパレット