BlueとTanのカラーパレット20選｜おすすめ配色とHexコード一覧

ブルーとタンは、穏やかで実用的な印象を与える珍しい組み合わせのひとつです。クールな海のようなブルーは明快さをもたらし、温かみのあるタンは快適さと親しみやすさを加えます。

以下には20種類の厳選されたブルー×タン配色パレットのアイデア（HEXコード付き）と、UI・ブランディング・インテリアビジュアルでの使い方のガイドを紹介します。

なぜブルー×タンのパレットがとても効果的なのか

ブルーは構造や信頼感、清潔なビジュアル温度をもたらし、タンは安心感のある人間的な温かみを加えます。両者を組み合わせることで、モダンでありながら無機質になりすぎないバランスを実現します。

ブルーは自然と後退し、タンは目に近づいて感じられるため、この組み合わせは階層構造を作りやすいです。ブルーはナビゲーションやタイポグラフィのアンカーに、タンはサブパネルやバッジ、テクスチャーの強調に使えます。

ブルーとタンの組み合わせは、ブルーの濃さ（ネイビーからスカイまで）やタンの色味（ベージュからキャラメルまで）を変えるだけで、コースタルからムーディー、上質な雰囲気まで幅広いスタイルに適応します。

20種以上のブルー×タン配色アイデア（HEXコード付き）

1）コースタルデューン

HEX： #0B3C5D #1D5E83 #8FB3C8 #D4B896 #F6F0E6

雰囲気： 風通しがよくリラックス感のあるコースタル

おすすめ用途： 旅行ブランディング、ライフスタイルWebサイト、ビーチハウスのインテリア

爽やかな海風と日差しで温まった砂のニュートラルが、クリアなブルーとクリーミーなデューンの配色で表現されています。このブルー×タンのパレットは、旅行ブランドやコースタルなランディングページ、落ち着いたリビングスペースに最適です。オフホワイトの余白とシンプルな線アイコンを合わせれば、タンが黄色みを帯びすぎず温かみを感じます。ポイント：一番濃いブルーを見出しやボタンに、タンは背景ブロックに使うと、自然な海岸の雰囲気が演出できます。

media.ioで生成したコースタルデューンの画像例

Media.io

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

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

2）ハーバーリネン

HEX： #0E2F44 #256D85 #B7D4E5 #C7AD86 #FBF7F1

雰囲気： 清潔感、信頼感、エアリー

おすすめ用途： SaaSダッシュボード、金融アプリ、B2Bプレゼンテーション

穏やかなハーバーブルーが構造を感じさせ、リネンのようなタンが柔らかさと明るく清潔なベースを加えます。コントラストがしっかりあるので情報量の多い画面にも適しつつ、親しみやすさも感じさせます。さりげないグレーの仕切りを使い、タンはタグや注意書き、サブパネルなどの強調に使うとよいでしょう。ポイント：ライトブルーはグラフ用に取っておくと、UIの読みやすさが保たれパステルトーンになりすぎません。

media.ioで生成したハーバーリネンの画像例

3）デザートヨット

HEX： #0A2A43 #2F6E8E #9EC3D6 #C8A57A #EFE5D7

雰囲気： 冒険心、日差し、プレミアム

おすすめ用途： サンケアパッケージ、リゾート広告、アウトドア商品のローンチ

日差しを浴びたタンと鮮やかなマリンブルーが、上質さとアウトドア感を同居させた印象に。清潔感とフレッシュさを保ちながらもラグジュアリーなパッケージデザインに映えます。マットな質感やミニマルなタイポ、必要ならメタリックのワンポイントを添えましょう。ポイント：一番明るいクリーム色を主役の背景に使い、ブルーがよりくっきり見えるように。

media.ioで生成したデザートヨットの画像例

4）インク＆ラフィア

HEX： #102A43 #334E68 #9FB3C8 #BFA37C #F3EEE6

雰囲気： 編集的、テクスチャー、洗練

おすすめ用途： 雑誌レイアウト、ルックブック、ミニマリストポスター

インクのようなブルーは洗練された編集トーンを作り、ラフィアカラーのタンが手作り感と温かみを加えます。強烈なコントラストを避けつつメリハリのある誌面に最適。セリフ体の見出しや余白を広くとり、タンのハイライトは引用やセクションラベルにひとつだけ使いましょう。ポイント：中間色のブルーで本文を書くと、オフホワイト紙でも見やすく眩しさが抑えられます。

media.ioで生成したインク＆ラフィアの画像例

5）スカイカーキ

HEX： #1A3D5A #3A7CA5 #B7DFF2 #BFA57A #FFF7EA

雰囲気： フレッシュ、前向き、アウトドア

おすすめ用途： キャンピングブランド、ハイキングポスター、イベントグラフィック

空のようなブルーと実用的なカーキトーンが元気なアウトドア感を生み出し、明快さや親しみやすさが感じられます。アウトドア系のキャンペーンやイベントビジュアルに最適。太めのサンセリフ体とシンプルなバッジアイコンがよく合います。ポイント：コピーの背面に明るいスカイブルーを敷くことで、タンのアクセントがより見やすくなります。

media.ioで生成したスカイカーキの画像例

6）ミッドナイトサンドバー

HEX： #081F2D #123E57 #5B8CA5 #D0B087 #F5EBDD

雰囲気： ムーディー、安定感、高級感

おすすめ用途： ホテルインテリア、ラウンジブランディング、映画的Webデザイン

深みのあるミッドナイトブルーがドラマティックなベースになり、サンドバーのタンが落ち着きつつ重くなりすぎない雰囲気に。ホスピタリティブランドやラグジュアリー空間におすすめ。真鍮やダークウッド、ブラックタイポグラフィとの組み合わせで洗練された印象に仕上がります。ポイント：照明やソフトファブリックはタンを使い、ダークブルーの基盤を軽やかに整えて。

media.ioで生成したミッドナイトサンドバーの画像例

7）パウダースエード

HEX： #16324F #2E5E7E #C6D8E6 #C9A882 #FAF2E8

雰囲気： 柔らか、エレガント、モダン

おすすめ用途： ビューティーパッケージ、スキンケア広告、ブティックWeb

パウダリーなブルーはクリーンでスキンケアに最適。スエードのようなタンが温かさと柔らかさをもたらします。落ち着いた高級感を求めるミニマリストなビューティーにおすすめ。細いラインや大きな余白、さりげない紙の質感を加えるとより心地よいです。ポイント：キャップやラベル、ワンポイントでタンを使い、ブランドの主役はブルーに据えましょう。

media.ioで生成したパウダースエードの画像例

8）ブループリント＆バーラップ

HEX： #0F2741 #274C77 #A3BFD9 #B7956B #F2E8DA

雰囲気： クラフト感、構造的、アーティザンモダン

おすすめ用途： 建築ポートフォリオ、リフォームブランド、パンフレット

設計図のようなブルーが精密さを、バーラップタンが手仕事感と温かさを演出します。技術的なのに親しみを感じさせたいデザインスタジオにぴったり。グリッドレイアウトや細いストローク、テクスチャーの効いたタンのセクションで区切ると効果的。ポイント：タンはやや落ち着いた色味にして、印刷時に黄金色に寄りすぎないように。

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

9）アルパインキャンバス

HEX： #11324D #3C6E91 #DCEAF4 #C6A57E #F7F1E6

雰囲気： さわやか、エアリー、自然派

おすすめ用途： 水彩画プリント、エコブランド、ウェルネスブログ

澄んだ山の空気と淡い空色に、温かみのあるキャンバス風タンベースをプラス。この配色は自然で穏やかな印象になり、ウェルネスの話題やエコパッケージに最適です。水彩風のテクスチャーやソフトなグラデーション、ミニマルなコピーで色の広がりを感じさせましょう。ポイント：一番濃いブルーはタイトルのみに控えめに使い、軽やかな印象をキープ。

media.ioを使用して生成されたアルパインキャンバスの画像例

10）レトロサーフショップ

HEX： #0E4A6A #2D7EA6 #9ED0E6 #D2B48C #FFF1DD

雰囲気： 遊び心、ノスタルジック、晴れやか

おすすめ用途： 夏のフライヤー、カフェメニュー、グッズグラフィック

レトロなサーフブルーは明るく親しみやすく、クラシックなタンが日焼けしたボードウォークの温もりを感じさせます。メニューやフライヤー、ステッカー風グッズなど遊び心のある印刷物にぴったり。丸みのあるタイポグラフィとシンプルなイラスト形状を組み合わせると、懐かしさが演出できます。ポイント：一番明るいブルーは見出しに、タンは背景に使ってビジュアルの雑多さを防ぎましょう。

media.ioを使用して生成されたレトロサーフショップの画像例

11）ストーンウォッシュデニム

HEX： #1B2A41 #3A506B #A7C5EB #C2A178 #F5EFE6

雰囲気： カジュアル、クラシック、信頼感

おすすめ用途： ファッションEC、商品ページ、ルックブックUI

ストーンウォッシュデニムのブルーは親しみやすくリラックスした印象で、レザートリムのような温かみのあるタンが基調となっています。このブルー×タンのカラーパレットは、信頼と快適さを求めるファッションECに最適。シャープな商品写真と合わせて、クリーム色をメインキャンバスとするとレイアウトがすっきりします。ポイント：タンは価格の目立ちやサイズ表示に使い、アクションを温かく目立たせましょう。

media.ioを使用して生成されたストーンウォッシュデニムの画像例

12）シーサイドミュージアム

HEX： #0B2545 #134074 #8DA9C4 #C9B28A #F7F3EA

雰囲気： 文化的、穏やか、静かに大胆

おすすめ用途： 博物館サイネージ、展示グラフィック、文化ブランディング

静かな航海ブルーは歴史の趣を醸し出し、砂色のタンが古い紙のような温もりを足します。可読性と雰囲気どちらも重視されるサインや誘導表示に最適。高コントラストな文字、クリーンな矢印、アイコン周りの余白と組み合わせて。ポイント：タンはサブパネルに使用し、案内用ブルーをメインにすることで、遠くからでも識別しやすくなります。

media.ioを使用して生成されたシーサイドミュージアムの画像例

13）ウォームミニマルワークスペース

HEX： #102B3F #1E5D7B #D5E6F0 #D1B38E #FFF8F0

雰囲気： 集中、整然、ウェルカム

おすすめ用途： ホームオフィスインテリア、生産性ブログ、Notionテンプレート

クールなブルーの構造に温かみのあるタンの快適さが加わり、静かな朝窓際の整ったデスクのような印象。働く空間が清潔すぎず、生産的に感じられる色合いです。明るい木目調、黒のアクセント、クリーミーな背景と合わせて柔らかさを演出。ポイント：収納などにひとつのブルーを選び、テキスタイルにタンを繰り返すと統一感が出ます。

media.ioを使用して生成されたウォームミニマルワークスペースの画像例

14）ヴィンテージマップルーム

HEX： #0D1B2A #1B4965 #62B6CB #C9A66B #F2E9DB

雰囲気： ノスタルジック、好奇心旺盛、学術的

おすすめ用途： 本の表紙、ポッドキャストアート、伝統ブランディング

古地図らしい深いインクブルー、色あせたティール、羊皮紙のようなタンが雰囲気を醸し出します。場所や時代感が必要なストーリーテリングプロジェクトにぴったりのブルー×タン。セリフ体の書体や控えめな紙目模様で印刷感を演出。ポイント：明るめティールはハイライトのルート線のようにごく一部で使うと効果的。

media.ioを使用して生成されたヴィンテージマップルームの画像例

15）セラミックバス

HEX： #12314B #2C6E8F #B9D6E8 #D7BFA1 #F9F2E9

雰囲気： スパ風、新鮮、やさしい

おすすめ用途： バスルームリフォーム、タイルカタログ、スキンケアランディングページ

クリーンなセラミックブルーは光沢タイルの水のように爽やかで、砂のようなタンが自然石のような温もりを添えます。バスルームのビジュアルやタイルカタログ、心落ち着く商品ページに最適。白い目地、マットな質感、やわらかな影を組み合わせてリアルに。ポイント：トリムなど部分使いでタン、広い面はブルー中心にするとごちゃつきません。

media.ioを使用して生成されたセラミックバスの画像例

16）イブニングビストロ

HEX： #0B2D39 #155E75 #9CD3D9 #C6A27A #F4EEE4

雰囲気： 居心地よい、親密、洗練

おすすめ用途： レストランメニュー、ワインバーブランディング、予約ページ

イブニングブルーは、ガラスに反射するろうそくの光のような落ち着いた雰囲気で、木材やリネンを感じさせる温かみのあるタンとのバランスが絶妙です。コントラストが高くてもフォーマルになりすぎず、読みやすいメニューや上品なブランディングに。クリーム色の紙テクスチャ、細い罫線、バーガンディなど単色アクセントも相性良し。ポイント：メニューのセクション見出しは最も深いブルー、価格表示やアイコンはタンに。

media.ioを使用して生成されたイブニングビストロの画像例

17）モダンランチ

HEX： #14213D #2B4C7E #BFD7EA #B08968 #F5F0E6

雰囲気： ラスティックモダン、頑丈、歓迎感

おすすめ用途： 住宅外観、不動産ブランディング、インテリアスタイリング

しっかりとしたブルーでモダンランチの自信を表現し、キャラメルタンで太陽が降り注いだ自然な温もりをプラス。外壁塗装や不動産資料、居心地の良いクリーンなインテリアに理想的。ストーン調の質感、マットブラック金具、温かいホワイトトリムと合わせて。ポイント：濃いブルーは玄関ドアやシャッター、タンは広い面に使ってバランスを整えましょう。

media.ioを使用して生成されたモダンランチの画像例

18）ソフトナーサリーワーブ

HEX： #1F3C58 #5C89A8 #D7EAF6 #D8BFA3 #FFF6ED

雰囲気： やさしい、落ち着く、遊び心

おすすめ用途： ベビールームデコ、ベビーシャワー招待状、子供部屋アート

ゆるやかな波のようなブルーが穏やかで眠たげな雰囲気にし、やわらかなタンで心地よさをプラス。キャンディのような明るさではなく、子ども部屋アートや招待状に最適。丸みのある形、シンプルな動物、クリーム色の余白を多く使うと呼吸できるデザインに。ポイント：最も暗いブルーではなく中間のブルーでテキストを使うとコントラストが穏やかに。

media.ioを使用して生成されたソフトナーサリーワーブの画像例

19）ギャラリーレーベル

HEX： #0A2342 #2C4F6D #B3CDE3 #C7A97A #F8F4EC

雰囲気： ミニマル、キュレーションされた、モダンクラシック

おすすめ用途： アートギャラリーアイデンティティ、展示カード、ポートフォリオサイト

キュレートされたブルーはシャープで現代的、暖かみのあるタンが控えめでコレクター気質な柔らかさを添えます。自制心が重要なギャラリーラベルやアーティストポートフォリオ、展示物に最適。クリーンなグリッド、控えめなタイポグラフィ、高コントラストなアート写真で。ポイント：決まりごとの下線やスタンプなどにタンを署名的に入れると上質な印象に。

media.ioを使用して生成されたギャラリーレーベルの画像例

20）オータムトレイルヘッド

HEX： #0E3A5B #2A6F97 #B9D9EB #C4A77B #FFF1DE

雰囲気： エネルギッシュ、アウトドア、親しみやすい

おすすめ用途： Instagramストーリー、イベントプロモ、コミュニティグループ

明るいトレイル空ブルーとアースカラーのタンは、ハイキングの始まりの砂道を歩くブーツのような、元気でありながら自然な印象。SNSグラフィックにも使いやすく、親しみと安定感を両立。太字の文字、シンプルなロケーションピン、クリーム背景でモバイルでも見やすく。ポイント：テキストは明るい色調で、日付や時刻などの重要数字は最も暗いブルーで。

media.ioを使用して生成されたオータムトレイルヘッドの画像例

ブルー×タンに合う色は？

ソフトなホワイトやクリームはブルーとタンに最適な相棒です。どちらも空間に呼吸感を与え、色同士の温度感をしっかり活かせます。デジタルプロダクトでは、オフホワイト背景がディープネイビーの強さをやわらげます。

ミューテッドなグリーン（セージ、オリーブ）はアーシーやコースタル、アウトドアな方向性を強め、チャコールやブラックはモダンなコントラストをタイポグラフィやUIに加えます。わずかにポップさが欲しければ、バーガンディやラスト、ティールの控えめなアクセントも試してみてください（青系のベースと相性良し）。

メタリックとも自然に合います。ブラスやシャンパンゴールドはタンの下地を引き立て、ブラッシュドシルバーはクールなブルーの隣でシャープに仕上がります。

ブルー×タンの配色パレットを実際のデザインでどう使う？

UIやブランディングでは、ブルーを“主役”（ナビ、見出し、プライマリーボタン）に使い、タンは脇役（バッジやサブパネル、ハイライト）に。コントラストを安定させ、タンが黄色や濁った印象に偏るのを防ぎます。

インテリアやライフスタイルビジュアルでは、スケールが大事。タンの大きな面積（壁、テキスタイル、紙）は親しみと温かみを、ブルーはドアやキャビネット、一部壁・主役アイテムに強いアンカー感をもたらします。

印刷の場合、用紙でタンの発色が変わることも。タンをやや控えめにしたり、キャンバス風のベージュ寄せにすると高級感ある仕上がりになることが多いです。

AIでブルー×タンの配色ビジュアルを作成する

ブルー×タン配色のブランドボードやUIモック、ポスターやパッケージをプレビューしたい時は、さっとイメージを生成してコントラストや雰囲気を事前に検証しましょう。

上記のプロンプトから始めて、お好みのHEXカラーに入れ替えたり、スタイルキーワード（例：“ミニマル”、“フォトリアリスティック”、“ベクター”、“ペーパーテクスチャ”）を調整してプロジェクトに合わせてください。

Media.ioなら、バリエーションを素早く生み出せるので、コースタルブルーやディープネイビー＋キャラメル系の比較も一から作り直さずに検討可能です。

次へ： イエローオレンジのカラーパレット