ブルーグレーは現代のカラーデザインにおける静かな働き者です。クールで洗練されており、暖色系のアクセントや清潔感のあるニュートラルカラーと合わせやすい色です。
以下は、UI、インテリア、ブランディングなどに使える20の厳選されたブルーグレーのカラーパレットアイデア（HEXコード付き）およびマッチするビジュアルを生成するための簡単なヒントやAIプロンプトです。
ブルーグレーパレットがこんなに優れている理由
ブルーグレーは「信頼のブルー」と「ニュートラルグレー」の間に位置し、冷たすぎたり無機質にならず、落ち着きとプロフェッショナリズム、洗練さを感じさせます。トレンディすぎず現代的に仕上げたい時の信頼できる基調色です。
ブルーグレーは自然にコントラストをサポートするので、濃いナビゲーションやヘッダーと明るい面で明確な階層を作りやすく、UIやプレゼン、読みやすさが問われるエディトリアルレイアウトに特に便利です。
また、ブルーグレーは橋渡しカラーとしても優秀です。暖色系（サンド、ブロンズ、ブラッシュ）や寒色系（セージ、ティール、アイスホワイト）両方と相性が良く、インテリアやパッケージ、ブランディングシステムに柔軟に使えます。
20種類以上のブルーグレーカラーパレットアイデア（HEXコード付き）
1) コースタルフォグ
HEX： #2E3E4E #5E7282 #A7B5C0 #E7EDF1 #D7C3A5
雰囲気： エアリー、コースタル、落ち着き
おすすめ用途： ビーチハウスのリビングやゆったりとしたホスピタリティインテリア
エアリーで潮風を感じる雰囲気は、小石の浜辺を覆う朝霧のようです。濃いブルーグレーを壁や大きなファブリックのアンカーに使い、明るいトーンで柔らかさを出しましょう。サンド系のアクセントがセットを暖かくし、冷たくなりすぎるのを防ぎます。ヒント：サンドカラーをクッションやラグのストライプなど、小さな部分で2か所繰り返すと意図が感じられる空間に。
media.ioで生成したコースタルフォグのイメージ例
Media.ioは、ブラウザ上で動画・画像・音声の作成や編集ができるオンラインAIスタジオです。
2) スレート＆セージ
HEX： #344552 #6E8594 #B9C6CE #E9EEF2 #7E9B8B
雰囲気： 落ち着き、新鮮、モダン
おすすめ用途： エコスキンケアのパッケージやウェルネスブランドのラベル
落ち着いたスレートと清潔感のあるセージが出会い、ユーカリが香る静かなスパのような雰囲気。これらのブルーグレーの組み合わせは、微妙な色の違いが高級感を出すマット素材によく合います。タイポグラフィはチャコールまたはオフホワイトを選び、セージはシールやキャップ、強調部分に。ヒント：一番濃い色は法定表示などのテキスト専用に使うと、ラベルが読みやすくなりつつも厳しく見えません。
media.ioで生成したスレート＆セージのイメージ例
3) ミッドナイトハーバー
HEX： #0F1C2B #2C3E55 #5B6F86 #A8B6C4 #F2B6A0
雰囲気： ムーディ、高級感、夜の雰囲気
おすすめ用途： カクテルバーのブランディングや夜のイベントプロモーション
ムードがありシネマティックな雰囲気は、暗い水面に港の灯りが反射する様子を連想させます。深いインキーカラーを背景に使い、中間色でアイコン、パターン、サブパネルに拡張。やわらかなコーラルのアクセントはCTAやスタンプ、ハイライトルールなどに暖かみを加えますが、夜の雰囲気を損ねません。ヒント：コーラルは10％未満に抑えて上品さを維持しましょう。
media.ioで生成したミッドナイトハーバーのイメージ例
4) レイニーウィンドウ
HEX： #1F2A35 #455766 #7F93A1 #C9D4DC #F3F6F8
雰囲気： 静か、ミニマル、集中
おすすめ用途： 分析ダッシュボードやSaaS UIテーマ
静かで集中できる印象は、都会の窓を伝う雨粒のよう。ブルーグレーパレットはUIを落ち着かせつつ、ダークナビから明るい面への明確な階層を作ります。明るいアクセント（アンバーやティール）をひとつ加えればアクティブ状態やアラートを強調。ヒント：一番明るい色をメインキャンバスに使うと、長時間の作業でも目が疲れにくくなります。
media.ioで生成したレイニーウィンドウのイメージ例
5) ノルディックスチール
HEX： #2A3A46 #516574 #8EA0AD #D6DEE5 #FFFFFF
雰囲気： クリーン、構造的、スカンジナビア
おすすめ用途： 企業スライド資料や年次報告書
クリーンで構造的な印象は、磨かれた金属や雪明かりを思わせます。濃い色は見出し・セクション区切りに、淡いグレーはページ全体に使いましょう。ホワイトスペースとシンプルな幾何学が自然に調和します。ヒント：グラフは2シリーズ+1ハイライトに収め、読みやすさを優先して。
media.ioで生成したノルディックスチールのイメージ例
6) デニムドリフト
HEX： #243445 #3F5B74 #6F8FA8 #B8CAD8 #E9EDF0
雰囲気： カジュアル、若々しい、アウトドア系
おすすめ用途： デニムアパレルの広告やルックブックページ
カジュアルで風合いを感じる雰囲気は、涼やかな午後の色あせたデニムのようです。濃いトーンは見出しや枠に、明るいブルーは背景やネガティブスペースに使い分けましょう。オフホワイトの紙テクスチャーやミニマルな黒い文字とも好相性。ヒント：さりげなくグレインを重ねると、色に質感とファッションらしさが増します。
media.ioで生成したデニムドリフトのイメージ例
7) シルバーストーム
HEX： #1D2B36 #3C515E #708693 #B7C4CC #D9A15F
雰囲気： ドラマチック、洗練、高コントラスト
おすすめ用途： モダンキッチンの仕上げや家電のデザイン
ドラマチックかつ洗練された印象で、嵐雲とそこに射す暖かな光を連想させます。金属や石、ガラスが調和するキッチンの背景に最適。ブロンズのアクセントは、取っ手や照明、アクセントスツールなど部分使いで無機質さを和らげます。ヒント：温かみのある金属は1種に絞り、意図したコントラストを出しましょう。
media.ioで生成したシルバーストームのイメージ例
8) インク＆ミスト
HEX： #101820 #33404B #667786 #C8D1D8 #F7F9FA
雰囲気： エディトリアル、シャープ、モダン
おすすめ用途： 書籍カバーやミニマルなポスタータイポグラフィ
シャープかつエディトリアルな印象は、滑らかな紙に新鮮なインクが乾くイメージ。ほぼ黒をタイトルや目立つ文字に、ミストグレーで余白をたっぷり確保。セリフや細めサンセリフを大胆に使うことで現代的な文芸スタイルに。ヒント：大きな余白を1か所確保するとカバーが高級に見えます。
media.ioで生成したインク＆ミストのイメージ例
9) グレイシャーレイク
HEX： #2B3A4A #4F6B7D #7FA7B9 #CFE3EC #F7FBFD
雰囲気： 爽やか、エアリー、アウトドア
おすすめ用途： 水彩風の風景画や自然系ブログヘッダー
清々しく風通しの良い印象は、淡い空の下に横たわるガラスのような高山湖を思わせます。中間のブルーを水や影の部分に、一番明るい色はハイライトや霧に。松のグリーンやチャコール系ラインワークともよく合います。ヒント：ハードなエッジを避け、水彩のにじみ感を活かすと穏やかで自然な仕上がりに。
media.io を使用して生成された氷河湖の画像例
10) ストーミーオーチャード
HEX： #2A3844 #586B78 #9AA9B2 #E1E7EA #8B6B4E
雰囲気：素朴、落ち着いた、居心地良い
おすすめ用途：ファームハウス風キッチンや職人フードブランド
素朴で落ち着きがあり、雨上がりの果樹園を思わせます。涼しげな中立色はクリーンなベースを作り、暖かいブラウンが手作り感やパントリーに合う印象を加えます。クラフト紙、セリフ体のタイポグラフィ、シンプルなアイコンと組み合わせて本格感を演出しましょう。ヒント：ブラウンはスタンプや原材料のハイライトに使い、視線を整理しつつ散らからないようにします。
media.io を使用して生成されたストーミーオーチャードの画像例
11) ブループリントスタジオ
HEX： #1B2D45 #2F4E6B #5F7F9B #AFC2D1 #F2F4F6
雰囲気：技術的、自信がある、クリエイティブ
おすすめ用途：建築ポートフォリオやスタジオのルックブック
技術的で自信を感じさせ、設計図やドラフティングラインを思い起こさせます。濃いブルーはグリッドやキャプション、セクション見出しに使い、淡いパネルはレイアウトの読みやすさを保ちます。細いアイコンや十分な余白と合わせてギャラリー風に仕上げましょう。ヒント：本文は暖かいグレーで設定し、エンジニアリング感を和らげましょう。
media.io を使用して生成されたブループリントスタジオの画像例
12) ダスティペリウィンクル
HEX： #2E3A4C #56647C #8793B0 #C9CDE0 #F6F5FA
雰囲気：ソフト、夢見心地、優しい
おすすめ用途：ベビーシャワー招待状やスイートな文具セット
柔らかく幻想的で、夕暮れ時の光にライラックの霞がかかったような雰囲気です。濃い色は名前や大事な情報に使い、淡い色は空気感のある紙のようなベースになります。繊細な花柄、細い枠線、ローズゴールドの箔と好相性。ヒント：筆記体フォントは一種類だけ選び、色味でロマンチックさを演出しましょう。
media.io を使用して生成されたダスティペリウィンクルの画像例
13) アーバングラファイト
HEX： #161C22 #303A43 #56636E #9EABB4 #E7EBEE
雰囲気：インダストリアル、洗練、モダン
おすすめ用途：ストリートウェアのSNS投稿やリリース告知
洗練されインダストリアルな印象で、グラファイトのスケッチやコンクリートの歩道を連想させます。一番濃い色は太字やフレームに使い、淡いグレーはテクスチャとスペースに。コントラストの高い写真や、エネルギー感を出したいときはネオン色ワンポイントとも好相性。ヒント：影やオーバーレイは一貫性を持たせ、シリーズとして統一感を持たせましょう。
media.io を使用して生成されたアーバングラファイトの画像例
14) クワイエットライブラリー
HEX： #2B343C #4E5D69 #7D8D9A #C9D2D8 #E6D8C7
雰囲気：居心地良い、思慮深い、タイムレス
おすすめ用途：ホームオフィスや読書コーナーのリフォーム
居心地良く思慮深い雰囲気で、使い込まれたブッククロスや静かな読書室を感じさせます。グレーがかったブルーは木製家具と落ち着きある背景を作り、暖かいパーチメント色が全体を招く印象へ。真鍮の装飾やレザー、柔らかなランプと組み合わせて生活感をプラスしましょう。ヒント：造り付け棚は中間色、トリムには最も濃い色だけ使って立体感を加えましょう。
media.io を使用して生成されたクワイエットライブラリーの画像例
15) アークティックコンクリート
HEX： #202B33 #45535E #788792 #BFC8CF #F3F5F6
雰囲気：ミニマル、クール、建築的
おすすめ用途：モバイルアプリのオンボーディングやフィンテックUI
ミニマルでクール、冬の光を浴びたコンクリート面のような印象です。こんなブルーグレーの配色は、明快さと信頼感が重要なオンボーディング画面に最適。アクセントは一色だけ（エレクトリックブルーやライム）使い、進行状況やキーボタンに。ヒント：2番目に明るい色をカード背景に使うと、重い罫線なしでも内容が区切れます。
media.io を使用して生成されたアークティックコンクリートの画像例
16) シーサイドペブル
HEX： #283744 #516575 #92A3AF #D9E1E6 #B7A190
雰囲気：ナチュラル、バランス、控えめ
おすすめ用途：セラミックキャンドルのパッケージやライフスタイル商品の広告
ナチュラルで控えめ、滑らかな小石や風化した流木を感じさせます。クールな色はラベルやサブパネルに、トープのアクセントで柔らかいアースカラーコントラストに。ミニマルなセリフ体タイポグラフィや未加工紙と好相性。ヒント：明るい白ではなく、温かみのある白背景を選び、雰囲気をオーガニックに保ちましょう。
media.io を使用して生成されたシーサイドペブルの画像例
17) モダンヘリテージ
HEX： #223141 #3E5568 #6D859C #B9C8D3 #C7A574
雰囲気：クラシック、自信、暖かみアクセント
おすすめ用途：プレミアム紳士服ブランドやブティック看板
クラシックで自信に満ち、仕立てスーツに暖かい真鍮ディテールを思わせます。深い色調はロゴやモノグラムに力強さを与え、淡いブルーは資料を重たくせずに保ちます。ゴールドタンのアクセントは、テクスチャ紙や空押し、さりげない模様と合わせて伝統的な仕上げに。ヒント：アクセントは罫線やアイコンなどのみに使い、洗練されたバランスを保ちましょう。
media.io を使用して生成されたモダンヘリテージの画像例
18) ウィンターブロッサム
HEX： #2C3846 #5A6A7A #9AA8B5 #DCE3EA #E7B7C6
雰囲気：ソフト、ロマンチック、寒色系
おすすめ用途：水彩フローラルの文房具や季節のカード
ふんわりとロマンチックで、寒空に淡い花びらが映えるようなイメージ。ブラッシュピンクのアクセントは控えめに甘さをプラスします。細やかなラインや淡いウォッシュ、余白たっぷりで上品なカードデザインに。ヒント：ピンクは小さな花や封止めにだけ使い、寒色の中立さを生かしましょう。
media.io を使用して生成されたウィンターブロッサムの画像例
19) ディープティールシャドウ
HEX： #14212B #2B3E4A #4E6A73 #9DB2B8 #E9EFF0
雰囲気：ミステリアス、クール、現代的
おすすめ用途：テック系ランディングページや商品紹介セクション
ミステリアスでクール、薄暗い深水を連想させます。一番濃い色はヒーローセクションやナビに、霞んだ色は特徴ブロックや図解に使います。白アイコンやリンク用にエレクトリックシアンのワンポイントとも好相性。ヒント：ダークな背景では行間・余白を多めにとって息苦しくならないようにしましょう。
media.io を使用して生成されたディープティールシャドウの画像例
20) クラウデッドネイビー
HEX： #182535 #2F4157 #5D748C #A7B6C3 #EEF2F5
雰囲気：自信、クリーン、プロフェッショナル
おすすめ用途：ビジネスレポート、提案書、ウェブヘッダー
自信がありクリーンで、雲で和らいだ海軍の制服を思わせます。濃いネイビーグレーは見出しやセクションバー、淡い中立色は可読性の高い本文に。鮮明な白や細い仕切り、控えめなデータビジュアライゼーションと自然に調和します。ヒント：ハイパーリンクは中間ブルーを使い、目立たせつつ彩度が高くなりすぎないようにしましょう。
media.io を使用して生成されたクラウデッドネイビーの画像例
ブルーグレーと相性の良い色は？
暖かいアクセントを加えると、ブルーグレーが最も早く心地よさを感じられるようになります。サンド、キャメル、ブロンズ、ゴールドタン、テラコッタ、淡いコーラルは、調和を崩さずコントラストを加えます。
フレッシュでオーガニックな印象が欲しいなら、ブルーグレーとセージやユーカリ、ディープティールのような落ち着いたグリーン系を合わせてください。これらはクールトーン同士で、静かで現代的な雰囲気を保ちます。
パリッとした高い可読性（特にUI）のデザインには、ブルーグレーとクリーンな白、ほぼ黒を組み合わせます。ニュートラルだけの配色は文字をくっきり見せ、アクセントカラー一色（状態やCTA用）を加える余裕を残します。
実際のデザインでブルーグレーカラーパレットを使う方法
まず役割分担を決めます：見出しやナビには濃いブルーグレー、セカンダリーUIや家具は中間色、背景面にはごく淡いトーンを選びます。これでアクセントを加える前に階層性が生まれます。
アクセントは意図的かつ限定的に――「10%未満のカバレッジ」を意識。ワンポイントの暖色（サンド、ブロンズ、ブラッシュなど）をハイライトやアイコン、バッジ、ハードウェアに使い、システム全体を一体感のあるものにしましょう。
印刷物やブランディングでも、ブルーグレーはマット紙や未加工紙で高級感が出ます。テクスチャ（グレイン、リネン、水彩紙）を足すことで平坦にならず、繊細な色味のニュアンスが活かされます。
AIでブルーグレーパレットのビジュアルを作る
コンセプトの提案やムードボード作りには、クイックなビジュアル生成が役立ちます。部屋、パッケージ、UIモック、ポスターなど文脈に合ったブルーグレー配色を「見せて」納得感を高められます。
プロンプトでは光・素材・スタイル（マット、ヘアラインメタル、柔らかな日光、ミニマルなレイアウトなど）を描写し、デザイン段階で指定のHEXカラーを適用して正確にイメージを再現します。
ブルーグレーカラーパレット よくある質問
-
ブルーグレーのカラーパレットとは？
ブルーグレーのカラーパレットとは、グレーのアンダートーンを持つ落ち着いたブルー系のカラ―セットで、深いネイビーグレーから淡いミスティグレーまでが含まれます。柔らかなコントラストで、静かでモダン、プロフェッショナルなデザインによく使われます。 -
ブルーグレーは暖色？寒色？
多くのブルーグレーは寒色として感じられ、特にブルーが強いほどクールです。サンド、キャメル、ブロンズ、ブラッシュなどのアクセントを加えたり、純白でなく温かみのあるオフホワイトを選ぶと暖かく仕上げられます。 -
ブルーグレーに合うアクセントカラーは？
おすすめはサンドベージュ、ブロンズ、ゴールドタン、コーラル、ブラッシュ、セージやディープティールのような渋めグリーンです。UIではアンバーやシアン、ライムなど明るいアクセントを一色だけ、アクティブ状態用として加えるのも有効です。 -
モダンUIにおすすめのブルーグレーのHEXコードは？
濃い基調カラー（例 #1F2A35 や #202B33）、パーツ用の中間色（#455766 や #788792）、明るい面用（#F3F6F8 や #F3F5F6）を選び、階層と可読性をしっかり保てます。 -
ブルーグレーが地味に見えない工夫は？
意図的にコントラストをつけ（明るい面に濃い文字）、暖色ポイントを一つ加え、素材やさりげないグレインでテクスチャを出しましょう。レイアウト上は余白多め＆明快なタイポスケールも効果的です。 -
ブランディングにもブルーグレーは使えますか？
はい。ブルーグレーはテック、ウェルネス、金融、プレミアム小売などで人気。信頼感と洗練さがあり、目を引くアクセントと一貫したタイポグラフィを合わせるとブランド感が強まります。 -
スレートブルーグレーとスチールブルーグレーの違いは何ですか？
スレートブルーグレーは、より深く落ち着いた（やや重みのある石のような）雰囲気があり、スチールブルーグレーは、よりクリアで明るく、磨かれた金属に近い印象です。どちらも同じ系統の色ですが、異なる雰囲気を伝えます。
次へ： ブラックグリーンのカラーパレット
