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

ブルーライトグレーは、レイアウトを一瞬でよりクリーンで穏やか、そしてモダンに見せてくれる中立的な色です—冷たすぎず、平坦にも感じさせません。ほのかな青のニュアンスがあり、余白や濃紺の書体、柔らかな暖色系のアクセントと自然に組み合わせられます。

以下に、UIシステム、ブランディング、パッケージ、インテリアに使えるHEXコード付きのブルーライトグレーカラーパレットアイデア20選以上を紹介します—さらに、Media.ioに入力するだけでマッチしたビジュアルを生成できるAIプロンプトも掲載。

なぜブルーライトグレーカラーの配色はうまくいくのか

ブルーライトグレーは「クリーンな中立」と「クールなアクセント」の間に位置しています。プロフェッショナルで整理された印象を与えつつ、純粋なグレーよりも柔らかく、UIや長文コンテンツでも目に優しい色です。

自然にネイビーやチャコールとの高コントラストをサポートするため、アクセシビリティや文字中心のレイアウトに最適。インターフェースを軽やかに保ちつつ、見出しやCTA、データビジュアルをシャープに引き立てられます。

また、暖色と美しく調和します。ベージュ、サンド、キャラメルやブラッシュを少し加えることで、特にブランディングやパッケージ、インテリアでパレットに温もりをプラスし、無機質さを和らげます。

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

1）ミスティハーバー

HEX： #B9C6D4 #E9EEF3 #6F8296 #2E3A46 #D8CBB8

雰囲気： 穏やか、沿岸、洗練された

おすすめ用途： ウェブサイトのヒーローセクションやライフスタイルブランディング

早朝の霧がマリーナを包むような穏やかな沿岸の雰囲気があり、クリーンでありながら冷たくなりません。ブルーライトグレーカラーパレットはヒーローバナー、すっきりしたナビゲーション、柔らかな商品写真の背景に最適です。ニュートラルが無機質にならないよう温かいベージュアクセントを添え、濃いチャコールで文字をきりっと見せましょう。コツ：最も濃い色は見出しやCTA用にするとレイアウトが軽やかなまま保てます。

メディア.ioで生成したミスティハーバーのイメージ例

Media.io

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

今すぐ無料でお試し

2）クラウドラインスタジオ

HEX： #C7D2DE #F6F8FB #8FA1B3 #4C5A67 #C9B8D6

雰囲気： 柔らかい、エアリー、スタジオのようにクリーン

おすすめ用途： ブランドアイデンティティシステムやステーショナリー

写真スタジオの日差しのような柔らかさとエアリー感で、すべてを洗練されたモダンな印象に保ちます。淡いベースでロゴに余白を与え、スレートやグラファイトが文字やマークに構造をもたせます。ラベンダーのニュアンスはマットな紙質と組み合わせると高級感が出せます。コツ：ミッドブルーグレーをブランドの基軸ニュートラルにし、最も濃い色はルールやアイコンなど細かなディテール用に。

メディア.ioで生成したクラウドラインスタジオのイメージ例

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

HEX： #BBC7D3 #F2F4F3 #A7B59B #657585 #1F2A33

雰囲気： フレッシュ、ナチュラル、控えめ

おすすめ用途： スキンケアパッケージやウェルネスサイトに

フレッシュで控えめな印象。清潔なリネンとハーブの香りのする澄んだ空気のよう。セージグリーンが冷たいグレーを柔らかくし、ウェルネスメッセージや成分重視のレイアウトに最適です。コートされていない紙質やシンプルなサンセリフ体と組み合わせてクリアな見た目に。コツ：グリーンはセカンダリーアクセントとして使い、全体の印象を軽やかに。

メディア.ioで生成したアークティックリネンのイメージ例

4）スレートウィスパー

HEX： #B2C1CF #DEE6EE #74879A #3E4A56 #E6D2C2

雰囲気： 静か、モダン、建築的

おすすめ用途： エディトリアルレイアウトやプレゼンテーション

静かで建築的な印象があり、石や紙、柔らかな影を連想させます。スライド資料や長文エディトリアルで、読みやすさと雰囲気の両立に活躍します。ウォームクリームはプルクォートやセクション区切りの控えめなアクセントに。コツ：本文はディープスレートに、明るいグレーはマージンや余白に使って眩しさを防ぎましょう。

メディア.ioで生成したスレートウィスパーのイメージ例

5）コースタルコンクリート

HEX： #BAC7D4 #F1F5F8 #9AA0A6 #2B3137 #CBA07A

雰囲気： アーバンコースタル、グラウンデッド、自信に満ちた

おすすめ用途： モダンなホームグッズのプロダクト広告

どっしりと自信に満ち、シーサイドのコンクリート遊歩道を思わせます。現代的なホームアイテムに鋭い印象を与えます。クリーンなベースに温もりあるキャラメルのアクセントを添えて、奥行きのあるデザインに。キャラメル色はヘアラインの金属や木材と合わせると奥行き感がアップ。コツ：温かみのあるアクセントはボタンやプライスタグ、吹き出しなど小さくリピートして使いましょう。

メディア.ioで生成したコースタルコンクリートのイメージ例

6）ウィンターデニム

HEX： #B6C4D2 #E7EDF4 #3E6A8E #243241 #D9D4CC

雰囲気： クール、カジュアル、信頼感

おすすめ用途： アプリのオンボーディング画面

クールで頼もしい印象。冬空の下のデニムのよう。深いブルーが主なアクションを明確にし、淡い色調でオンボーディング画面を親しみやすく軽やかに演出します。丸みのあるUIパーツとゆとりある行間でカジュアルな雰囲気に。コツ：ネイビーは主なCTA用に、ミッドブルーはサブアクション用に使い、視覚的な雑音を抑えましょう。

メディア.ioで生成したウィンターデニムのイメージ例

7）フロステッドユーカリ

HEX： #C0CCD8 #F7FAFD #6C8E86 #445D66 #B9C7A6

雰囲気： スパのよう、ボタニカル、癒やし

おすすめ用途： ボタニカルイラストやウェルネス系ブログのヘッダー

スパのように癒しと安らぎを感じさせ、朝露に濡れたユーカリの葉のような色合い。グリーンブルーが優しいボタニカルエッセンスを加えつつ、明るいベースを邪魔しないバランス。ウォーターカラーの質感や繊細な線画と合わせて静かなエディトリアル感に。コツ：最も明るい色は余白としてしっかり使い、ボタニカルなアクセントが主張しすぎないように。

メディア.ioで生成したフロステッドユーカリのイメージ例

8）スチールブルーミニマル

HEX： #B3C1CE #EEF2F6 #7C94AA #1E2B37 #FFFFFF

雰囲気： ミニマル、シャープ、テック志向

おすすめ用途： SaaSのランディングページやアイコンシステム

ミニマルでテクノロジー感を持ち、柔らかな日差しを受けた磨かれたスチールのようなイメージ。ホワイトと明るいグレーがクリーンなキャンバスを作り、スチールブルーはアイコンやマイクロイラストを際立たせます。シンプルな幾何学シェイプやストロークの統一で一体感アップ。コツ：最も濃い色はナビゲーションや重要なラベル用にして、強いコントラストを保ちましょう。

メディア.ioで生成したスチールブルーミニマルのイメージ例

9）レイニーデイオフィス

HEX： #B8C5D2 #E4EBF2 #5C6F82 #2A333C #C7A38A

雰囲気： 集中できる、プロフェッショナル、静かな温かさ

おすすめ用途：企業向けダッシュボードとレポート

集中しプロフェッショナルな印象で、落ち着いたオフィスの雨の日の窓の景色のようです。このような青みがかったライトグレーの配色は、データが多い画面でも読みやすく、温かみがあります。控えめな仕切り線やキーメトリクス・アラート用の暖かいタン色のハイライトと組み合わせてください。ポイント: グレー寄りのブルーをグラフ要素に使い、ネイビーは合計やヘッダー専用にすると良いでしょう。

media.ioで生成された雨の日オフィスの画像例

10) アイスラベンダーヘイズ

HEX： #BEC9D6 #F3F6FA #B7A9C8 #6E6A83 #2C2F3A

雰囲気：夢幻的、モダン、ややロマンチック

おすすめ用途：音楽カバーアートやSNSテンプレート

夢のようにモダンで、ラベンダーの冷気が黄昏のもやのように感じられます。バイオレットグレーが個性を加えながら、クールな基調とぶつからず、SNSテンプレートやカバーアートのタイポグラフィに最適です。穏やかなグラデーションやミニマルな線画と合わせて現代的な雰囲気に。ポイント: 最も暗い色をタイトルに使い、ラベンダーは背景のグローや影として活用しましょう。

media.ioで生成されたアイスラベンダーヘイズの画像例

11) パウダーブルークォーツ

HEX： #BFCBDA #F8FBFF #98B7CF #5B6B7A #D7D0C7

雰囲気：ライト、クリーン、上品な高級感

おすすめ用途：ジュエリーECや商品グリッド

ライトで控えめな高級感があり、明るいカウンタートップ上のクォーツの反射を思わせます。パウダーブルーが商品グリッドに新鮮さを加え、クールなグレーが写真の注目を維持します。細い枠線や柔らかなドロップシャドウと組み合わせて高級店の雰囲気に。ポイント: 暖かめのニュートラル色を「新」や「限定」などバッジの背景に使えば強い対比を避けられます。

media.ioで生成されたパウダーブルークォーツの画像例

12) シルバースカイエディトリアル

HEX： #B7C4D1 #F0F4F8 #8B98A6 #38424D #D2B48C

雰囲気：エディトリアル、洗練された、モダンクラシック

おすすめ用途：雑誌特集やポートフォリオサイト

洗練されたモダンクラシックで、都市の屋根の上の銀色の空のような印象です。画像キャプションや引用、階層を意図的な見せ方にしたいエディトリアルページに最適な青系ライトグレーのパレット。暖かい砂色をアクセントに使い、シャープな線を柔らかく、レイアウトを親しみやすく保ちます。ポイント: サブテキストはミッドグレーにして長文でも目の疲れを軽減しましょう。

media.ioで生成されたシルバースカイエディトリアルの画像例

13) ノルディックキッチン

HEX： #C3CFDA #F9F7F2 #9AA8B3 #4A5763 #A7BFAE

雰囲気：スカンジナビアン、居心地の良い清潔感、実用的

おすすめ用途：キッチンインテリアムードボード

居心地よく清潔で実用的。明るいノルディックキッチンで塗装キャビネットや淡いカウンターがイメージされます。クリーミーホワイトがクールグレーに温かみを加え、ソフトグリーンが自然なアクセントとして調和しますが、素朴さにはなりません。ライトウッドのテクスチャやマットな金属と合わせてバランスの取れた見た目に。ポイント: ミッドグレーでキャビネット、最も明るいトーンは壁に使うと空間の広がりを保てます。

media.ioで生成されたノルディックキッチンの画像例

14) カームテックダッシュボード

HEX： #B5C2D0 #EDF3F9 #7F93A8 #24303B #4F7C9A

雰囲気：落ち着いた、整理された、信頼感

おすすめ用途：フィンテックダッシュボードやデータテーブル

落ち着きと整理された印象で、空気を感じる整然としたスプレッドシートのようです。青系ライトグレー配色が密度の高いテーブルでも読みやすくし、明るいブルーは重要なアクションを目立たせます。さりげない行のストライプや統一アイコンで明快さを。ポイント: アクセントブルーはインタラクティブな要素だけに使い、ユーザーがクリックすべき場所をすぐ認識できるようにしましょう。

media.ioで生成されたカームテックダッシュボードの画像例

15) ミュージアムウォールウォッシュ

HEX： #C1CCD6 #F4F2EE #9CABB6 #3B4650 #C2A27E

雰囲気：ギャラリー風、静か、高級感

おすすめ用途：アートポートフォリオや展覧会ポスター

ギャラリー風で静けさがあり、美術館の壁が柔らかなスポットライトを浴びているような雰囲気です。クールなニュートラルはアートや写真を主役に押し上げ、温かいタン色がキャプションとラベルに程よい温もりを添えます。余裕のあるマージンや抑制されたタイポグラフィと合わせてキュレーションされた印象を保ちましょう。ポイント: 背景は最も明るいトーンにし、最も暗い色はタイトルだけに控えめに使いましょう。

media.ioで生成されたミュージアムウォールウォッシュの画像例

16) シーサイドポスタープリント

HEX： #BFCBDC #F2F7FC #6F8FA8 #2A3A4A #F0D7B6

雰囲気：明るく、爽やか、グラフィック

おすすめ用途：トラベルポスターや壁アートプリント

明るく爽やかで、海の飛沫や淡い空、日差しに照らされた紙をイメージします。強いブルーは形や見出しに活力を加え、温かいクリーム色がデザインに親しみやすさをもたらします。大胆で単純化されたイラストスタイルと合わせて、クラシックなトラベルポスターの雰囲気に。ポイント: ダークネイビーは輪郭や文字だけに限定し、プリントが遠目にも明るくなるようにしましょう。

media.ioで生成されたシーサイドポスタープリントの画像例

17) ソフトユーティリティパッケージ

HEX： #BAC6D1 #F7F8F6 #A3AAB1 #333A41 #7B8C7A

雰囲気：実用的、クリーン、エコ志向

おすすめ用途：家庭用品パッケージ

実用的でクリーン、洗練されたユーティリティ商品の優しい印象です。グレーの積み重ねがラベルの読みやすさを保ち、控えめなグリーンがエコ志向をアピールしすぎずサポートします。シンプルなアイコンと明快な情報階層と組み合わせて信頼感を醸し出します。ポイント: 最も暗い色は成分表示や安全情報に使い、コントラストを確保しましょう。

media.ioで生成されたソフトユーティリティパッケージの画像例

18) ブルースモークウェディング

HEX： #C4D0DD #FFF9F2 #9FB1C2 #5D6C79 #C6A8B5

雰囲気：ロマンティック、ソフト、エレガント

おすすめ用途：結婚式招待状やRSVPカード

ロマンチックでソフト、ブルースモークやクリーム紙、ほんのりフラワーアクセントがイメージされます。青系ライトグレーの組み合わせは、現代的でタイムレスな印象の招待状に最適です。セリフ体タイポグラフィや控えめな線装飾と組み合わせ、ブラッシュピンクは名前や重要な部分だけに使用。ポイント: 最も明るい色は紙として印刷し、暗い色はインクに使うことで文字が薄くならずに済みます。

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

19) グレイシャーゲームUI

HEX： #B1C0CF #EAF1F8 #4E7AA6 #1B2430 #9BB4A2

雰囲気：氷のように鋭く、エネルギッシュ

おすすめ用途：ゲームメニューやHUDインターフェイス

氷のような鋭さと、電気的なブルーの鮮やかさが特徴です。HUD要素の強いコントラストはダークネイビーが支え、ティールグリーンでハイライトを鮮やかにしつつ過剰なネオンになりません。ガラス調パネルや控えめなグラデーションと組み合わせてモダンなゲームメニューに。ポイント: アクセントブルーは選択状態専用にし、動作時もUIが読みやすいようにしましょう。

media.ioで生成されたグレイシャーゲームUIの画像例

20) イブニングフォグラウンジ

HEX： #B7C3CF #EDE7DF #8C97A3 #2F3942 #7E6D63

雰囲気：アンニュイ、洗練、居心地の良さ

おすすめ用途：レストランブランディングとメニュー

アンニュイで洗練され、夕方のラウンジが霧と暖かいキャンドルの光に包まれたような雰囲気です。柔らかなグレーのベースでメニューをエレガントにまとめ、エスプレッソブラウンのアクセントが食欲と安心感を加えます。テクスチャ付きの紙素材や控えめなアイコンと組み合わせてプレミアムな雰囲気に。ポイント: 最も暗い色はセクション見出し専用にし、本文はミッドグレーで上品さを保ちましょう。

media.ioで生成されたイブニングフォグラウンジの画像例

21) クワイエットブループリント

HEX： #B9C7D8 #F5F8FC #6B89A8 #2C3D4F #D6DCE2

雰囲気：精密、落ち着き、設計的

おすすめ用途：建築ポートフォリオやケーススタディ

精密かつ落ち着きがあり、昼光で柔らかくされたブループリントの線を思わせます。強いブルーは図面や注釈に最適で、淡い色がケーススタディの可読性を保ちます。細いグリッド線や均一なスペースと組み合わせれば職人技が際立ちます。ポイント: 図面の線はミッドブルーに、最も暗い色はタイトルやナビ専用にしましょう。

media.ioで生成されたクワイエットブループリントの画像例

22) スノーシトラスアクセント

HEX： #C2CEDA #F6FAFF #97A7B6 #36414C #F2B24A

雰囲気：新鮮、楽観的、高コントラスト

おすすめ用途：キャンペーンバナーや販促グラフィック

新鮮で明るい雪と鮮烈なシトラスの組み合わせ。温かなアンバーアクセントがクールなニュートラルに瞬時のエネルギーを与え、キャンペーンや期間限定オファーに最適です。大胆なサンセリフ書体と十分な余白と合わせてアクセントのインパクトを保ちましょう。ポイント: アンバーはバナーの主役になる要素一つ（ボタンや割引バッジなど）だけに使ってください。

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

ブルーライトグレーと相性の良い色とは？

ブルーライトグレーはシャープなホワイトやチャコール、ネイビーと自然に組み合わせられ、タイポグラフィやUI要素のためのクリアなコントラストを生みます。より高級感を出したい時は、砂色やクリーム、トープ、キャラメルなどの暖色ニュートラルを追加すると色味が柔らかくなります。

色のアクセントには、控えめなグリーン（セージ、ユーカリ、ティールグレー）が落ち着きと現代感を保ち、ラベンダーグレーやダスティブラッシュは個性を加えても鮮やか過ぎず。インパクトを出したい時は、温かいアンバーやテラコッタなど一つのアクセントでCTAやバッジを目立たせましょう。

実際の運用では、ブルーライトグレーの配色は「温度のバランス役」となる色（紙のような暖色ニュートラルかオーガニックグリーン）を一つ選ぶとうまくいきます。このバランスで配色が冷たすぎる印象になるのを防ぎます。

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

UIデザインでは、ブルーライトグレーをアプリのメイン画面色（背景・パネル・カード）として用い、深いスレートやチャコールをテキストに使います。インタラクティブな状態用の強めのブルーを一つだけ取り入れて（リンク・トグル・選択タブなど）、分かりやすさを保つのがおすすめです。

ブランディングや印刷なら、ブルーライトグレーは「静かな高級感」ベースとして最適です――特に非コート紙や穏やかなグラデーション、ミニマルな線画と組み合わせる時。シールやハイライト、小さなグラフィックに暖色アクセントを使えばブランドイメージを親しみやすくできます。

インテリアでは、壁やキャビネットにブルーライトグレーを使い、クリーミーホワイトや自然素材（木材、リネン、ブラッシュメタル）と組み合わせてみてください。明るく開放的でありながら、しっかりとした印象になります。

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

パレットが実際のレイアウトでどう見えるかをプレビューしたい場合（ダッシュボード、ポスター、パッケージモックアップ、ヒーローセクションなど）、AIで簡単なコンセプト画像を生成できます。デザイン前にコントラストや雰囲気、アクセントの配置を検証するのに役立ちます。

上記のプロンプトのいずれかから始めて、あなたのパレットの雰囲気のキーワード（例：「コースタル」、「建築的」、「スパ風」など）に入れ替え、必要なフォーマット（16:9バナー、1:1投稿、3:4ポスター）を指定します。最も暗い色は文字用に取っておき、全体の構成が軽やかになるようにしましょう。

次へ： サップグリーンのカラーパレット