ホワイト・ブルー・グレー配色アイデア20選【HEXコード付き】

ホワイト・ブルー・グレーのカラーパレットは、クリーンなインターフェース、落ち着いたブランディング、モダンな空間に最適な定番配色です。ホワイトはレイアウトに余白感を与え、ブルーは明快さと信頼感を加え、グレーは視覚のノイズを抑えつつ構造を提供します。

以下に、HEXコード付きで厳選したホワイト・ブルー・グレーのカラーパターン20選と、便利な活用例やAIプロンプトをまとめました。これらを応用してビジュアル生成にもご活用いただけます。

ホワイト・ブルー・グレーのパレットがうまくいく理由

ホワイト・ブルー・グレーのトーンは読みやすく、ホワイトがコントラストの空間を、グレーが文字や区切りに、ブルーが温かみの強い色より控えめな注目を与えます。そのバランスで、最小限の要素だけでも「デザインされた」印象を自然に与えられます。

ブルーはまた、信頼・明快さを強く表現するため、UIやヘルスケア、金融、生産性ツールによく使われます。グレーニュートラルと組み合わせると、全体が遊び心よりもプロフェッショナルな印象になります。

さらに重要なのは、これらのパレットは拡張性があることです。最小限のミニマル配色にも、高コントラストなヒーローセクションや見出しのためにブルーやチャコールを深めたプレミアム感にも対応できます。

20選＋ ホワイト・ブルー・グレーのカラーパレット例（HEXコード付）

1）アークティック・ミニマル

HEX： #ffffff #e9eef3 #b7c6d6 #4a7fb0 #2b3642

雰囲気： クリア、モダン、開放感

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

澄んだ雪と晴天のようなクリーンな印象で、インターフェースを軽やかに見せつつ冷たすぎません。コントラストや読みやすさが重視されるダッシュボードや管理画面に最適です。アクセントにライムやアンバーなど明るい色を1色だけ加えると効果的。使用のコツ：一番濃いグレーは文字用だけにし、大きな色ブロックを避けましょう。

media.ioで生成されたアークティック・ミニマルのイメージ例

Media.io

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

今すぐ無料で試す

2）コースタル・フォグ

HEX： #fbfdff #dfe8f2 #9fb6cc #3e6f98 #5a616b

雰囲気：落ち着き、沿岸、控えめ

最適用途：Webサイトのヒーローやランディングページ

静かな海辺の霧や穏やかな水平線のブルーが、ゆったりとした高級感を演出します。ランディングページやポートフォリオ、落ち着いた自信を感じさせるコンサルティングブランドによく合います。写真にはサンドやリネンのような暖色系ニュートラルも加えて、寒色の冷たさを和らげましょう。使用のコツ：中間のブルーをCTAに、背景はほぼ白でスピード感＆明快さを重視。

media.ioで生成されたコースタル・フォグのイメージ例

3）スチールハーバー

HEX： #f6f8fb #cfd8e3 #7f96ab #2f5f88 #1f2a33

雰囲気：工業的、安定、自信

最適用途：B2Bブランドアイデンティティ

夜明けの作業港のように安定感と実直さを感じるトーンです。B2Bのアイデンティティシステムでは、白の余白がプロらしさを保ち、濃いブルーが権威を加えます。メタリックなシルバーフォイルや控えめなクローム効果など、ワンポイントの金属アクセントが特に映えます。使用のコツ：グラデーションは控えめに、フラットな色面でメリハリを。

media.ioで生成されたスチールハーバーのイメージ例

4）ノルディックオフィス

HEX： #ffffff #eef2f6 #c0c7cf #6b8fb2 #3a424c

雰囲気：クリーン、実用的、整然

最適用途：プレゼンテーション用スライド

北欧オフィスのような清潔感で、ニュートラルは内容を整理しやすく、ブルーは階層構造を支えます。社内資料や投資家向けのアップデートなど構造が大切な用途に最適。シンプルなアイコンとたっぷりの余白でシャープな印象に。使用のコツ：ブルーは見出しや重要数値に限定し、長文には使わないように。

media.ioで生成されたノルディックオフィスのイメージ例

5）グレイシャーUI

HEX： #fdfefe #e6f0fb #b8d2ee #3d78c2 #2d3440

雰囲気：フレッシュ、テック感、前向き

最適用途：モバイルアプリUI画面

氷河の光をイメージしたフレッシュなテック感があり、活気がありつつも落ち着きます。モバイルアプリやオンボーディング、設定画面など、親しみやすい明快さが必要なシーンにピッタリ。ラウンドパーツや微妙な影で優しい雰囲気に。使用のコツ：一番濃いグレーを本文の文字色に、明るいブルーはアクティブ状態だけに使用。

media.ioで生成されたグレイシャーUIのイメージ例

6）スレートリネン

HEX： #fafbfc #e3e6ea #a8b0b9 #5d7893 #2e333a

雰囲気：ソフト、均整、上品

最適用途：エディトリアルレポートのレイアウト

スレートにリネンを合わせたような静かな高級感。年次報告書や長文PDF、雑誌系レイアウトなど、可読性重視のシーンにおすすめ。セリフ書体の見出しやモノクロ写真で仕上げると洗練感が高まります。使用のコツ：背景はオフホワイトに、中間グレーは罫線や表、キャプション用途に使用。

media.ioで生成されたスレートリネンのイメージ例

7）レイニー・スカイライン

HEX： #f7fbff #d7e2ee #8ea3b8 #2e5f8f #3c4450

雰囲気：ムーディー、都会的、スマート

最適用途：クリエイティブスタジオのWebサイト

雨の街のスカイラインのようにムーディーで都会的。スタジオサイトやケーススタディ、写真重視のポートフォリオにぴったりです。太めタイポグラフィや白黒写真でエディトリアルな雰囲気に。使用のコツ：細いブルーの下線や区切りで長いページでも視線誘導がしやすくなります。

media.ioで生成されたレイニー・スカイラインのイメージ例

8）インク＆スノウ

HEX： #ffffff #e8edf4 #c5ced8 #2a6aa6 #1b2430

雰囲気：高コントラスト、シャープ、集中

最適用途：ログイン・認証UI

新雪の上のインクのようにシャープでメリハリのある配色。ログインやアカウント設定、セキュリティ重視のシーンで信頼性・可読性があります。シンプルなフォームや十分なパディング、最小限の影でクリーンさを強調。使用のコツ：一番濃い色はラベルやエラー用途、ブルーはプライマリーアクション専用に。

media.ioで生成されたインク＆スノウのイメージ例

9）クラウドバースト ブランド

HEX： #f9fcff #d9e9f9 #94b2cf #3b74ad #4b525d

雰囲気：明るく、信頼、親しみ

最適用途：テック系サービスのSNS広告

雨上がりの空が明るく広がるような、親しみやすさと信頼感を与えるトーンです。SNS広告やバナー、キャンペーンで素早く可読性を高めたいときに◎。コーラルやゴールドのような温かいハイライト色と組み合わればクリックを促進。使用のコツ：テキストは白に近い背景で、濃いブルーをボタンや主要メリット強調に。

media.ioで生成されたCloudburstブランドの画像例

10）マリンコンクリート

HEX： #f5f7fa #d0d6dd #9aa4af #356a9a #2a2f36

雰囲気：堅実、現実的、モダン

最適用途：スキンケア製品のパッケージデザイン

マリンコンクリートのように堅実で現実的なこのクールなニュートラルカラーは、モダンでクリーンな印象を与えます。臨床的で高級感のある雰囲気を出したいパッケージに最適ですが、冷たい印象にはなりません。マットな仕上げやミニマルなラインアイコンと組み合わせ、温かみを加えるためにソフトタッチラベルを検討しましょう。使用アドバイス：最も強いブルーは小さなシールやバッジに使い、質の高さを演出しましょう。

media.ioで生成されたマリンコンクリートの画像例

11）パウダーデニム

HEX： #ffffff #eef5fb #c6d9ea #5a86b8 #39424e

雰囲気：ソフト、カジュアル、親しみやすい

最適用途：ニュースレターのテンプレートデザイン

使い古したデニムや清潔なコットンのようにソフトで親しみやすいミックスは、読みやすくフレンドリーな印象を与えます。ニュースレターや製品アップデート、コミュニティのお知らせに最適で、分かりやすさ重視の場面におすすめです。丸みのあるボタンやシンプルなイラストと組み合わせて、歓迎感を演出しましょう。使用アドバイス：本文のテキストはチャコールグレー、セクション見出しには中間ブルーを使ってスキャンしやすくしましょう。

media.ioで生成されたパウダーデニムの画像例

12）ウィンターセラミック

HEX： #fbfbfd #e1e8ef #b0bccc #3f6f9e #2f3844

雰囲気：磨き上げられた、落ち着いた、プロフェッショナル

最適用途：医療クリニック用パンフレット

ウィンターセラミックのようにクリーンで落ち着いた色合いは、衛生的で安心感を与えます。ホワイト・ブルー・グレーの配色は信頼と分かりやすさが重要な医療用パンフレットやクリニックの案内、患者ポータルなどに適しています。余白を十分に取り、シンプルなピクトグラムと組み合わせることで情報が消化しやすくなります。使用アドバイス：クールなパレットとのバランスを取るために温かみのある肌トーン写真を選びましょう。

media.ioで生成されたウィンターセラミックの画像例

13）シルバーブループリント

HEX： #f8fbff #dbe6f2 #a5b7c9 #2f6ea5 #2b3138

雰囲気：テクニカル、精密、自信

最適用途：建築提案デッキ

シルバーブループリントのように技術的で精密なパレットは、構造化されたレイアウトや詳細な図面に最適です。提案書、ピッチデッキ、仕様書など正確さが求められる場面で、エレガントな印象を与えます。細いラインワークやグリッドベースのスペーシングと組み合わせると、統一感のあるエンジニアリング的な見た目になります。使用アドバイス：図面は2色でまとめ、深いブルーはコールアウトに使いましょう。

media.ioで生成されたシルバーブループリントの画像例

14）クリスプクリニック

HEX： #ffffff #edf3f8 #c9d4df #4c7fb3 #3a3f47

雰囲気：清潔、安全、安心感

最適用途：医療ポータルUI

無菌で安心感のあるクリーンな診察室のような色合いは、重要な情報がすぐに見つけやすくなります。患者ポータルや予約フロー、検査結果ページなど、落ち着きが重要な場面に最適です。緑やアンバーなど、結果のステータス色はバッジに限定して使いましょう。使用アドバイス：重いカードシャドウではなく、控えめなグレーボーダーを使い、UIをクリーンに仕上げましょう。

media.ioで生成されたクリスプクリニックの画像例

15）ミッドナイトアイス

HEX： #f7fbff #d3e2f1 #90aed0 #245f98 #1a1f27

雰囲気：ドラマティック、洗練、プレミアム

最適用途：サイバーセキュリティランディングページ

ミッドナイトアイスのようにドラマティックでプレミアム感のある深い色合いが重みをもたらし、淡いブルーがクリーンさを保ちます。サイバーセキュリティやフィンテック、エンタープライズ製品など自信が求められる場面に適しています。高コントラストの見出しや控えめなグローエフェクトを使うと効果的。使用アドバイス：大きなダーク部分は避け、ヒーローエリアやフッターのアンカーとして使いましょう。

media.ioで生成されたミッドナイトアイスの画像例

16）ソフトグラファイト

HEX： #fcfdff #e7eaee #b3b9c1 #4a7aa4 #2c323a

雰囲気：静か、大人、万能

最適用途：プロフェッショナルな履歴書テンプレート

明るい紙の上のソフトグラファイトのように静かで成熟したパレットは、落ち着きがありながら派手にならず洗練されています。履歴書やCV、個人用ワンページなど、タイポグラフィがデザインの中心となる場面に最適です。細めのブルーラインと十分な余白を確保することで、モダンな仕上がりになります。使用アドバイス：見出しにはブルー、本文にはグラファイトを使い、読みやすさを向上させましょう。

media.ioで生成されたソフトグラファイトの画像例

17）ブルージェイニュートラル

HEX： #ffffff #eef1f5 #c2cbd4 #3b6fa8 #444a52

雰囲気：フレッシュ、バランス、信頼感

最適用途：不動産用パンフレット

冬の枝に止まるブルージェイのようにフレッシュで信頼できる色合いはクリーンで信用できます。ホワイト・ブルー・グレーの組み合わせは、特に不動産のパンフレット、物件リスト、地域ガイドに最適です。写真には温かみのある木やベージュのアクセントを加えると招待感がアップします。使用アドバイス：ブルーはセクションタブや地図のハイライトに使い、直感的なナビゲーションを実現しましょう。

media.ioで生成されたブルージェイニュートラルの画像例

18）フロステッドメトロ

HEX： #f9fbfc #dee5ea #a1adb7 #4f7ea9 #2a3037

雰囲気：都市的、クール、効率的

最適用途：交通アプリUI

フロステッドメトロウィンドウのように都市的で効率的なこのセットは、クールで整理されており目に優しい印象です。交通アプリやスケジューリングツール、マップが主要な体験に最適です。ルートラインには鮮やかなアクセントを加え、重要な情報を際立たせましょう。使用アドバイス：地図のベースは明るく、ラベルにはダークグレーを使い、視覚的な混雑を避けましょう。

media.ioで生成されたフロステッドメトロの画像例

19）カームオブザーバトリー

HEX： #ffffff #e5edf6 #b1c3d6 #3f73a6 #2f3640

雰囲気：思慮深い、静か、洗練

最適用途：データビジュアルダッシュボード

カームオブザーバトリーのように思慮深く静かな色合いは、集中しやすく丁寧な読み取りをサポートします。データ可視化ダッシュボードや研究ポータル、KPIページなど、分かりやすさ重視の場面に最適です。チャートの色を統一し、彩度を抑えることで、トレンドを比較しやすくなります。使用アドバイス：淡いグレーのグリッド線を使い、最も強いブルーは主要シリーズで使いましょう。

media.ioで生成されたカームオブザーバトリーの画像例

20）ペーパーノーティカル

HEX： #fbfeff #e2edf7 #c3d6e8 #2f6fae #3b4047

雰囲気：明るい、海の雰囲気、エディトリアル

最適用途：結婚式招待状セット

清潔な紙や海の空気のように明るく海を感じさせるホワイト・ブルー・グレーのパレットは、タイムレスでエレガントな印象です。招待状セットや正式な案内、ミニマルなステーショナリーにおすすめです。テクスチャペーパーや細いグレーラインと組み合わせて、洗練されたデザインを保ちましょう。使用アドバイス：ブルーは名前やモノグラムのアクセントに控えめに使い、余白の効果を活かしましょう。

media.ioで生成されたペーパーノーティカルの画像例

ホワイト・ブルー・グレーに相性の良い色は？

ブルーグレーニュートラルの冷たさのバランスには、温かみのあるアクセント（コーラル、ピーチ、アンバー、控えめなゴールド）が最も簡単です。CTAやバッジ、ハイライトの鮮明な焦点を作るのに使いましょう。

静かな印象にしたい場合は、ホワイト・ブルー・グレーの色合いにベージュ、サンド、リネン、温かみのあるトープなど柔らかいニュートラルを画像や背景に組み合わせましょう。ミニマルなパレットを保ちつつ、人間らしさが加わります。

シャープで技術的なスタイルが欲しい場合は、ブラックアクセントや明るいエレクトリックシアンを少量足すと効果的です。彩度は控えめにし、ベースパレットのクリーンさと一貫性を守りましょう。

ホワイト・ブルー・グレーのカラーパレットを実際のデザインで活用する方法

まず役割を割り当てましょう：背景にはホワイト/オフホワイト、表面やディバイダーにはライトグレー、二次テキストにはミディアムグレー、インタラクティブな状態にはブルー、主要タイポグラフィにはダークチャコール。これで階層が即座に生まれ、迷いが減ります。

UIでは最も強いブルーを「アクション」（プライマリーボタン、アクティブタブ、選択状態）に使い、ニュートラルをメインにして落ち着いたインターフェースを維持しましょう。ブランディングではブルーをシグネチャーカラーとし、グレーがレイアウトやグリッド、パッケージコピーを支えます。

インテリアやプレゼンデザインでは、白をキャンバス、グレーを構造（枠、チャート、テーブル）、ブルーをリズム（見出し、コールアウト、アクセント）として使いましょう。結果としてモダンで冷たすぎない印象になります。

AIでホワイト・ブルー・グレー配色のビジュアルを作成する

ブランド用のモックアップを速く作りたい場合は、同じパレットと再利用可能なプロンプト形式で一貫したビジュアルを生成しましょう。ランディングページやダッシュボードコンセプト、パンフレット、SNS広告バリエーションに特に便利です。

Media.ioを使えば、アイデアを数分で洗練された画像に変換できます。その後、「ベスト用途」（アプリUI、ブランドボード、パンフレット）を入れ替えつつ、同じホワイト・ブルー・グレー配色を継続できます。

次へ： ピーチコーラルカラー パレット