グレー×ライトブルー配色アイデア20選｜おすすめカラーコード付き

グレー・ライトブルーは、モダンなニュートラルとやさしい色味の中間に位置しています。すっきりとプロフェッショナルな印象を持ちつつも、デジタルや印刷物のプロジェクト全体で、穏やかで親しみやすく、フレッシュな雰囲気を演出します。

以下では、HEXコード付きの厳選されたグレー・ライトブルーのカラーパレット20選と、Media.ioで生成可能な実例を、UIやブランディング、インテリアなどの用途別にご紹介します。

グレー・ライトブルーカラーパレットが優れている理由

グレー・ライトブルーのパレットは、グレーの中立性とブルーの透明感を組み合わせることで、すぐに「デザインされた」印象を感じさせます。このバランスのおかげで、レイアウトは整理され、広々と信頼感のある雰囲気になりつつも、無機質にはなりません。

また、明確な階層構造をサポートします。柔らかくエアリーな色味は背景やカードによく合い、より深みのあるブルーグレーは見出しやナビゲーション、アクションボタンなどで確かなコントラストを生み出します。

最後に、これらのクールトーンの組み合わせは素材やメディアとの相性も良好です。きれいに印刷でき、写真映えも良く、温かみのあるアクセント（木材、ベージュ、真鍮）と合わせれば、さらに個性を演出できます。

20種類以上のグレー・ライトブルーパレットのアイデア（HEXコード付き）

1）ハーバーミスト

HEX： #E7F0F7 #CFDBE6 #9BB7CF #6F8FA8 #2F3B46

雰囲気： 穏やかでエアリー

おすすめ用途： 海岸のインテリアムードボード

静かなマリーナに霧が立ち込めるように、爽やかで冷たくなりすぎないトーンが特徴です。柔らかなグレー・ライトブルーと深みのあるチャコールを組み合わせてコントラストを出しています。クリアな印象を出したいコースタルインテリアやライフスタイルブランド、プレゼン資料などに最適です。ブリーチドウッドやリネン素材、小型の真鍮アクセントと合わせたり、最も濃いトーンは見出しやトリムに使い、ぼんやりとした印象を避けましょう。大きく開いた背景にもよく映えるカラーパレットです。

media.ioで生成したハーバーミストの画像例

Media.io

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

今すぐ無料で試す

2）フロステッドデニム

HEX： #F2F6FA #D6E2EE #A8C0D9 #7A9BB9 #465767

雰囲気： クールでモダン

おすすめ用途： ファッションルックブックのレイアウト

冬の光がデニムに差し込むようなクールでモダンな雰囲気で、クリアかつエディトリアルな印象です。中間のブルーがレイアウトに構造を与え、深みのあるスレートがタイポグラフィもシャープにまとめます。洗練されたミニマルな雰囲気が求められるルックブックやブランドガイドライン、ランディングページにおすすめです。オフホワイトのスペースやブラックインクのアクセント、そして最も濃いトーンはキャプションやページ番号用に。

media.ioで生成したフロステッドデニムの画像例

3）クワイエットコンクリート

HEX： #EEF3F7 #D4DDE6 #A6B3C2 #6F7F8E #39424A

雰囲気： インダストリアルで安定感

おすすめ用途： 建築ポートフォリオWebサイト

雨上がりのきれいなコンクリート壁のようにインダストリアルで安定感のあるニュートラルカラー。中間色のグレーで落ち着きを保ちつつ、ライトブルーが沈んだ印象を防ぎます。信頼感が求められる建築ポートフォリオやコンサルティングサイト、提案資料に適しています。オーク材写真やカッパー色のアイコンと合わせるのもGood。最も明るい色味を大きな余白に使えば、可読性もアップします。

media.ioで生成したクワイエットコンクリートの画像例

4）アイスバーグスタジオ

HEX： #F6F9FB #DBE9F5 #B3CDE3 #7EA8C8 #1F3B57

雰囲気： 明るく集中できる

おすすめ用途： 生産性アプリのUI

太陽光に照らされた氷山の先端のように、クリーンでありながら奥行きを感じる配色です。ネイビーを土台にコントラストを作り、柔らかなブルーが画面を開放的で心地よくします。ダッシュボードや分析ツール、SaaSのオンボーディングなど、階層構造がはっきり必要な場面におすすめ。シンプルな折れ線グラフや角丸カードと相性が良く、最も濃い色はプライマリーボタンにポイント使いすることでUIの軽さを保てます。

media.ioで生成したアイスバーグスタジオの画像例

5）シルバータイド

HEX： #F1F5F8 #D1DDE6 #8FB0C6 #4F7F9D #2B4A5A

雰囲気： 爽やかで海岸らしい

おすすめ用途： ホテルのブランディングパレット

さざなみに陽が差し込むような爽やかで上質な雰囲気です。ティール寄りのブルーが個性を加えつつ、スレートカラーが高級感を保ちます。落ち着きが大切なブティックホテルのブランディングやスパのメニュー、看板に最適。砂や石のテクスチャ、ミニマルなアイコンと合わせて。印刷物は濃い色味をテキスト部分に使って視認性をテストするのがポイントです。

media.ioで生成したシルバータイドの画像例

6）レイニーロフト

HEX： #F4F6F7 #D8DEE3 #B2C2CF #7D93A6 #3F4B56

雰囲気： ソフトで都会的

おすすめ用途： ミニマルなポスターデザイン

ロフトの雨窓のようなソフトで都会的な雰囲気。グレーを基調にすることで文字やシンプルな図形を重ねても雑味なくまとまります。ミニマルなポスターやギャラリー用カード、カンファレンスの配布物など、静かな自信を伝えたい時に。大胆なジオメトリック要素と組み合わせたり、細かい文字は最も明るい色味の上に配置して、コントラストを高めましょう。

media.ioで生成したレイニーロフトの画像例

7）グレイシャーポップ

HEX： #F0F6FF #CFE3FF #9DC3FF #6A8BDC #2D3355

雰囲気： エネルギッシュ＆クリア

おすすめ用途： テック系スタートアップのランディングページ

鋭い氷河の光のようにエネルギッシュでモダンな配色。明るいブルーはCTA（コールトゥアクション）を引き立たせ、濃紺が全体の安定感を支えます。グレー・ライトブルーの配色の中でも、力強さが必要なスタートアップや特長ページ、プロダクトアップデートにぴったり。ホワイトスペースと穏やかなグラデーションと合わせ、鮮やかなブルーはアクションボタン1カ所に限定しましょう。賑やかになりすぎません。

media.ioで生成したグレイシャーポップの画像例

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

HEX： #F7F7F5 #DBE2E8 #B6C6D6 #7F9BB3 #2C3A45

雰囲気： テクニカル＆すっきり

おすすめ用途： エンジニア向けスライド資料

製図用のチョークラインのように整理され信頼感のある色合い。やわらかなオフホワイトでまぶしさを抑え、深いブルーグレーが図表もすっきりサポートします。エンジニア用のスライドやドキュメント、冷静で構造的なリズムが必要な図解資料に最適です。細い罫線やモノアイコン、ポイントの使いすぎを避け、個々のグラフタイプごとにアクセントカラーを決めて運用しましょう。

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

9）ブルーアッシュミニマル

HEX： #FAFBFD #DDE7F0 #B7C9D8 #8299A8 #39444C

雰囲気： 静かでミニマル

おすすめ用途： 履歴書やポートフォリオのテンプレート

朝の空の下の淡い灰のように、クリーンでプロフェッショナルに見えるトーンです。重たい境界線を使わずにセクションを自然に区切れるパレットなので、履歴書やポートフォリオPDF、パーソナルサイトなど、内容を主役にしたい場面におすすめ。モダンなサンセリフ書体1種類と合わせ、ダークスレートは見出しのみに、本文はほぼ白の上に配置すると心地よい仕上がりになります。

media.ioを使って生成されたブルーアッシュミニマルの画像例

10）ハーバーグラス

HEX： #EDF6F7 #CFE3E7 #9FBFC9 #6B93A0 #2E4B54

雰囲気： スパのようにリフレッシュ

おすすめ用途： スキンケアパッケージデザイン

明るい海辺のシーグラスのようにスパのようなリフレッシュ感。この組み合わせはクリーンで回復力を感じさせます。アクア寄りのトーンが柔らかさを与え、深いブルーグリーンが高級感のあるコントラストを生み出します。スキンケアラベルやウェルネス商品ページ、またはサロンの看板などにおすすめです。マットホワイトのパッケージとミニマルなラインイラストを組み合わせ、最も淡い色がコート紙で消えないよう小さなカラープルーフで印刷確認を。

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

11）ムーンリットスレート

HEX： #F3F4F7 #D7DBE3 #AEB6C8 #6E7A94 #2C3240

雰囲気： ムーディーで洗練された

おすすめ用途： エディトリアルマガジンレイアウト

スレート上の月明かりのようにムーディーで洗練された雰囲気。重さを与えず奥行きを作り出します。クールなラベンダーグレーのアンダートーンが長文デザインに洗練された印象を追加。モダンで真剣なトーンにしたいマガジンやレポート、ケーススタディに最適です。ハイコントラストの白黒写真と合わせ、ミッドトーンを引用文に使い、読者の誘導に活用しましょう。

media.ioで生成されたムーンリットスレートの画像例

12）ソフトストームフロント

HEX： #F5F8FB #D7E3EF #A0BDD6 #5F86A4 #2C3E50

雰囲気： 嵐のようで落ち着いた

おすすめ用途： コーポレートブランドリフレッシュ

遠くの雷雲を思わせる嵐のような落ち着き。これらの色合いは自信と安心感を与えてくれます。霧のようなハイライトから深いブルーグレーへのグラデーションで、印刷やウェブでも階層が見やすくなります。コーポレートのリブランディングや提案書テンプレート、LinkedInビジュアルにも最適。オートミールのような温かいニュートラルや控えめなゴールドアクセントを合わせ、最も深い色はロゴやナビゲーションに使い、常に明瞭さを保ちましょう。

media.ioで生成されたソフトストームフロントの画像例

13）ペブル＆パウダー

HEX： #F8F9FA #E1E5EA #BCC7D1 #8795A3 #4A5560

雰囲気： 優しくバランスが良い

おすすめ用途： 結婚式招待状セット

パウダリーな石と淡い空のように優しくバランスのとれた配色。時代を超えたエレガンスを感じさせます。ニュートラルな中間色はタイポグラフィの可読性を保ち、ディープチャコールがフォーマル感をアップ。結婚式のステーショナリーや出産のお知らせ、フォーマルイベントのセットにも最適です。ちぎりエッジや控えめなエンボス加工と合わせ、最も濃い色は名前だけに使うことで全体のデザインが軽やかさを保ちます。

media.ioで生成されたペブル＆パウダーの画像例

14）クリニックカーム

HEX： #FFFFFF #E7F2FB #C1D9EE #7FA7C8 #3C5A73

雰囲気： クリーンで安心感がある

おすすめ用途： 医療系ウェブサイトUI

明るいクリニックロビーのように、これらの色は明確さと配慮を伝えます。ホワイトと淡いブルーで衛生的な印象を与え、深いトーンはUI状態に対し明快なコントラストを追加。医療サイトや予約ポータル、患者教育資料にも最適です。角丸コンポーネントやシンプルなアイコンを組み合わせ、ボタンのコントラストをしっかりと確認し、すべてのユーザーが分かりやすいようにしましょう。

media.ioで生成されたクリニックカームの画像例

15）コースタルダスク

HEX： #F2F0ED #D7E1EA #9FB9C9 #5E7F95 #2F3D46

雰囲気： 温かみのある涼やかさとリラックス感

おすすめ用途： リビングルーム塗装プラン

水辺に夜が訪れるように温かくも涼やかでリラックスしたパレット。完璧すぎない居心地の良さがあります。少しクリーミーなニュートラルでブルーが冷たくなりすぎません。リビングの塗装プランやキャビネット、ソフトファブリック類など、落ち着きと深みが欲しい場所におすすめ。ウーブンテクスチャやMutedテラコッタアクセントと組み合わせて、ミッドトーンは光の加減で色が変わるので、実際に複数の壁でサンプルしてください。

media.ioで生成されたコースタルダスクの画像例

16）スカイラインアクセント

HEX： #F4F7FF #D8E2FF #A3B7FF #5B6FE6 #232A54

雰囲気： 洗練されハイコントラスト

おすすめ用途： フィンテックモバイルアプリUI

夕暮れのもやの中で煌めく都市の光のように、これらのブルーはネオンなしでエネルギーを与えます。鮮やかなインディゴはインタラクティブな状態に最適で、深いベースは安心感と信頼性を伝えます。フィンテックやダッシュボード、アカウントポータルなど、明瞭さと信頼性が必要な場面にふさわしいグレーライトブルーのカラーパレット。控えめな仕切りや余白をたっぷり取り、鮮やかなアクセントは主要アクションや主要KPIにだけ使いましょう。

media.ioで生成されたスカイラインアクセントの画像例

17）アーカイブブルーグレー

HEX： #F6F5F2 #E0E5EA #B3BECA #788694 #2F3841

雰囲気： クラシックでアカデミック

おすすめ用途： 大学パンフレットデザイン

歴史ある図書館のクールな昼光のように、クラシックで落ち着いた配色です。ウォーム系のオフホワイトベースでページに親しみを持たせ、ブルーグレーで権威感を加えます。大学のパンフレットや研究レポート、学部ウェブサイトに最適。セリフ体の見出しやシンプルなインフォグラフィックと合わせ、最も濃い色はセクションヘッダーに使い、読みやすいリズムを維持しましょう。

media.ioで生成されたアーカイブブルーグレーの画像例

18）ウィンターボタニカル

HEX： #F7FBFF #D6EAF7 #A8CFE3 #76A6C1 #2F4F5F

雰囲気： フレッシュでボタニカル

おすすめ用途： 水彩植物イラストセット

冬のユーカリのようにフレッシュで自然な癒しを感じさせるパレットです。ソフトなブルーは繊細なグリーンやインクのアウトラインの穏やかな背景になります。水彩イラストセットやステーショナリー、落ち着いたSNSテンプレートなどにおすすめ。Mutedなセージや紙の質感と合わせ、最も濃い色は茎や影に使い、柔らかな立体感を追加しましょう。

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

19）ワークウィークセレニティ

HEX： #F4F6FB #DBE2F2 #B3C0DD #7B88B6 #3A4061

雰囲気： 集中できて落ち着く

おすすめ用途： プロジェクト管理UI

静かな月曜日の朝のようなクールなトーンで、視覚的な疲労を軽減します。ラベンダーブルーへの変化がパーツの区分けを助け、プロフェッショナルな雰囲気もキープ。プロジェクト管理ツールやカレンダー、チームダッシュボードなど長時間利用を快適にしたい場合に最適。ソフトなシャドウや一貫したアイコン線と合わせ、ミッドトーンは選択状態に使うことでユーザーがすばやくスキャンしやすくなります。

media.ioで生成されたワークウィークセレニティの画像例

20）グラナイトシーフォーム

HEX： #F0F5F4 #CFE1DF #9ABBB7 #5C8681 #2D4443

雰囲気： アーシーでクール

おすすめ用途： エコプロダクトラベルデザイン

花崗岩に打ち寄せるシーフォームのように自然で控えめな配色です。Mutedブルーグリーンでオーガニックなねじれを加えつつ、グレー寄りで心地良い印象も維持。エコラベルや詰替パッケージ、サステナブルブランドのシステムに最適。クラフト紙やミニマルタイポグラフィと合わせ、最も濃い色は小さい文字に使い、マット素材でも視認性を確保。

media.ioで生成されたグラナイトシーフォームの画像例

グレー・ライトブルーに合う色は？

温かみのあるニュートラルはグレーライトブルーの簡単な相性合わせです。アイボリー、オートミール、サンド、温かいベージュが配色を冷たすぎなくしてくれます。インテリアやパッケージングでは、オークやウォルナットなど木質トーンで柔らかさやリアリティが即座に加わります。

UIやブランディングのコントラストには、グレーライトブルーをディープネイビーやチャコール、ほぼブラックと組み合わせてタイポグラフィやキーパーツに使います。アクセントカラーにはMutedブラス／ゴールド、テラコッタ、ダスティコーラルを加えると、落ち着いたベースを壊さずモダンに調和します。

パレットを統一感を保つには、強いアクセント色は1つだけにし、ライトブルーグレーが背景やパネル、補助的な塗りを担うようにしましょう。

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

最初に役割を割り当てましょう：最も明るい色で背景、やや濃い色でカードやセクション、ミッドトーンでボーダーやチャート、最も濃い色を見出しやアイコンに。これでレイアウトが複雑になっても一貫した階層が保たれます。

印刷では、最も明るい色を実際の用紙でテストしましょう。とても淡いブルーグレーはコート紙や明るい白紙だと消えてしまうことがあります。デジタルではボタンやフォームラベルのアクセシビリティのため、コントラストの確認も大切です。

最後に、イメージや質感をテーマに合わせて加えましょう。コースタルならリネンや流木、インダストリアルならコンクリートや鉄、ウェルネス系ならマットな白パッケージなど。

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

HEXコードがあるけどブランドイメージのビジュアルを素早く必要な時は、AIでモックアップやムードボードを生成できます。Media.ioなら、数分でパレットコンセプトをランディングページやパッケージ、インテリアボード、SNSテンプレへと展開可能です。

上記プロンプトの1つをスタート地点にして、被写体やライティング、フォーマット（例：スライド用16:9やモバイル用9:16）を調整してください。プロンプトを具体的にすることで、ブルーグレーの調子がバリエーションでも一貫します。

次へ： レトロ80年代カラーパレット