ブルーとトープの配色20選｜おすすめカラーパレット＆HEXコード

ブルートープは、落ち着いたくすみブルーとアースカラーのトープの温もりを融合させた、現代的なニュートラルカラーです。その結果、洗練されていて暮らしやすく、インテリアやブランディング、UIなど幅広い用途で使いやすい配色となります。

ここでは、HEXコード付きの厳選された20種類のブルートープ配色、さらに実践的な活用のコツやAIプロンプトをご紹介します。同じようなビジュアルを自動生成する際に再利用できます。

なぜブルー×トープの配色がよく合うのか

ブルートープのカラースキームは「くすみ系ニュートラル」ゾーンに位置し、落ち着きがありながら、ぼやけて見えすぎないのが特徴です。ブルーはクリアさと構造感を、トープは柔らかな温度感と親しみやすさを与えます。

さらに高い柔軟性も魅力で、クール寄りに合わせれば洗練されたUIや建築に、ウォーム寄りにすれば住宅やホスピタリティブランドにも活躍します。コントラストが優しいため、視覚的なノイズを抑えつつ情報を整理してくれる配色です。

リネン・オーク・ストーン・ヘアラインメタルなど、一般的な素材や仕上げと馴染みやすいことから、実用的かつ現代的なデザインシステムの「安心できる標準」として採用しやすい配色となっています。

20+のブルートープカラーパレットアイデア（HEXコード付き）

1）ミスティーハーバー

HEX： #2F5D73 #6F8FA1 #B8C2C8 #8A7D73 #E7E1DA

ムード： クール・エアリー・控えめ

おすすめ用途： 海沿いのリビングインテリアスタイリング

冷たい霧や海風を感じさせるソフトなブルーグレーと、風合いのあるトープがバランスよく組み合わさった配色。ブルートープのカラーパレットはリラックスしたインテリア、特にリネンソファや淡いオーク、マットな陶器と美しく調和します。ヘアラインニッケルや暖かみのあるホワイト照明と組み合わせることで、温もりを演出できます。使い方のコツ：一番濃いブルーを造作棚やアクセントウォールに、トープはラグやブランケットでリピートするのがおすすめです。

メディア.ioで生成したミスティーハーバーの画像例

Media.io

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

今すぐ無料で試す

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

HEX： #1F3E52 #4D6F86 #9AA8B2 #7A6A61 #D9D2C9

ムード： 無骨・落ち着き・現代的

おすすめ用途： メンズウェアのルックブック・エディトリアルレイアウト

ストーンウォッシュデニムの雰囲気とアース系トープが融合し、自信と安定感のある配色に。ブルートープの色調は、エディトリアルなグリッドやモノクロ写真、強いタイポグラフィと相性抜群。クリーンなサンセリフフォントと十分な空間を取り入れることで、高級感のある仕上がりに。使い方のコツ：トープをページ背景に、濃いブルーをヘッダーやセクション区切りとして活用しましょう。

メディア.ioで生成したストーンウォッシュデニムの画像例

3）コースタルクレイ

HEX： #335C6E #7A98A8 #C9D2D6 #9A8578 #F2E7DC

ムード： 日焼けした・親しみやすい・ナチュラル

おすすめ用途： ハンドメイド陶器のパッケージデザイン

日差しで色褪せたような海のブルーとクレイトープで、手作り感と親近感を演出。アルチザンブランドや陶器のラベル、エコ志向のパッケージに最適です。クラフト紙やエンボス加工、最も濃いブルーでシンプルなロゴマークを添えると◎。使い方のコツ：明るいクリーム色は余白として使い、くすみブルーを重たく見せず柔らかさを保ちましょう。

メディア.ioで生成したコースタルクレイの画像例

4）レイニーウィンドウペイン

HEX： #274657 #5E7D8D #AEBBC2 #7F746D #EEEAE5

ムード： 静か・内省的・居心地よい

おすすめ用途： ミニマルなブログのヘッダーと記事テンプレート

雨の日の静けさとスモーキーなブルーに、やわらかなトープニュートラルを組み合わせた配色。長文の読み物サイトなど、優しくはっきりとしたコントラストが欲しい時にぴったりです。暖かみのあるグレーの本文と、目立ちすぎない区切り線を合わせるとスッキリします。使い方のコツ：中間のブルーグレーをカードや注釈エリアに使うと、主張しすぎず整理された印象にできます。

メディア.ioで生成したレイニーウィンドウペインの画像例

5）ノルディックリネン

HEX： #2A4A5C #6D8C9B #D5DBDD #8D8076 #FAF6F0

ムード： スッキリ・居心地よい・北欧風

おすすめ用途： 北欧ベッドルームのインテリア

涼しげなブルーグレーとリネントープ、暖かいクリームがバランス良く調和した北欧の落ち着き。エアリーで無機質になりすぎないベッドルームに最適。明るい木材やブークレ素材、マットブラック金具を合わせればモダンなエッジも効きます。使い方のコツ：最も濃いブルーはランプやフレームなど小さなポイントに抑えて、全体の柔らかさをキープしましょう。

メディア.ioで生成したノルディックリネンの画像例

6）アーバンスレート

HEX： #1E3543 #3F6274 #8D9EA6 #6F635C #D8D3CE

ムード： 建築的・洗練・シリアス

おすすめ用途： 建築事務所のWEBヒーローセクション

建築的なスレートブルーに重厚感あるトープを合わせて、洗練された都会的な印象に。ポートフォリオサイトや、大きなイメージのWebにぴったりです。細いラインアイコンや抑えたタイポグラフィでプロフェッショナルな仕上がりに。使い方のコツ：最も明るいニュートラルは余白に用い、CTAボタンは中間のブルーで目立たせると◎。

メディア.ioで生成したアーバンスレートの画像例

7）ティールームカーム

HEX： #355A6A #7E9CAB #C8D0D2 #A28F84 #F6EFE6

ムード： 暖かみ・落ち着き・ウェルカム

おすすめ用途： カフェのメニューデザイン

おだやかなティールームのような優しいブルーと暖色トープで、歓迎ムードを演出。メニューや小規模食品ブランド、居心地の良いホスピタリティ等に最適です。セリフ体の見出しや紙の風合いを加えると手作り感が高まります。使い方のコツ：クリーム色をベースに、トープを見出しに使い、ブルーは特集やアイコンで存在感を持たせましょう。

メディア.ioで生成したティールームカームの画像例

8）ミュージアムミニマル

HEX： #213C4A #5C7C8D #B9C4C8 #7C7068 #F1ECE6

ムード： ミニマル・厳選・洗練

おすすめ用途： アートギャラリーの展示ポスター

厳選された静けさで、まるで現代美術館のような配色。クールな壁面や石のアクセントにも合います。ブルートープのパレットは展示ポスターやサイン、制約が価値となるブランディングに最適。余白を多く、強い書体は1種類に絞ることで時代を超えて使えます。使い方のコツ：濃いブルーでタイトル、トープで日付や場所などの副要素を担うと良いでしょう。

メディア.ioで生成したミュージアムミニマルの画像例

9）ブループリントスタジオ

HEX： #183646 #2F5970 #7C96A3 #9C8B82 #E3DED7

ムード： 集中・技術的・現代的

おすすめ用途： SaaSダッシュボードUIキット

集中力と技術感、大人の雰囲気を醸し出す深いブルーと、繊細なトープニュートラル。ダッシュボードや分析画面、複雑な管理画面にもおすすめです。シンプルなチャートや控えめな影、読みやすさのためのコントラストが重要です。使い方のコツ：一番濃いブルーをナビゲーション、明るいニュートラルはコンテンツ面に使うと、画面全体が軽やかにまとまります。

media.ioを使って生成したブループリントスタジオの画像例

10) 霧の散歩道

HEX： #2B4F60 #6E8896 #C2CACB #8B7F77 #F7F2EB

ムード： ソフト、ノスタルジック、穏やか

おすすめ用途： 旅行ブログの特集画像コラージュ

霧がかった海岸の雰囲気は、柔らかいブルーと流木のようなトープで表現されます。これらの色は、旅行記、写真コラージュ、落ち着いたソーシャルテンプレートに最適です。温かみのあるオフホワイトの余白や、落ち着いたブルーのオーバーレイを組み合わせると一貫性のあるイメージに。使用のコツ：トープをキャプションやラベルに使うことで、写真を軽やかに保ちます。

media.ioを使って生成した霧の散歩道の画像例

11) トワイライトペブル

HEX： #1B3340 #4E6E80 #98A7AE #6B605A #E8E2DB

ムード： ムーディー、バランス、洗練

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

トワイライトブルーと小石のようなトープが洗練され静かな雰囲気を作り出します。これらのブルーとトープの組み合わせは、ラグジュアリースキンケアやウェルネス、プレミアム商品広告に最適です。ミニマルなコピー、光沢のあるハイライト、クリーンなサンセリフ体と組み合わせるとモダンに。使用のコツ：製品にニュートラルな反射光を当て、深いブルーを背景として使い高級感のあるコントラストを狙いましょう。

media.ioを使って生成したトワイライトペブルの画像例

12) サンドバーシャドウ

HEX： #2D5667 #7F9AA6 #D0D7D8 #B19C8C #FFF7EE

ムード： 日差し、やさしい、軽やか

おすすめ用途： ビーチウェディング招待状セット

日差しが降り注ぐ砂州の暖かさと落ち着いたブルーグレーが、そよ風のようなロマンティックな雰囲気を醸し出します。結婚式の招待状セットや日付保存カード、当日のステーショナリーでエレガントさをキープしつつリラックス感を演出。デクルエッジやソフトなフローラル、深いブルーの繊細なラインモチーフと組み合わせて。使用のコツ：クリーム色を紙のベースに、名前はトープで記載し、強い黒にならず読みやすくします。

media.ioを使って生成したサンドバーシャドウの画像例

13) 静かな図書館

HEX： #223F4D #5A7A8C #B6C1C5 #7D6F66 #EFE9E2

ムード： 勉強熱心、落ち着き、タイムレス

おすすめ用途： 本の表紙デザイン

静かな図書館の静けさが、インクのようなブルーと本のようなトープで表現されます。内省的な小説、エッセイ、思い出の表紙に最適。クラシックなセリフ体とシンプルな幾何学モチーフを合わせるとタイムレスな印象に。使用のコツ：中間のブルーをタイトルブロックに、温かみのあるニュートラルを背景に使い、重い印象を防ぎます。

media.ioを使って生成した静かな図書館の画像例

14) 冬のセラミック

HEX： #204452 #6F8B9A #CED6D7 #8E8177 #F4F1EA

ムード： クリア、職人、穏やか

おすすめ用途： セラミック製マグカップの商品写真

澄んだ冬の光と手作りのセラミックトーンが穏やかでアーティザンな雰囲気を生み出します。このブルーとトープの配色は、素材と釉薬の質感が引き立つ商品写真に最適。柔らかい影やマッチしたニュートラル色の最小限の小道具と組み合わせ、形に注目が集まるように。使用のコツ：クリーム色の背景を選び、最も濃いブルーは折りたたまれたナプキンなど小道具で小さく使いましょう。

media.ioを使って生成した冬のセラミックの画像例

15) モダンエアルーム

HEX： #173746 #4C6D7F #A8B6BC #A58F82 #EDE3D7

ムード： クラシック、上質、現代的

おすすめ用途： ジュエリーブランドのアイデンティティモックアップ

クラシックなエアルームのエネルギーにモダンな節度が加わった深いブルーと暖かいトープ。ジュエリーブランディング、モノグラム、高級パッケージングにぴったり。箔押しやクリーンなロゴマークで洗練さを保ちます。使用のコツ：パレットは主にニュートラルにして、一番濃いブルーはロゴや封蝋などにアクセント程度使うのがポイント。

media.ioを使って生成したモダンエアルームの画像例

16) くもりセージ

HEX： #2A515F #7C96A0 #C7D0D0 #8B8076 #F3EEE6

ムード： フレッシュ、やさしい、スパ風

おすすめ用途： ウェルネスアプリのオンボーディング画面

フレッシュかつスパのようなブルートーンに、しっかりとしたトープがやさしい始まりをもたらします。このブルートープのカラーパレットは、ウェルネスのオンボーディングやハビットトラッキング、落ち着いたUIフローに最適。丸みのあるコンポーネントとソフトなグラデーションで親しみやすさを演出。使用のコツ：キーアクションは中間のブルー上に配置し、ボタンが存在感を出しつつうるさく感じさせない工夫を。

media.ioを使って生成したくもりセージの画像例

17) ハーバーライト

HEX： #102F3D #3B5F72 #7E95A0 #6D625C #DAD3CC

ムード： 夜、洗練、シネマティック

おすすめ用途： レストランのブランディングとメニュー表紙

夜の港のブルーと暖かいトープが洗練されシネマティックな印象を与えます。これはレストランブランディング、メニュー表紙、サイネージにスマートな選択で、ムードを出しつつ暗くなりすぎません。ソフトなスポットライトの写真や控えめなアイコンで高級感を。使用のコツ：本文エリアには明るいニュートラル色を使い、暗い環境でも読みやすくします。

media.ioを使って生成したハーバーライトの画像例

18) ギャラリーウォール

HEX： #264C5C #698796 #BFC9CA #9B8B80 #F8F3EB

ムード： 穏やか、厳選、家庭的

おすすめ用途： ホームデコールECカテゴリバナー

落ち着いたギャラリーウォールのイメージは、軽やかなブルーと暖かいトープ系ニュートラルで生まれます。ホームデコールEコマースに最適で、ビジュアルもタイポグラフィーも厳選され統一感が大切。明るい自然光の写真やさりげないオーバーレイと組み合わせてテキストの視認性を高めます。使用のコツ：バナー背景にはクリーム色を使用し、ラベルやフィルターには中間のブルーを使います。

media.ioを使って生成したギャラリーウォールの画像例

19) ソフトハードウェア

HEX： #2C4B5A #5F7C8A #AAB6BB #74665E #E6E0D8

ムード： 実用的、モダン、信頼感

おすすめ用途： 製品仕様書およびデータシートレイアウト

実用的で信頼感があり、ブルーグレーはエンジニアリング感を、トープは親しみやすさを演出します。仕様書やデータシート、B2Bプレゼンテーションに最適。見やすいテーブル、細い区切り線、統一されたアイコンスタイルで素早く情報を見渡せます。使用のコツ：中間のブルーで重要数値を強調し、他はニュートラルでまとめて階層を明確にしましょう。

media.ioを使って生成したソフトハードウェアの画像例

20) 週末コテージ

HEX： #2E586B #84A0AD #D7DEDE #B09A8C #FFF4E8

ムード： リラックス、明るい、快適

おすすめ用途： コテージキッチンインテリアのリフレッシュ

リラックスしたコテージの快適さは、明るいブルーと暖かいトープのアクセントで表現されます。このブルーとトープの組み合わせはキッチンに最適で、塗装されたキャビネットやタイルのバックスプラッシュ、軽やかなテキスタイルにぴったりです。真鍮の金具やナチュラルウッドと合わせて、冷たくならず明るい印象を演出。使用のコツ：大きな面にはソフトブルーグレーを、トープはスツールやランナー、壁のアートなどにバランス良く。

media.ioを使って生成した週末コテージの画像例

ブルートープと相性が良い色は？

ブルートープは、暖かいオフホワイト、クリーム、明るいベージュなどとよく合い、全体の配色を柔らかく心地よく保ちます。こうしたニュートラルカラーは、レイアウトやインテリアで強い黒のコントラストを避けるのにも役立ちます。

モダンな印象を加えたい場合は、ブルートープとスレートグレー、チャコール、または金属調仕上げ（ニッケル、クローム、マットブラック）を組み合わせましょう。より親しみやすい雰囲気なら、暖色系ウッドやテラコッタのアクセント、サンド系トーンがおすすめです。

小さな“ポップ”アクセントには、落ち着いたセージ、ダスティーローズ、ソフトなブラスやゴールドのディテールを少量プラスして、穏やかなニュートラルムードを保ちながら個性を演出できます。

実際のデザインでブルーとトープの配色を使うポイント

まずは明るいニュートラル（クリームまたは暖かいオフホワイト）をベースに設定し、中間のブルーグレーを大きなセカンダリ面（カード、壁のペイント、パッケージ背景、セクションブロック等）に使いましょう。これで全体が明るく読みやすく保てます。

深いブルーはナビゲーションや見出し、アクセントウォールなど“要”のポイントにだけ使いましょう。トープはラベルやキャプション、テキスタイル、セカンダリタイポグラフィーなど“安心感のレイヤー”として繰り返すとパレット全体がまとまります。

コントラストが必要なとき（特にUI）、まず最も明るいニュートラルとボタンやテキストで試しましょう。ブルートープは強いアウトラインよりも、やさしいコントラストとクリアな余白でより魅力的に映えます。

AIを使ってブルートープの配色ビジュアルを生成する方法

ムードボードやブランドモックアップ、UIコンセプトを作成する際は、数枚の一貫した画像を生成してパレットを素早く検証できます。上記のプロンプトは、統一感のあるライティングや素材、構成になるよう設計されています。

Media.ioを使えば、ブルートープのカラーパレットアイデアをインテリア、パッケージ、ポスター、アプリ画面のビジュアル例に変換でき、「ミニマル」や「コースタル」、「プレミアム」といったスタイルワードを調整して素早く反映可能です。

次へ： ベビーブルーカラーパレット