グレーブルーは「ニュートラルだけど退屈でない」珍しい色のひとつです。グレーの落ち着きを持ちつつ、ブルーの明快さと信頼感を兼ね備えているためです。そのため、現代のUIから穏やかなインテリアまで幅広く活躍しています。
以下はHEXコード付きのグレーブルーのカラーパレット20選と、それぞれの組み合わせが最適な用途、AIによるビジュアライズ方法の簡単なガイドです。
この記事の内容
グレーブルーパレットが優れている理由
グレーブルーはクールなニュートラリティと感情的なカラーの間に位置し、無機質にならずにプロフェッショナルさを演出します。そのため、信頼・明快さ・ネイビーよりも柔らかな雰囲気を求める現代ブランドの定番となっています。
UIやプロダクトデザインでは、グレーブルーによって自然な階層が生まれます。淡色はクリーンな面、ミディアムトーンはナビゲーションや状態表示、濃い色はテキストやCTAのコントラストをしっかり保ちながらもブラックほど強すぎない使い方が可能です。
インテリアの場合、グレーブルーは落ち着きと柔軟性をもたらします。木材、石、リネン、金属とも組み合わせやすく、開放感があり、居心地の良い空間づくりに最適です。
20以上のグレーブルーカラーパレットアイデア（HEXコード付き）
1）ミスティハーバー
HEX： #E7EDF2 #B9C6D3 #7E93A6 #445A6B #2C343E
印象： エアリー、落ち着き、海岸風
おすすめ用途： 海辺のリビングルームインテリア
静かなマリーナに朝霧がかかったようなエアリーで落ち着きのある配色。クリーンながら冷たくならず、壁や家具、造作に柔らかなコントラストを生み出します。温かみのあるオーク材、リネン、ヘアラインニッケルと組み合わせるのがおすすめ。使い方のコツ：最も濃い色はトリムやアクセント用に使い、空間が平坦にならないようにしましょう。
media.ioで生成したミスティハーバーのイメージ例
Media.ioは、ブラウザ上で動画・画像・音声の作成と編集ができるオンラインAIスタジオです。
2）スチール＆スカイ
HEX： #F4F6F8 #CBD3DA #8FA1B0 #566977 #1F2A33
印象： モダン、構造的、プロフェッショナル
おすすめ用途： SaaSダッシュボードUI
淡い空の下のガラスのタワーのように、モダンで構造的な配色。コントラストが明快で信頼感があります。淡い色は面やカード、ミッドブルーはナビゲーションやアクティブステートに。最も濃い色はブラックほどきつくないテキストやアイコン用におすすめ。使い方のコツ：背景に5〜10％ほどの淡い色を加えると大画面でもまぶしさを軽減できます。
media.ioで生成したスチール＆スカイのイメージ例
3）コースタルフォグ
HEX： #EEF2F5 #C7D2DB #94A7B6 #5F7686 #364553
印象： 柔らかい、控えめ、そよ風のよう
おすすめ用途： ウェルネスブランドのアイデンティティ
海岸の靄に消えていくような控えめで柔らかな色合い。クリアでありながら冷たい明るさではなく、ウェルネスブランドなどで上質さと安心感を与えます。オフホワイトの紙、マット仕上げ、少量のサンドまたはクレイカラーが温かみのアクセントに。使い方のコツ：ロゴに中間色一色を使い、他はサポート的なニュートラルカラーとしてまとめましょう。
media.ioで生成したコースタルフォグのイメージ例
4）デニムドリフト
HEX： #E9EEF3 #B8C4D1 #7A90A8 #3F5C79 #24384B
印象： カジュアル、自信、親しみやすさ
おすすめ用途： ECファッションバナー
履き込んだデニムのようなカジュアルさと自信を感じる親しみやすい配色。ファッションやライフスタイルのクリエイティブにおすすめで、クリーンな余白との組み合わせが効果的です。暖かなタンや真鍮アクセントを加えると冷た過ぎになりません。コツ：最も濃いブルーは見出しやボタン用に使い、CTAを際立たせましょう。
media.ioで生成したデニムドリフトのイメージ例
5）レイニーウィンドウ
HEX： #F2F4F7 #D0D8E0 #A0B1BF #6B7F8F #3A4652
印象： しっとり、やさしい、穏やか
おすすめ用途： エディトリアルマガジンレイアウト
窓のガラスについた雨粒のようなしっとり穏やかな色合い。エディトリアルのレイアウトで階層感を重視したい時に最適です。温かみのあるグレースケール写真、細い罫線、セリフ書体の見出しで上品さを演出。コツ：本文は最も明るい色、引用やセクションラベルにミッドブルーを使い分けましょう。
media.ioで生成したレイニーウィンドウのイメージ例
6）グラファイトタイド
HEX： #DDE4EA #AEBBC6 #778C9D #3E5666 #1C2A33
印象： ムーディー、重厚、シネマティック
おすすめ用途： 映画ポスターのタイポグラフィー
雲に覆われた暗い潮のようなムーディーで重厚なミックス。映画ポスターやドラマティックなキャンペーンに最適。メタリックやオフホワイトのアクセントで視認性アップ。コツ：背景は最も濃い色、書体のコントラストに明るい2色を使いましょう。
media.ioで生成したグラファイトタイドのイメージ例
7）ウィンターシーグラス
HEX： #F6F8FA #D7E0E7 #A8B9C6 #6E8797 #3E515D
印象： フレッシュ、静か、ミニマル
おすすめ用途： スキンケアパッケージデザイン
霧がかったシーグラスのような清潔感・柔らかさ・信頼感がある配色。スキンケアパッケージなど、クリーンでありながら過度に冷たい印象を避けたい場合にぴったり。マットホワイト、さりげないエンボス、小さな銀箔ディテールでプレミアム感を演出。コツ：ラベルは主に淡い色、目立たせたい情報にミッドトーン使用でエアリーさを保ちます。
media.ioで生成したウィンターシーグラスのイメージ例
8）アーバンブループリント
HEX： #E3EAF0 #B4C3D0 #7C93A7 #4D6A83 #273646
印象： スマート、テクニカル、現代的
おすすめ用途： 建築ポートフォリオサイト
製図台の上の青写真のように、スマートで精巧・現代的な配色。建築ポートフォリオなど、画像はクリーンな枠、テキストはシャープさが求められる場面に。暖かなコンクリートやメープル、テラコッタのアクセントで技術的になりすぎるのを防ぎます。コツ：ナビゲーションやホバーにはミッドブルーで、さりげなく目立つ配色に。
media.ioで生成したアーバンブループリントのイメージ例
9）クワイエットラグーン
HEX： #F1F5F8 #C9D4DE #93A7B6 #5F7787 #34444F
印象： 穏やか、バランス、スパのような
おすすめ用途： 瞑想アプリUI
夕暮れの静かな水面のような穏やかでバランスのとれたリズム感ある配色。アプリ用グレーブルーパレットとして画面を落ち着かせつつも階層整理がしやすいのが特徴。優しいグラデーションや丸みのある構成、クリーム色の差し色で無機質になりすぎません。コツ：最も濃い色は主なアクション用に、その他は低コントラストでまとめてリラックス感を。
media.ioを使って生成された静かなラグーンのイメージ例
10) シルバーラインナイト
HEX： #D9E1E8 #A9B7C3 #6F8798 #3D5564 #131B22
印象： 洗練された、夜間、プレミアム
おすすめ用途： フィンテックのランディングページ
濡れた舗道に光る都市の灯のように、洗練されて夜を感じさせるこのパレットは、高級感と安心感を与えます。攻撃的な色合いを避けながら、自信を持ちたいフィンテックブランドに最適なグレーとブルーの強い組み合わせです。すっきりとした白いタイポグラフィ、細ラインのアイコンや、抑制されたシアンのアクセントを合わせて使いましょう。利用アドバイス：最も暗い色調をヒーローセクションに使い、スクロールに合わせて明るい色調へとフェードアウトさせます。
media.ioを使って生成されたシルバーラインナイトのイメージ例
11) ノルディックスレート
HEX： #F7F8F9 #D3D9DE #9CAAB5 #667784 #2F3C45
印象： 北欧風、クリーン、居心地が良い
おすすめ用途： ミニマルなキッチンスタイリング
北欧の冬の朝のように清潔で暖かさのある色合いで、柔らかくも意図を感じる雰囲気です。淡い木材、マットな陶器、シンプルな金具などのミニマルキッチンに最適です。控えめなセージグリーンの植物や、温かみのある真鍮の取っ手を加えて、冷たいベースを引き立てましょう。利用アドバイス：空間に中間のグレー・ブルーを2回繰り返し使い、偶然ではなく意図的な印象に。
media.ioを使って生成されたノルディックスレートのイメージ例
12) グレイシャーインク
HEX： #EAF1F7 #C2D1E0 #89A2B8 #4E6A82 #223243
印象： シャープ、明るい、ハイコントラスト
おすすめ用途： プレゼンテーション用スライドデッキ
氷河の氷に差し込む光のようにシャープで明るいこのセットは、内容をモダンで鮮明に保ちます。グラフ・コールアウト・見出しなど、明確なコントラストが求められるスライドデッキに特に最適です。コーラルや琥珀色など暖色のアクセントを1つ加えることで、重要な数値が際立ちます。利用アドバイス：グリッドはとても薄くし、最も濃い色はデータラベルや合計値にのみ使いましょう。
media.ioを使って生成されたグレイシャーインクのイメージ例
13) クラウディピア
HEX： #F0F3F6 #D0DAE3 #A0B0BE #6A8092 #3B4B59
印象： ソフト、海風、リラックス
おすすめ用途： カフェのメニューデザイン
曇り空の静かな桟橋のように、柔らかく穏やかな海の雰囲気でリラックス感を演出できます。カフェのメニューにぴったりで、視認性と穏やかな海辺テイストを両立できます。クリーミーな紙、シンプルなラインイラスト、コーヒーらしい温かみのあるブラウンアクセントと合わせてください。利用アドバイス：中間色をセクション見出しに、メニューの文字は最も明るい色の背景にして可読性を保ちましょう。
media.ioを使って生成されたクラウディピアのイメージ例
14) オーシャンクリート
HEX： #E4E9EE #B7C3CD #8396A6 #546A79 #2B3943
印象： インダストリアル、バランス、コンテンポラリー
おすすめ用途： モダンオフィスインテリア
コンクリートを通る海風のような、インダストリアルなのに落ち着いた雰囲気で、現代的で快適に暮らせる印象です。ブラックスチール、ウォールナット、テクスチャー感あるファブリックで集中力を高めたいオフィスに最適です。壁や広い面には最も明るい2色を、ラグや吸音パネルで濃い色を使用します。利用アドバイス：空間が冷たすぎる印象を避けるため、暖かな光を1つ追加しましょう。
media.ioを使って生成されたオーシャンクリートのイメージ例
15) ブルーアッシュミニマル
HEX： #F8FAFB #D9E1E7 #AAB7C2 #738595 #384650
印象： ミニマル、やさしい、すっきり
おすすめ用途： 履歴書・CVテンプレート
灰色がかった紙のようにミニマルでやさしい色合いが、レイアウトをすっきりと自信ある印象に保ちます。大きなボックスや派手な色を使わず、履歴書に構造を持たせたいときに最適です。クリーンサンセリフと温かみのあるグレーで区切りを入れるのがポイント。利用アドバイス：中間色を見出しに、本文はほぼ白で最大の可読性を担保しましょう。
media.ioを使って生成されたブルーアッシュミニマルのイメージ例
16) ストーミーリネン
HEX： #EFEFEF #C9D1D7 #94A2AE #5E717F #2D3A43
印象： テクスチャー、温/冷混在、タイムレス
おすすめ用途： 寝室のカラースタイリング
くしゃくしゃのリネンの上の嵐雲のように、テクスチャーと時代を超えた落ち着きを感じさせる色調です。ひんやりとした落ち着きの中に、温もりを加えたい寝室にぴったりです。オートミール色の寝具、自然なジュート、そしてソフトな黒のアクセントを合わせると空間が引き締まります。利用アドバイス：テキスタイルには中間色を2色レイヤーし、単調に見せず意図的な印象に。
media.ioを使って生成されたストーミーリネンのイメージ例
17) ペブルウェーブ
HEX： #E8EEF2 #C1CCD5 #8B9EAD #5A7180 #2E3D47
印象： ナチュラル、バランス、静かなエネルギー
おすすめ用途： アウトドア用品広告
流れる水の下の滑らかな小石のように、ナチュラルで安定感がありつつ、静かでエネルギッシュな色調です。アウトドア用品広告の背景に最適で、商品ディテールを際立たせます。機能的なハイライトとして安全オレンジやライム色を一点だけ添えましょう。利用アドバイス：背景はやや明るめ、中〜濃色2色で影に深みを。
media.ioを使って生成されたペブルウェーブのイメージ例
18) ミュージアムウォール
HEX： #F3F5F6 #D2D9DE #A5B2BC #6B7F8E #34414A
印象： 静謐、厳選、洗練
おすすめ用途： ギャラリーイベント招待状
柔らかなスポットライトの下のミュージアムの壁のように、静かで洗練された意図的な空気を感じさせます。タイポグラフィが主役のエレガントな招待状に最適です。十分な余白、上品なセリフ体、小さなメタリックディテールで仕上げて。利用アドバイス：背景は明るく、最もダークな色を名前・日付・階層に使いましょう。
media.ioを使って生成されたミュージアムウォールのイメージ例
19) ミッドナイトヘイズ
HEX： #DCE4EA #AEBCC7 #7890A0 #445E6F #0F1720
印象： ドラマチック、洗練、モダン
おすすめ用途： 音楽アプリ再生中UI
ネオンのない夜道にかかる霞のように、ドラマチックで洗練されたムードを演出する色調です。ここでのグレーブルーの組合せはアルバムアートを印象的に見せつつ、コントロールの視認性も確保。控えめなグラデーションと、再生状態を示すソフトティールやマゼンタなどのアクセントカラーを一点だけ足しましょう。利用アドバイス：プレイヤー背景にはほぼ黒を、テキストは最も明るい色の上に配置してコントラストを注視しましょう。
media.ioを使って生成されたミッドナイトヘイズのイメージ例
20) ノーティカルペーパー
HEX： #FAFAF8 #D8E0E6 #A7B6C2 #6C8292 #2E3C46
印象： クラシック、クリーン、印刷向き
おすすめ用途： ステーショナリー・レターヘッド
パリッとしたステーショナリーに海の香りを感じさせるような、信頼感と時代を超えた美しさを持つ配色です。グレーブルーパレットとして、レターヘッドや請求書、ブランド文具に最適で、印刷物としても上品に仕上がります。テクスチャー感あるオフホワイト用紙や、サイン・スタンプ用の深いインク色と合わせて。利用アドバイス：ロゴはダーク1色で抑え、1ページに2色までにすればプレミアムな高級感に。
media.ioを使って生成されたノーティカルペーパーのイメージ例
グレーブルーと相性が良い色は？
アイボリー・オートミール・ベージュ・温かみのあるグレーなどの暖色系ニュートラルを合わせるのが最も簡単な方法です。グレーブルーを落ち着きとモダンさを保ちつつ温かみをプラスできます。インテリアではナチュラルウッド（オークやウォールナット）で冷たさを和らげましょう。
コントラストには、タイポグラフィや構造にダークチャコールやほぼ黒を、注目したい CTA や主要な数値はコーラルや琥珀、ターコイズなど明るいアクセントを小さく効かせましょう。
よりオーガニックな印象にしたい場合は、くすみグリーン（セージ、ユーカリ）やテラコッタ風の土色を加えましょう。温冷のバランスでコンテンポラリーかつ冷た過ぎない雰囲気を生み出します。
グレーブルーのカラーパレットを実際のデザインで使う方法
「きれいな色」だけでなく、役割から配色を考えましょう：一番明るい色は背景、2番目は面やカード、中間色はナビゲーションやボーダー、最も暗い色はテキスト・アイコン・主要アクションに使います。
飽和度は控えめにし、「冷たいオフィス」感を回避します。見た目が冷た過ぎる場合はペーパーの質感・リネン・木などの素材や一貫した暖色系アクセント（コーラル等）で調整してください。
印刷やブランディングでは、アクティブなパレットは2〜3色に絞り、残りはサポートとして使いましょう。制限があるほうがグレーブルーは高級感・計画性を演出します。
AIでグレーブルーパレットのビジュアルを作成する
これらのグレーブルーを実際のコンテキスト（ダッシュボード・寝室・パッケージ・招待状）で見てみたい場合は、テキストプロンプトで素早くコンセプトビジュアルを生成してみましょう。コントラストや雰囲気、素材の組み合わせを生産前に検証できます。
Media.ioなら、プロンプトから数分でクリーンなモックアップやスタイリングシーンを生成し、コーラルとターコイズなどアクセントを入れ替えてもニュートラルベースは変わりません。
形式（UI、ポスター、インテリア）や照明、素材を伝え、「パレットに合わせた色」と付記すると統一感ある出力になります。
グレーブルーカラーパレット よくある質問
-
グレーブルーカラーパレットとは？
グレーブルーパレットとは、青色をグレーで落ち着かせた色合い群で、穏やかで中立的な雰囲気と、モダンかつ信頼感のある印象が特徴です。 -
グレーブルーは温かい色ですか、冷たい色ですか？
多くのグレーブルーは青ベースのため冷たく見えますが、アイボリー・ベージュ・オークなどの暖色ニュートラルやテラコッタ・琥珀などの暖かいアクセントと合わせるとバランスの良い印象になります。 -
グレーブルーと相性の良いアクセントカラーは？
コーラル、琥珀、テラコッタ、セージ、ターコイズが人気です。アクセントはデザインの5～10%程度に抑え、パレット全体の統一感を保ちましょう。 -
グレーブルーはUIやダッシュボードにも向いていますか？
はい。グレーブルーは階層性が強調でき、疲れにくいビジュアルを実現するためUIに向いています。淡い色は面・サーフェスに、中間色は状態に、濃い色はテキストや主要アクションにおすすめです。 -
グレーブルーが冷たすぎる印象にならないようにするには？
リネンや紙の質感・木素材など温かみのある素材・テクスチャーを取り入れる、インテリアなら暖色照明を使う、ハイライトやCTAに暖色系アクセントを一点入れるのが有効です。 -
明るいグレーブルーの背景におすすめのテキストカラーは？
ディープチャコールまたはほぼ黒に近いグレーブルー（純粋な黒の代わり）は、見た目を柔らかく保ちながら高い可読性を提供します。アクセシビリティのためにコントラストを必ず再確認しましょう。 -
AIでパレットベースのモックアップを生成できますか？
はい。テキストから画像生成ツールを使い、デザインの種類（例：「SaaSダッシュボード」「スキンケアパッケージ」）と「パレットに合わせた色」を指定することで、選択したHEXトーンに沿ったアウトプットが得られます。
次へ： ターコイズブルーのカラーパレット
