モダンなホワイト×ブルー配色20選・カラーパレットとHEXコード

白と青はモダンクラシックです：白はレイアウトを清潔で呼吸しやすく保ち、青は信頼感、集中力、構造を加えます。

以下はブランド、UI、インテリア、印刷向けに厳選したHEXコード付きのホワイトブルーカラーパレット20選と、マッチするビジュアルを生成するために再利用できるAIプロンプトです。

ホワイトブルーパレットがなぜ優れているのか

ホワイトブルーパレットは、鮮明さと自信のバランスが取れているので「デザインされた」印象を即座に与えます。白はコンテンツにスペースを作り、青はナビゲーションやデータ、アクションの誘導に自然と注目を集めます。

メディアを問わず柔軟です。画面では淡いブルーが眩しさを抑え、インターフェースを穏やかに保ちます。印刷では濃いネイビーやロイヤルブルーがコントラストを加えつつ、荒々しさや雑さを感じさせません。

最も重要なのは、青が信頼感と読みやすさを支えることです。階層には濃いブルーを使い、表面には明るいブルーを用いることで、ランディングページからブランドキットまで拡張できるクリーンなシステムが構築できます。

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

1）アークティックリネン

HEX： #ffffff #eaf3ff #cfe6ff #5aa7ff #1b3a6b

雰囲気： シャープ、清潔、落ち着き

最適： アナリティクスダッシュボードやデータ中心UI

シャープで空気感のある、この氷のような白とクリアなブルーは、明るい冬空の新雪のような雰囲気です。明るい色味は画面の視認性を保ち、濃いネイビーがチャートやナビゲーションの構造を強化します。クールグレーやアンバー単色など暖色をアクセントに組み合わせましょう。使い方のコツ：最も濃いブルーは主要アクションに使い、階層を維持してください。

media.ioによるアークティックリネンの画像例

Media.io

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

無料で今すぐ試す

2）コースタルポーセリン

HEX： #fdfdfc #e7f2f8 #b7d7ee #2f7fbf #0b2d4a

雰囲気： さわやか、洗練、沿岸風

最適： リゾートブランドやホスピタリティ系サイト

さわやかで洗練され、このカラーミックスは釉薬のかかった磁器や海霧、深い港の水を思わせます。淡いパステルと濃いアンカーブルーのコントラストがロゴやヘッダーを際立たせます。バリエーションとして、砂色・流木のブラウン・ブラッシュドブラスを補助要素に加えてみてください。使い方のコツ：中間ブルーはセカンダリーボタンに、最も濃い色はブランドマークに使いましょう。

media.ioによるコースタルポーセリンの画像例

3）クラウディマリーナ

HEX： #f8fbff #d9ecff #9bc8ff #3b78c8 #1a2340

雰囲気： 新鮮、モダン、楽観的

最適： アプリのオンボーディングや機能説明

新鮮で楽観的なこのトーンは、晴れたマリーナに雲が晴れていくような感覚です。淡いレイヤーはオンボーディング画面に柔らかな奥行きを作り、濃いブルーが自信あるアクションをサポートします。シャープな印象を保つにはチャコールのタイポグラフィと繊細なラインアイコンを合わせましょう。使い方のコツ：グラデーションは最小限に、中間ブルーを強調してください。

media.ioによるクラウディマリーナの画像例

4）フロステッドデニム

HEX： #fffefe #eef2f6 #b6c7d6 #4b6f93 #1e2a3a

雰囲気： 落ち着き、控えめ、クラシック

最適： アパレルルックブックやライフスタイルエディトリアル

控えめで落ち着きのあるこの色味は、ウォッシュデニムや柔らかなコットン、涼しい夕暮れの影を思わせます。くすみブルーは成熟した印象で、商品写真やエディトリアルレイアウトに一体感を与えます。オフブラックテキストや暖かいタンレザー、シルバーアクセントと組み合わせるのもおすすめ。使い方のコツ：中間スレートブルーはキャプションや仕切りに使い、強いコントラストを避けましょう。

media.ioによるフロステッドデニムの画像例

5）セイルクロススカイ

HEX： #ffffff #f0f7ff #a9d2ff #3f8bd9 #063a6b

雰囲気： 明るい、マリン、祝祭感

最適： ウェディング招待状やサマーイベントスイート

明るく祝祭感のあるパレットは、陽射しの中のセイルクロスと澄んだ空を思わせます。ライトブルーは紙面の空気感を保ち、濃いブルーが名前や大事な情報にフォーマルさを加えます。シャープな黒のタイポグラフィやメタリックフォイルと合わせると、格上げされた招待状に。使い方のコツ：最も濃いブルーはヘッダーに残し、本文は柔らかく読みやすくします。

media.ioによるセイルクロススカイの画像例

6）ミニマルクリニック

HEX： #ffffff #f5f9ff #d6e6ff #6aa5e8 #2a4e7a

雰囲気： 安心感、衛生的、フレンドリー

最適： ヘルスケアランディングページや患者ポータル

安心感と衛生感のあるクリーンな色味は、日光や明瞭さ、穏やかな日常を連想させます。やさしい中間ブルーは信頼感を与えつつビジネスライクになりすぎず、濃いスチールブルーはナビゲーションを明確にします。このホワイトブルーカラーはゆとりのある余白、丸みのあるカード、シンプルなアイコンとの相性が抜群です。使い方のコツ：主要なボタンだけ彩度を高くし、フォームの圧迫感を和らげてください。

media.ioによるミニマルクリニックの画像例

7）ノルディックスパ

HEX： #fbfeff #e3f3ff #b9dbf3 #4aa3c7 #1b4a5f

雰囲気： 穏やか、空気感、リフレッシュ

最適： スパのパンフレットやウェルネスブランド資料

穏やかでリフレッシュ感のあるこの色味は、蒸気やミネラルウォーター、冷たい石を思わせます。シーグラスブルーは大きな背景ブロックにも使えるやさしさがあり、濃いティールブルーが安定感を与えます。やわらかなニュートラルやユーカリグリーン、ミニマルな写真と合わせて落ち着いたリズムを作りましょう。使い方のコツ：最も淡いブルーは引用やメリットの背景に使い、静かな集中を演出します。

media.ioによるノルディックスパの画像例

8）ブループリントチョーク

HEX： #fcfcff #e4e7f5 #b3b9d6 #3e4a7a #141a33

雰囲気： スマート、テクニカル、構造的

最適： 建築デッキや技術系プレゼン資料

スマートでテクニカルなセットは、ブループリント紙上のチョークダストのような雰囲気です。クールなバイオレットブルーの下地がスライドに洗練を加え、ほぼ黒のネイビーが図やコールアウトを支えます。細いラインイラストや十分な余白で複雑な内容も消化しやすく。使い方のコツ：中間カラーはグリッドラインに、最も濃い色はラベルのみに使いましょう。

media.ioによるブループリントチョークの画像例

9）アイスアイリス

HEX： #ffffff #f2efff #d6d1ff #6c86ff #2a2e5a

雰囲気： 夢見心地、楽しい、優しい

最適： キッズステーショナリーや軽いイラストプロジェクト

夢見心地で楽しいこのシャドウは、凍った花びらや柔らかな黄昏を思わせます。ライラック系の明るい色はクリーンなベースの鮮度を損なわず可愛らしさを加えます。丸みのあるフォントやシンプルな落書き、ほのかなバターイエローを暖かみとして組み合わせてください。使い方のコツ：最も明るいペリウィンクルは小さなハイライトに使い、甘さを際立たせてください。

media.ioで生成されたアイスアイリスの画像例

10）グレイシャースレート

HEX： #f7fbff #e0ecf6 #9fb7c8 #3e5f78 #132a3a

雰囲気： 真面目、落ち着き、信頼感

最適： 年次報告書・財務資料

真面目で信頼できるこのクールなスレートカラーは、静かな水面の朝のような落ち着きを感じさせます。グレーがかったブルーの中間色は、ページを圧迫せず表やグラフに権威を与えます。クリーンなサンセリフ書体や控えめな罫線と合わせると一覧性が上がります。使い方のコツ：最も淡い色を表の行に使うと、データが際立ちます。

media.ioで生成されたグレイシャースレートの画像例

11）コバルトペーパー

HEX： #ffffff #e8f1ff #c1d6ff #2b5bff #0f1e52

雰囲気： 大胆、デジタル、高コントラスト

最適： SaaSランディングページ・コンバージョンセクション

大胆でデジタル感のあるこの色彩は、新しい紙に印刷した明るいインクのようです。コバルトの鮮やかな色はCTAに最適で、淡い色合いでセクションが広くモダンに見えます。グラファイト文字、微妙なシャドウ、シンプルなグラデーションとの相性も抜群です。使い方のコツ：コバルトを唯一の鮮やかな色にしてコンバージョンの集中を守りましょう。

media.ioで生成されたコバルトペーパーの画像例

12）パウダーブルーウェディング

HEX： #fffdfc #f2f8ff #d2e6ff #7bb2e6 #2f5c8a

雰囲気： ロマンチック、やわらかい、エアリー

最適： ウェディング写真のブランディング・ギャラリー

ロマンチックで軽やかなパウダーブルーは、透けるカーテン越しの朝の光のよう。中間の淡いブルーが優雅で誌面らしい雰囲気を保ちつつ、ナビゲーションにも十分なコントラストをもたらします。温かみのあるアイボリー、控えめなピンク／ブラッシュ、繊細なセリフ書体と合わせるとタイムレスな印象に。使い方のコツ：画像グリッド背景に最も淡い色を使い視覚ノイズを抑えましょう。

media.ioで生成されたパウダーブルーウェディングの画像例

13）テック・オン・ホワイト

HEX： #ffffff #f2f6ff #c9d7ff #6b8cff #1c2a5a

雰囲気： スマート、効率的、モダン

最適： 生産性ツール・管理パネル

スマートで効率的なこの配色は、磨かれたガラスやクリアなシステムパネルを連想させます。中間ブルーはインタラクティブな状態に最適で、濃いインディゴがサイドバーやヘッダーを引き締めます。無彩色のグレーや統一スペースでインターフェースを読みやすく。使い方のコツ：最も薄いブルーをホバー時のウォッシュに使い、反応を伝えつつ煩雑さを抑えましょう。

media.ioで生成されたテック・オン・ホワイトの画像例

14）ハーバーフォグ

HEX： #f9fcff #d8e6f0 #a8c1d1 #4a7c9c #103048

雰囲気： ムーディ、沿岸、成熟

最適： アウトドア用品パッケージ・吊り下げタグ

ムーディでコースタルなこのブルーは、静かな桟橋に霧がかかる様子を思わせます。グレーがかった中間色がタフで信頼感のある雰囲気を与え、技術的な商品や明快なラベルに最適です。クラフト素材、マットブラック、安全オレンジと合わせると実用的な印象に。使い方のコツ：テクスチャ用紙でも可読性を保つため、小さな文字は最も濃い色で印刷しましょう。

media.ioで生成されたハーバーフォグの画像例

15）フレンチブルーインク

HEX： #fffffe #edf3ff #a9c4ff #2a4fb3 #0f1733

雰囲気： 文学的、エレガント、自信

最適： 本の表紙・誌面グラフィック

文学的かつエレガントなこの色合いは、厚手のコットンペーパーに万年筆インクで書いたような雰囲気を持ちます。力強いロイヤルブルーで鮮烈な焦点を、淡い色合いで誌面に空気感と高級感を。クリーム色の用紙や金箔、クラシックなセリフ体との組み合わせが美しく映えます。使い方のコツ：最も濃紺の色をタイトルに使うと、サムネイルでも瞬時に可読性を保てます。

media.ioで生成されたフレンチブルーインクの画像例

16）セラミックブルー

HEX： #ffffff #f3f7fb #d0e0f0 #6a97c9 #244a73

雰囲気： 温かみ、整然、安心感

最適： ホームデコ商品広告・カタログ

家庭的で整然としたこのカラーパレットは、釉薬のかかったセラミックや整った棚、穏やかなキッチンの昼光を思わせます。淡いブルーが商品写真を引き立て、補足テキストも軽やかに保ちます。温かい木の質感、リネンのテクスチャー、アクセントにごく少しテラコッタを。使い方のコツ：プライスタグの下地に淡い色を使い、派手すぎず目立たせましょう。

media.ioで生成されたセラミックブルーの画像例

17）スノーアトランティック

HEX： #f8fbff #e2f1ff #b9dcff #5d9fe6 #1d3f73

雰囲気： フレッシュ、冒険的、オープン

最適： 旅行ポスター・観光キャンペーン

フレッシュで開放感あふれる色合いは、雪の海岸や明るい大西洋の波を思い起こさせます。生き生きとしたブルーは見出しにぴったり、淡い色合いは背景を広々と清潔に見せます。ミニマルな写真のブロック、シンプルな地図線、アクセントにコーラルを合わせて。使い方のコツ：中間ブルーを副次テキストに、ネイビーはタイトル専用に使い分けましょう。

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

18）ソフトスチールブルー

HEX： #ffffff #f0f4f8 #c5d1db #7992a8 #2b3e4f

雰囲気： プロフェッショナル、バランス、低ノイズ

最適： 企業向けスライドテンプレート・レポート

プロフェッショナルでノイズの少ないこのスチールブルーは、明るい昼光の仕立ての良いスーツのような印象。落ち着いたトーンは長い資料も読みやすく、モダンで目的意識を持った印象をキープします。モノクロアイコン、整然としたグリッド、重要指標だけアクセントカラーを。使い方のコツ：中程度のスチールカラーでグラフ作ると、プレゼンでビジュアルが飽和しすぎません。

media.ioで生成されたソフトスチールブルーの画像例

19）ブライトシアンブリーズ

HEX： #ffffff #e9fbff #bdf1ff #3cc7e8 #115166

雰囲気： エネルギッシュ、フレッシュ、清潔感

最適： スキンケアパッケージ・新商品発表

エネルギッシュでクリーンなこの配色は、水しぶきや澄んだ空気のようなさわやかさ。鮮やかなシアンがモダンでクリニカルな輝きを、濃いティールが読める＆高級感を両立。ミニマルなサンセリフ書体やたっぷりの白を合わせて衛生的に。使い方のコツ：シアンは1本のバンドかキャップだけに使い、商品名が埋もれないように。

media.ioで生成されたブライトシアンブリーズの画像例

20）ロイヤルネイビートリム

HEX： #fffefe #ecf2ff #c0d0ff #4b6fe0 #0b1738

雰囲気： 自信、スポーティ、大胆

最適： eスポーツブランディング・チームグラフィック

自信とスポーティさを持つこの色合いは、鮮明なユニフォームに当たるスタジアムライトのよう。エレクトリックなロイヤルブルーでハイライトに活気を与え、濃いネイビーがブランド感と迫力をキープ。鋭い幾何学形、ホワイトスペース、必要なら小さなネオンアクセントも効果的。使い方のコツ：ネイビーをメイン背景にして、明るいブルーは本当のアクセントとして引き立てましょう。

media.ioで生成されたロイヤルネイビートリムの画像例

ホワイトブルーに合う色は？

ニュートラルカラーは最も合わせやすい存在です：クールグレー、チャコール、ソフトブラックは文字をシャープに、温かいホワイトやアイボリーはパレットを高級感のある柔らかな印象に変えます。

アクセントには、アンバー・コーラル・テラコッタなどの温かみのある補色が特に相性がよく、青のUIやブランド見出しと対比を作って瞬時に視線を引き寄せます。

自然で落ち着いた印象にしたい場合は、ユーカリ・セージ・ブルーグリーンのような落ち着いたグリーンを加えてください。淡いブルーと自然になじみつつ、パレットの幅も広がります。

ホワイトブルーカラーパレットを実際のデザインで使う方法

背景はまずホワイトを基本に、淡いブルーをカード・セクション・表の行など「面」に使いましょう。これでページ可読性が高まり、重たい影がなくても自然な奥行きを作れます。

インタラクティブ要素（主ボタン、リンク、アクティブ状態）用に「ヒーロー」ブルーをひとつ、階層（見出し、ナビ、グラフ軸）用に濃いネイビーをひとつ、色分担を決めると効果的です。

印刷の場合はコントラストを早めにチェックしましょう：青系は非塗工紙で暗くなりがちです。小さい文字は最も濃い色、広い面は淡い色で帯状やにごりを避けて。

AIでホワイトブルーパレットビジュアルを作成する

既にHEXコードが決まっている場合は、デザイン種別（UI・ポスター・パッケージなど）と、ホワイトやブルーの用途（背景・ボタン・文字など）を伝えるだけでビジュアル一貫性が出せます。

最速のワークフローは、上記の各パレット下にあるプロンプトを使い回し、被写体・比率・スタイル（フラットUI、商品撮影、誌面レイアウトなど）だけカスタマイズしてプロジェクトに合わせる方法です。

好みの仕上がりを見つけたら、プロンプト構成はそのままでパレット名やHEX方向だけ変えれば、ブランド全体で統一感あるビジュアルがキープできます。

次へ： ブルー・ダークレッド配色パレット