ホワイト・グリーン・ブルー配色20選とカラーコード一覧

ホワイト・グリーン・ブルーの配色は、一瞬でクリーンでモダン、そして開放的な印象を与えます。このカラーパレットは、無機質になり過ぎず、クリアさ・健やかさ・信頼感を伝えたいブランドやインターフェースの定番です。

以下は、HEXコード付き新鮮なホワイト・グリーン・ブルー配色20選と、その使い方やAIビジュアル生成用のプロンプト例です。

ホワイト・グリーン・ブルーパレットが優れている理由

ホワイトはクリーンな土台になり、グリーンは自然でリフレッシュするニュアンス、ブルーは安定感とプロフェッショナリズムを与えます。この組み合わせにより、「新鮮で信頼できる」印象をデジタルと印刷両方で伝えられるのです。

これらの涼しげな色合いは、階層構造も明確に保ちます。淡い色調は空気感のある背景、ミッドトーンはUIの骨組み、深いブルーは可読性の高いテキストや重要なCTAに活用できます。このバランスは大きなコントラストなしでも整理された印象を与えます。

このパレットは水・空・健康のイメージとも結びつきやすく、ウェルネス、SaaS、金融、エコブランドなど、落ち着いて現代的なシンプルさや自信を表現したい時に特に効果的です。

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

1）シーフォームスタジオ

HEX： #ffffff #d7f5ee #8ddccf #3aa7b8 #1f4e79

雰囲気： エアリー、海辺、楽観的

おすすめ用途： SaaSランディングページUI

シーグラスのような清涼感とディープオーシャンブルーが、明るく自信に満ちた空気を作ります。プロダクトページやナビゲーションバー、明瞭さが求められるセクションにぴったりです。細いラインアイコンや十分な余白と組み合わせることでミントやティールの軽やかさを引き立てます。使い方のコツ：ネイビーは見出しやメインCTA専用にするとレイアウトの可読性を保てます。

media.ioで生成されたシーフォームスタジオの画像例

Media.io

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

今すぐ無料で試す

2）グレイシャーミント

HEX： #f6fbff #cfeee6 #7ac9b8 #3d7fb3 #163a5f

雰囲気： クリア、落ち着き、モダン

おすすめ用途： ヘルスケアアプリダッシュボードUI

爽やかなミントと氷河ブルーが、清々しい空気と安定した日常を感じさせます。落ち着きのある集中が必要なダッシュボードや進捗表示、データカードに最適です。ライトグレーの区切り線や丸みのあるコンポーネントと合わせると親しみやすいクリニック風に。使い方のコツ：濃いブルーはキーメトリクスや選択状態のみで使用し、重さを避けましょう。

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

3）コースタルリネン

HEX： #fffaf2 #c7f0e3 #6fc2b0 #4ea0d8 #2b3a67

雰囲気： 日差し、リラックス、ウェルカム

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

暖かいリネンホワイトとエアリーなアクアは、やわらかな日差しの差し込む海辺を思わせます。格式張らずエレガントな招待状に最適なカラーパレットです。サンディな紙質やシンプルなセリフ体と合わせてタイムレスに仕上げましょう。使い方のコツ：本文はインディゴで、アクアは境界線やモノグラム用に使います。

media.ioで生成されたコースタルリネンの画像例

4）アルパインレイク

HEX： #f2f8ff #bfead2 #4fbf9f #2f78c4 #0f2d4a

雰囲気： 新鮮、アウトドア、自信

おすすめ用途： アウトドアブランドのロゴとステーショナリー

明るい湖のブルーとみずみずしいグリーンは、山岳トレイルや澄んだ水を連想させます。コントラストがありつつも親しみやすい自信の感じられるロゴに最適です。幾何学サンセリフ体やバッジ型ロゴと相性抜群。使い方のコツ：ミッドブルーを主役に、グリーンをアクセント使いして汎用性を保ちましょう。

media.ioで生成されたアルパインレイクの画像例

5）ガーデンプール

HEX： #f8fffb #b8efda #4ac29a #2aa1c0 #125b7a

雰囲気： 遊び心、爽快、明るい

おすすめ用途： サマーイベントポスター

きらめくアクアとプールブルーのエネルギーは、夏の日差しと刈りたての葉の爽やかさを感じさせます。遠くからも一目で読みやすいポスターに最適です。太い見出しやシンプルなシェイプと組み合わせてメッセージをはっきりと。使い方のコツ：ダークブルーはメインタイトルに、ミントは背景の大きなブロックに活用しましょう。

media.ioで生成されたガーデンプールの画像例

6）スプルーススカイ

HEX： #f4fff9 #a6dfc7 #2f9f7c #3b84b6 #1e3552

雰囲気： 安定、クリーン、信頼感

おすすめ用途： エココンサルティングサイト

常緑樹の深い緑と空色のクリア感が信頼感のあるナチュラルな雰囲気を作り出します。サービスページや事例紹介、注目セクションで信頼性が求められる部分に効果的です。自然写真や控えめなアイコンをあわせて、テックな印象になりすぎないように。使い方のコツ：背景は淡く保ち、スプルースグリーンでブランドに個性を。

media.ioで生成されたスプルーススカイの画像例

7）ミスティラグーン

HEX： #f7fbff #d2f2ef #7dd3c9 #5aa6d6 #2a4c6b

雰囲気： 柔らかい、穏やか、空気感

おすすめ用途： スパ用パンフレットレイアウト

霧がかったラグーンの色調は、温かな湯気と冷たい水が調和したやさしい感覚をもたらします。情報の階層や余白が重要なパンフレットやサービスメニューに最適です。細い区切り線やソフトグラデーション、軽やかな写真と好相性。使い方のコツ：ミッドティールは見出しに、本文はスレートブルーで可読性アップ。

media.ioで生成されたミスティラグーンの画像例

8）モダンクリニック

HEX： #ffffff #e5f7f1 #9edfcc #6aa9d9 #2b5d87

雰囲気： 清潔、親しみやすさ、安心感

おすすめ用途： オンライン診療アプリの初期画面

明るいホワイトとミントパステルは、冷たさを避けつつ清潔な印象を与えます。オンボーディングやイラスト、バッジや評価など信頼のサイン作りに役立ちます。丸みのあるイラストや柔らかな影を合わせれば親しみやすく。使い方のコツ：最も濃いブルーは大面積で使わず、ボタンやリンクに留めましょう。

media.ioで生成されたモダンクリニックの画像例

9）オーシャンセラミック

HEX： #fbfdff #c6f0e8 #63c7c9 #2d86c9 #18324a

雰囲気： 洗練、海岸、高級感

おすすめ用途： ホームグッズ製品パッケージ

艶めく海の色合いと深いブルーの対比は、海色で釉薬を施したハンドメイドのセラミックのよう。キッチンやバス用品の高級感あるラベルやパターン、ブランドマークに最適です。マットなホワイトの箱や控えめなラインアートと合わせて上質さをキープしましょう。使い方のコツ：ティールは小パターンの反復に、ディープブルーはロゴの要に。

media.ioで生成されたオーシャンセラミックのイメージ例

10) フレッシュテック

HEX： #f9fcff #bfeee0 #48c0a8 #2f6fb5 #0e2239

雰囲気： エネルギッシュ、洗練、モダン

おすすめ用途： フィンテックアプリ UIキット

明るいミントと自信に満ちたブルーで、モダン・素早い・信頼感が感じられます。ステータスやグラフ、インタラクティブな要素に強調が必要なUIキットによく合います。中立的なグレースケールと一貫した余白を組み合わせて、画面に雑多な印象を与えないようにしましょう。使用のコツ：ミントは成功や好調傾向に、ネイビーはナビゲーションや見出しに使いましょう。

media.ioで生成されたフレッシュテックのイメージ例

11) レイニーコンセルバトリー（雨の植物園）

HEX： #f3f7f7 #cfe7dc #7fbfa5 #4b7fae #2b3f57

雰囲気： ムーディー、ナチュラル、思慮深い

おすすめ用途： 編集雑誌の見開きデザイン

控えめなグリーンと嵐のようなブルーは、雨の日の温室の葉のような雰囲気を作ります。画像やタイポグラフィに余白が必要なエディトリアルなレイアウトに最適です。オフホワイトの余白と、クラシックなセリフ体見出し、控えめな写真加工と組み合わせましょう。使用のコツ：濃いスレート色はキャプションや引用に使って静かな構造をつくりましょう。

media.ioで生成されたレイニーコンセルバトリーのイメージ例

12) ノルディックスパ

HEX： #f5fffd #d1efe7 #86cdbd #5c97c8 #1e2f44

雰囲気： ミニマル、癒し、プレミアム

おすすめ用途： スキンケア商品の広告

さわやかなスパグリーンと淡いブルーで、ミニマルかつハイエンド、静かな北欧の隠れ家のような印象に。衛生的で落ち着いたイメージを求めるスキンケア広告に最適です。フロスト加工やシンプルなサンセリフ書体、控えめな反射を合わせましょう。使用のコツ：背景はほぼ白にして、ひとつの濃いアクセント色で商品名を引き立てましょう。

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

13) ブルースプラウト

HEX： #ffffff #d6f4d8 #7bd38a #4f9bd9 #243b6b

雰囲気： 明るい、若々しい、クリーン

おすすめ用途： 子ども向け学習アプリのイラスト

春のグリーンが親しみやすいブルーと重なり、明るく前向きなトーンを演出します。アイコンやバッジ、シンプルなイラストレーションを多用する学習アプリに最適です。丸みのある形状と十分なスペースを組み合わせて、遊び心がありつつも読みやすいインターフェイスにしましょう。使用のコツ：スプラウトグリーンはご褒美や進捗に、濃いブルーはナビゲーションラベルに使用してください。

media.ioで生成されたブルースプラウトのイメージ例

14) ハーバーグリーン

HEX： #f7fff9 #bfe8d7 #3db08d #3f7fc0 #152a3d

雰囲気： 海洋、信頼感、構造的

おすすめ用途： 企業年次報告書

港のブルーと堅実なグリーンで、プロフェッショナルかつ海のインスピレーションを感じる自信を表現します。このホワイト × グリーン × ブルーの配色は、グラフやセクションの区切り、表紙など構造を重視する要素に効果的。シャープなグリッドとモダンサンセリフ書体と一緒に使い、現代風に仕上げましょう。使用のコツ：最も濃い色はテキストの多いページで、ティールはデータのハイライトに使いましょう。

media.ioで生成されたハーバーグリーンのイメージ例

15) カームクラスルーム

HEX： #fcfffe #d9f3e7 #8dd2c3 #6a9fd0 #2b4a64

雰囲気： 優しい、集中、親しみやすい

おすすめ用途： 教育プレゼンテーションテンプレート

ソフトミントと落ち着いたブルーで、整然として励みになる教室のような雰囲気に。テキストや図、吹き出しが多いスライドでも目に優しいカラーパレットです。読みやすいサンセリフ体とシンプルな2色アイコンで、素早く内容を把握できるように。使用のコツ：タイトルはより濃いスレートカラーで、パステル色はハイライトボックスだけに使いましょう。

media.ioで生成されたカームクラスルームのイメージ例

16) マリンメドウ

HEX： #f8fbf7 #bdebd8 #5fc7a7 #2e90c4 #164260

雰囲気： フレッシュ、鮮やか、バランス

おすすめ用途： レストランメニューのデザイン

明るいメドウグリーンとマリンブルーは、シャキッと食欲をそそるモダンな印象です。新鮮で健康的なイメージを伝えたいメニューに最適。クリーンな料理写真やシンプルなカテゴリータグと組み合わせ、素早くナビゲーションできる設計にしましょう。使用のコツ：グリーンはセクション見出し、濃いブルーは価格や重要な詳細に使ってください。

media.ioで生成されたマリンメドウのイメージ例

17) ウィンターボタニカル

HEX： #f2fff7 #c9f2e1 #74bfa6 #5a8cc8 #22324e

雰囲気： クール、植物的、エレガント

おすすめ用途： 水彩植物壁アート

冷たいグリーンと穏やかなブルーで、冬の葉や淡い空をイメージさせます。ボタニカルアートで柔らかさと奥行きを両立したい時にぴったり。質感のある水彩紙や繊細なインクの輪郭を組み合わせてください。使用のコツ：最も濃い色の使用は最小限におさえ、作品を軽やかに保ちましょう。

media.ioで生成されたウィンターボタニカルのイメージ例

18) アクアドラフト

HEX： #f9ffff #bdeeea #46c0c7 #3a7fd6 #15284a

雰囲気： テクニカル、明るい、精密

おすすめ用途： データビジュアライゼーションダッシュボード

クリーンなアクアと製図ブルーで、みずみずしくも正確な技術図面のような印象に。このホワイト × グリーン × ブルー配色は、チャートをモダンにしつつ、背景を読みやすく保ってくれます。細いグリッドラインと一貫したカラー指定で系列やカテゴリの見分けを明確に。使用のコツ：ティールは主要データ、濃紺は軸・ラベル・選択ポイントだけに使いましょう。

media.ioで生成されたアクアドラフトのイメージ例

19) ソフトスポーツウェア

HEX： #ffffff #c9f0e5 #5fc3b2 #3f85c8 #1b2e4a

雰囲気： アクティブ、クリーン、明るい

おすすめ用途： フィットネスブランドのSNS広告

フレッシュミントと力強いブルーで、スポーティで空気感がありながら洗練されたエネルギーを作ります。大胆なタイポグラフィと素早い行動喚起を求めるSNS広告に最適。ダイナミックな幾何学ブロックやシンプルな製品シルエットで現代的なアスレチックな外観に。使用のコツ：背景は白にして、濃いブルーでヘッドラインを強調。ひと目で伝わる明瞭さを目指しましょう。

media.ioで生成されたソフトスポーツウェアのイメージ例

20) クラウディーフィヨルド

HEX： #f5f7ff #cfeee0 #77c6a6 #4b8fd1 #1d3355

雰囲気： クール、広がり、現代的

おすすめ用途： モダンリビングルームのインテリアスタイリング

曇り空のようなホワイトとフィヨルドブルーで、ひろびろと落ち着いた現代建築の海岸沿い住宅を思わせます。このホワイト × グリーン × ブルーのパレットは、明るい木やブラッシュメタル、シンプルなテキスタイルと組み合わせるとクリーンな内装のストーリーに。オート麦やサンドのような暖色ニュートラルも足して、空間が冷たくなりすぎないよう調整しましょう。使用のコツ：グリーンは小物デコレーションに繰り返し、広い面はより明るいトーンに。

media.ioで生成されたクラウディーフィヨルドのイメージ例

ホワイト・グリーン・ブルーに合う色は？

サンド、オート麦、ベージュ、ライトトープなどの暖色ニュートラルは、ホワイト × グリーン × ブルーと美しくマッチして、全体の印象を冷たくしすぎません。特にインテリアやパッケージ、ライフスタイルブランドで活躍します。

コントラストをつけたい時は、チャコールやインク色、エスプレッソブラウンをタイポグラフィやアウトラインに少量使いましょう。アクセントを効かせたいなら、コーラルやアプリコット、淡い黄色を加えると雰囲気を壊さずに元気さをプラスできます。

メタリックもおすすめです。ブラッシュシルバーならクリニカル/テック感、温かみのあるブラスならプレミアムな柔らかさをプラスできます。スパや家庭用品デザインにも最適。

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

メインの背景には白またはほぼ白を使い、パネル・カード・セクションには淡いグリーンやブルーの色味を添えましょう。これで重たい罫線なしにやさしい区切りができ、UIやレイアウトが伸びやかになります。

ミディアムトーンや濃い色には役割付与を。ミディアムトーンはリンクやアイコン・グラフの主なアクセント、最も濃いブルーは見出しやナビゲーション・CTA専用に使い可読性を守ります。ダークカラーの使用を抑えると企業的な硬さを軽減できます。

印刷物やインテリアでは、グリーンは小柄（パターン、植物、布地）で繰り返し、ブルーはフレームや見出し、大きな形の“軸色”に。繰り返し使うことで配色が計画的に見え、偶然の“海岸風”ではなくなります。

AIでホワイト・グリーン・ブルーパレットのビジュアルを作成

すでにHEXコードをお持ちなら、シーンを説明し色を“基調色“や“アクセント色“として指定すれば、一貫性ある広告クリエイティブやUIモックアップ、ポスター、商品写真に落とし込めます。

よりきれいな画像生成には、プロンプト内容を具体的に（スタイル＋被写体＋背景＋タイポグラフィメモ）、注目点も1つに絞りましょう。上記のプロンプトをテンプレートとして、HEX値だけブランド用に差し替えても使えます。

Media.ioならビジュアル生成やブラッシュアップも簡単なので、最終決定前に複数のホワイト × グリーン × ブルー組み合わせをテストできます。

次へ： 淡いグリーンのカラーパレット