ミディアムブルーのカラー組み合わせ20選・HEXコード付き

ミディアムブルーは、落ち着きと自信の間の絶妙な位置にあり、UIやブランディング、印刷物などにとても使いやすい色です。クラシックブルーのように信頼感がありつつ、ディープネイビーよりも新鮮でモダンな印象を与えます。

以下に、HEXコード付きの20以上のミディアムブルーカラーパレットアイデアと、モックアップやポスター、ブランドボードのためにビジュアル生成ができるAIプロンプトを紹介します。

ミディアムブルーパレットがうまく機能する理由

ミディアムブルーは、感情のトーンと可読性のバランスが取れているため、汎用性があります。信頼できる「テックフレンドリー」な印象を持たせつつ、現代的なインターフェースやマーケティングページでも親しみやすく使える明るさを備えています。

また、クールなニュートラル（ホワイト、スレート、グレーブルー）にも、暖かみのあるアクセント（アンバー、コーラル、テラコッタ）にもよく合います。つまり、ベースカラーと競合せずにCTAやハイライトなどのコントラストを作りやすいということです。

印刷物では、ミディアムブルーは紙質や照明を問わず個性を保ちやすいです。適切なニュートラルカラーと組み合わせれば、レイアウトを引き締めてプロフェッショナルに保ちつつ、ダークブルーの重さを避けられます。

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

1）コースタルダッシュボード

HEX： #2f6fed #1b2a41 #eaf2ff #2bd4c7 #f6b73c

雰囲気： クリーン、さわやか、モダン

最適用途： 2D SaaS UIダッシュボード

自信を感じるブルーとエアリーなオフホワイトがバランス良く組み合わさり、潮風と日差しを浴びたスクリーンを思わせます。信頼感が必要な分析ダッシュボードやフィンテックツール、プロダクトページに最適です。ティールをアクティブステート、アンバーを特定の数値の強調として使いましょう。使用のコツ：最も濃いネイビーはテキストやサイドバー用に使い、コントラストとアクセシビリティを維持してください。

media.ioで生成したコースタルダッシュボードの画像例

Media.io

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

今すぐ無料で試す

2）ネオンマリーナ

HEX： #3a7bd5 #0b1020 #ff4fd8 #00e6ff #f5f7ff

雰囲気： 電気的、ナイトライフ、高コントラスト

最適用途： 音楽イベントポスターデザイン

深夜の港に光るネオンとシャープなブルーが組み合わさるイメージ。コントラスト重視なポスター、アルバムアート、SNSグラフィックに最適です。シアンとマゼンタを見出しのアクセントとして使い、タイポグラフィの周りはオフホワイトで抜け感を演出しましょう。使用のコツ：ネオンのエッジを和らげつつエネルギーを損なわない微細なグレインオーバーレイを加えても良いでしょう。

media.ioで生成したネオンマリーナの画像例

3）デニム＆デューン

HEX： #2d6cdf #6b7a90 #f2e6d8 #c97c5d #2a2a2a

雰囲気： 落ち着き、カジュアル、暖色と寒色のバランス

最適用途： ライフスタイルブランドのランディングページ

使い込まれたデニムと日差しを浴びた砂が、リラックス感と信頼感を演出します。ライフスタイル系サイトやルックブック、温かさと明瞭さを併せ持つエディトリアル向けランディングページに優秀です。背景セクションにはデューンクリームを使い、テラコッタはボタンやバッジに。使用のコツ：見出しは黒に近い色、本文はスレート系で高級感ある可読性を維持しましょう。

media.ioで生成したデニム＆デューンの画像例

4）サファイアオーチャード

HEX： #356ae6 #15304a #a8e6a3 #ffffff #ff6b6b

雰囲気： フレッシュ、楽観的、遊び心

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

フレッシュな果物と晴れ渡った空が明るく前向きな雰囲気を作ります。ウェルネス系オンボーディングや、ハビットトラッカー、ポジティブさが重要なSaaSフロー向き。グリーンは成功時、コーラルは主なアクションの強調色として活用を。使用のコツ：広い背景はホワイトに、ブルーは見出しやイラストの形で取り入れると視覚疲労を防げます。

media.ioで生成したサファイアオーチャードの画像例

5）クラウディコーンフラワー

HEX： #4a86e8 #d9e6ff #f7f8fb #9aa4b2 #7b5cff

雰囲気： ソフト、エアリー、やさしいテック感

最適用途： スタートアップのピッチデックスライド

雲に覆われたソフトな空とコーンフラワーのアクセントが落ち着きと集中感、ほんのり未来感を与えます。プロジェクターでも読みやすいピッチ資料・レポート・解説スライドに好適。ラベンダーはコールアウトや区切り線の第二アクセントに。使用のコツ：チャートは2種のブルーで、ヴァイオレットは記憶に残したいデータに使い分けましょう。

media.ioで生成したクラウディコーンフラワーの画像例

6）ミッドナイトプール

HEX： #2a66d9 #071a2b #1f9bd1 #e6eef7 #c8a2ff

雰囲気： ムーディ、スリーク、ナイト感

最適用途： ゲーミングチャンネルバナー

暗い水と反射する光が深夜のスリークな雰囲気を演出。このセットはゲーミングバナーや配信オーバーレイ、大胆なヒーローヘッダーにぴったり。インタラクティブな要素にはシアンを、読みやすいテキスト用には淡いグレーブルーを。使用のコツ：ロゴの背後にネイビー〜ブルーのぼかしグラデーションを加えると即座に立体感が出ます。

media.ioで生成したミッドナイトプールの画像例

7）エレクトリックブループリント

HEX： #2f76ff #0b1f3b #15d3ff #f4f8ff #ffcc33

雰囲気： テクニカル、エネルギッシュ、精密

最適用途： デベロッパードキュメントサイト

設計図の線と明るいLEDライトがテクニカルかつ自信のある印象を与える組み合わせ。分かりやすさが求められるドキュメントサイトやAPIポータル、ナレッジベースに特に良いです。シアンはリンク、イエローは注意や重要なノートのマークに。使用のコツ：コードブロックには深いネイビー、長文用には明るい背景で目の疲れ防止を。

media.ioで生成したエレクトリックブループリントの画像例

8）ブルーバードパステル

HEX： #5b8dff #ffe6f1 #fff8e1 #7de2d1 #2e3a59

雰囲気： スイート、フレンドリー、親しみやすい

最適用途： 子ども向け学習アプリUI

コットンキャンディのようなやわらかさとブルーバードの明るさでフレンドリーさと励ましを感じさせるパレット。キッズ学習UIや遊び心あるマイクロサイト、楽しいメールデザインにおすすめ。ミントは進行状況、ネイビーはラベル用とし、テキストのぼやけを防いで。使用のコツ：大きめのカラーブロックと丸い形を基本に、アイコンは絞りシンプルに保ちましょう。

media.ioで生成したブルーバードパステルの画像例

9）アーバントランジット

HEX： #2e6be0 #101820 #9fb3c8 #f2f4f7 #ff5a1f

雰囲気： 構造的、都市的、大胆なアクセント

最適用途：道案内サイネージシステム

市街地の路線、駅の地図、そしてきれいなタイプがここの気分を導きます。このミディアムブルーのカラーパレットは、道案内、公共の場に面した看板、遠くからでも読みやすい情報が多いレイアウトにぴったりです。オレンジ色を方向性アクセントとしてペアリングし、グレーをセカンダリデータとして残します。使用法のヒント: 厳しい照明の下で印刷物のコントラストをテストして、ネイビーとブルーが明確に保たれます。

media.ioを使って生成した都市交通の画像例

10) セラミックタイル

HEX：#3b74d8 #f9f4ee #2f3d4a #7aa6b2 #d98c6a

雰囲気：職人, 地中海料理, 魅力的

最適用途：レストランメニューデザイン

手描きのタイルと温かい粘土は、細工されたおもてなしの雰囲気を与えます。伝統とモダンなエッジを求めるメニュー、カフェのブランディング、パッケージに適しています。大きなフィールドにはクリームを使用し、セクションヘッダーと装飾的な境界線には青を使用します。使用法のヒント: アクセント テラコッタをプライス ドットやアイコンなどの小さな要素に留めて、パレットが洗練されたままにします。

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

11) 技術会議

HEX：#2f6fe6 #0f172a #e2e8f0 #22c55e #a78bfa

雰囲気：自信に満ちた、现代的な、スマート

最適用途：会議ウェブサイトのヘッダー

ステージライティングと鮮明なタイポグラフィが、自信に満ちたモダンなトーンを作り出しています。明確さと勢いを必要とする会議サイト、スピーカーページ、登録ファネルに最適です。グリーンとCTAを組み合わせ、タグやトラックラベルなどのセカンダリハイライトにバイオレットを使用します。使用法のヒント: ヘッダーの背景を暗くし、コンテンツ セクションにはライト グレーを使用して、ページの重い感じを避けます。

media.ioを使用して生成された技術会議の画像例

12) スカイラインポスター

HEX：#2d6ae3 #f8fafc #111827 #94a3b8 #f97316

雰囲気：大胆、グラフィック、現代的

最適用途：現代の旅行ポスター

明るい空を背景にしたさわやかなスカイラインシルエットが大胆で生々しく感じられます。クリーンでモダンなパンチが必要な旅行ポスター、都市ガイド、印刷広告に使用してください。太陽、ラベル、ルートラインなどの単一の焦点要素にオレンジをペアリングします。使用法のヒント: 影を最小限に抑え、平らな形状に頼って、青が構図の主役になります。

media.ioを使って生成したスカイラインポスターの画像例

13) オーシャニックミニマル

HEX：#3a80e6 #ffffff #e6eef8 #2b3a55 #00b3c6

雰囲気：ミニマル、落ち着いた、洗練された

最適用途：ブランドアイデンティティシステム

明るい水と白い空間は、すべてが洗練されていて信頼しやすいと感じます。このセットは、自粛がブランドの一部である ID システム、文房具、クリーンな Web サイトに適合します。ティールをペアリングして、アイコン、弾丸、リンクホバーなどの小さなシグネチャーモーメントを作成します。使用法のヒント: アセット全体で青を 1 つの主な色合いに制限して、web から印刷までの外観を一貫して保ちます。

media.ioを使って生成したoceanic minimalの画像例

14) レトロなアーケード

HEX：#2f6de0 #1a1033 #ff3d81 #20e3b2 #fef08a

雰囲気：レトロ、遊び心のある、パンチのある

最適用途：モバイルゲームのプロモーション広告

アーケードの輝きとピクセルのノスタルジアは、このパレットを楽しくて速く感じさせます。モバイルゲーム広告、ソーシャルプロモーション、色が話すべきパンチの効いたバナーに最適です。パワーアップにはピンク、セカンダリボタンやバッジにはミントを使用してください。使用法のヒント: 背景を濃い紫色に保ち、ブルーと明るい色が乱れずにポップになります。

media.ioを使って生成したレトロアーケードの画像例

15) ウィンタースポーツ

HEX：#2e6fe8 #0b1d39 #dbeafe #ffffff #ff2d55

雰囲気：さわやかで、運動能力が高く、エネルギーが高い

最適用途：スポーツウェア商品広告

冷たい空気と素早い動きが、さわやかなブルーとクリーンなホワイトで伝わってきます。スポーツウェア広告、パフォーマンスランディングページ、大胆な製品ハイライトに使用してください。パンチの効いたCTAカラーとしてホットピンクを組み合わせ、通気性のある間隔を空けるためにペールブルーをキープします。使用法のヒント: 製品の照明をニュートラルに保ち、青が真実と表示され、ティールに向かって移動しないようにします。

media.ioを使って生成したウィンタースポーツの画像例

16) 図書館社説

HEX：#3b78e0 #0f2a44 #f3f4f6 #c7d2fe #b45309

雰囲気：思慮深く、学術的で、洗練された

最適用途：雑誌の編集レイアウト

静かな書斎と紙のインクは、このセットに思慮深い編集的な雰囲気を与えています。雑誌のスプレッド、長文レポート、テキストの多いポートフォリオケーススタディに適しています。モノトーンな外観を避けるために、プル引用符やセクションマーカーに暖かい茶色を組み合わせます。使用法のヒント: 本文のテキストを深いネイビーに保ち、ライトグレーの余白を使用してコンテンツをきれいにフレーム化します。

media.ioを使って生成した図書館社説の画像例

17) ボタニカルブリーズ

HEX：#2f6ee6 #e7f7ef #2f855a #fef3c7 #1f2937

雰囲気：フレッシュ、ナチュラル、高揚感

最適用途：水彩植物イラスト

庭の葉から吹き抜けるさわやかな風は、軽くて自然で回復的な感じがします。これらのミディアムブルーの色の組み合わせは、ウェルネスのイラスト、エコパッケージのグラフィック、春のキャンペーンのビジュアルに最適です。ソフトクリームをペアリングしてネガティブなスペースを作り、キャプションやラベルにはチャコールを残します。使用法のヒント: 水彩画では、ハードな輪郭ではなく、ミントのエッジにブルーを染み込ませると、穏やかなグラデーションが得られます。

media.ioを使って生成したボタニカルブリーズの画像例

18) ラグジュアリーウォッチスタジオ

HEX：#2f6fe0 #0a0f1a #d1d5db #ffffff #cfa34a

雰囲気：ラグジュアリー、ドラマチック、ハイコントラスト

最適用途：高級時計 商品ショット

深い影と磨かれた金属は、プレミアムで映画のような気分を与えます。高級製品のページ、ジュエリー広告、コントラストが品質を販売するハイエンドパッケージに最適です。ゴールドを抑制されたハイライトとして組み合わせ、ほとんどの表面を黒、白、スチールグレーに保ちます。使用法のヒント: リム ライトまたは背景のグラデーションとして青を使用して、スポーティではなく洗練された読み方をします。

media.ioを使って生成した高級時計スタジオの画像例

19) 受信トレイの明瞭さ

HEX：#3a7ee6 #f8fafc #e2e8f0 #334155 #f59e0b

雰囲気：明確、効率的、フレンドリー

最適用途：メールニュースレターテンプレート

明確なヘッダーと整頓されたセクションは、整理された受信トレイのように感じます。このセットは、どの画面でもよく読む必要があるニュースレター、製品更新メール、発表テンプレートに最適です。ラベル、タグ、または単一のボタンなどの小さな強調のために琥珀色をペアリングします。使用法のヒント: 長いコピーを白に保管し、ミディアムブルーは大きなブロックではなく、階層にのみ使用します。

media.io を使用して生成された受信トレイの明瞭さの画像例

20) ミュージアムカタログ

HEX：#2d6de6 #0f172a #f1f5f9 #64748b #ef4444

雰囲気：厳選され、静かで、権威ある

最適用途：展覧会カタログ表紙

厳選されたギャラリーと鮮明なキャプションは、静かで権威ある雰囲気を生み出します。カタログ表紙、博物館プログラム、文化イベントの担保に最適です。日付スタンプや展示タイトルなどの単一のスポットライト要素に赤をペアリングします。使用法のヒント: パレットをほとんど中立に保ち、青を使用して画像をフレーム化し、読書順序を導きます。

media.ioを使って作成した博物館カタログの画像例

21) ナイトマーケット

HEX：#2f6be6 #111827 #f472b6 #fbbf24 #e5e7eb

雰囲気：活気があり、都会的で、魅力的です

最適用途：ストリートフードチラシ

街灯、看板、深夜の軽食が活気に満ちていて魅力的です。これらのミディアムブルーの色の組み合わせは、混沌とせずにエネルギーを必要とするチラシ、ポップアップイベントグラフィック、ソーシャル投稿に適しています。価格設定とハイライトには黄色を組み合わせ、遊び心のあるアイコンやヘッダーにはピンクを使用します。使用法のヒント: メッセージを読みやすくするために、背景を暗くし、明るいアクセントを 2 つの重要な領域に制限します。

media.ioを使って生成した夜市の画像例

22) ソフトグラデーションウェブ

HEX：#3a7ae6 #b9d3ff #ffffff #2b3448 #ff7a59

雰囲気：暖かく、モダンで、親しみやすい

最適用途：マーケティングホームページヒーロー

柔らかいグラデーションとフレンドリーなコントラストが、ページを暖かくモダンに感じさせます。歓迎的な第一印象を与えたいマーケティング ヒーロー、特集セクション、サインアップ ページに使用してください。プライマリボタンにはコーラルをペアリングし、ナビゲーションと見出しにはダークスレートを保持します。使用法のヒント: 水色を大きな背景グラデーションとして適用し、主要なUIコンポーネントのメインブルーを維持します。

media.ioを使って生成したソフトグラデーションwebの画像例

ミディアムブルーと相性の良い色は？

ミディアムブルーは、白、オフホワイト、ライトグレーブルーなどのクリーンなニュートラルと簡単に組み合わせることで、風通しがよく読みやすい感じになります。テキストと構造の場合、ディープネイビーまたはチャコールは、厳しくなることなくコントラストを強く保ちます。

アクセントとしては、アンバー、コーラル、オレンジなどの暖かい色合いが、ボタン、価格、バッジの即座の焦点を作成します。クールなポップな雰囲気をお好みの場合は、ティール/シアンが同じオーシャニック ファミリーに留まりながら「アクティブな」エネルギーを加えます。

よりユニークなひねりを加えるには、バイオレットやラベンダーを二次的なハイライトとして試してみてください。モダンで少し未来的な雰囲気を加えながら、ミディアムブルーで磨かれたように見えます。

実際のデザインでミディアムブルーカラーパレットを使う方法

まず、medium blue がシステムで何をするかを決定します: プライマリ ブランド カラー、UI プライマリ アクション、または背景フレーミング。次に、ほとんどの表面にニュートラルを使用して、青が圧倒的ではなく意図的に読み取られるようにします。

CTA ボタン、主要な統計、ラベルなどの「注意の瞬間」に温かいアクセントを 1 つ確保してください。アクセントを制限すると、階層が明確になり、パレットがノイズを感じるのを防ぎます。

最後に、特に小さいテキストやUIの状態（ホバー、アクティブ、無効）に対して、コントラストを早めにテストしましょう。ミディアムブルーは画面や印刷によって見え方が異なることがあるため、素早く確認することでデザインの一貫性を保てます。

AIでミディアムブルーパレットのビジュアルを作成

これらのパレットを実際に見たい場合は、AIでマッチしたモックアップやグラフィックを生成できます。各パレットの下にプロンプトが掲載されているので、デッキやランディングページ、ポスター用の一貫性あるビジュアルをすぐに作成できます。

最良の結果を得るためには、すべてのプロンプトで同じ5つのHEXコードを使用し、レイアウトスタイル（2D UI、ポスター、カタログ表紙）を指定し、提供された--ar設定でアスペクト比を固定してください。

気に入った雰囲気を見つけたら、少数のバリエーション（異なる構成、同じパレット）を作成することで、ブランドやキャンペーンのセットを素早く構築できます。

次： ジャングルグリーン配色パレット