人気のグレー×ダークブルー配色20選｜おすすめHEXコードと使い方コツ

グレーダークブルーのパレットは、モダンなニュートラルと深みのある自信に満ちたカラーの間の絶妙なバランスを持ちます。UIではクリーンに見え、ブランディングでは高級感があり、インテリアでは落ち着いた印象を与えます。

コンクリートを思わせるグレーからインクのようなネイビーアクセントまで、これらの配色は背景やタイポグラフィ、補助要素にも簡単にスケーリングでき、コントラストや明瞭さを損なうことはありません。

なぜグレーダークブルーパレットがこんなにも効果的なのか

グレーとダークブルーは自然にバランスの良いコントラストを生み出します：グレーは中立性と構造を、ダークブルーは深みと威厳をもたらします。一緒に使うことで、無機質になりすぎずモダンな印象に仕上がります。

これらのパレットは媒体を問わず柔軟性があります。画面上ではネイビー寄りのダークブルーが読みやすいタイポグラフィやアクセシブルなUI状態を支え、印刷物ではクールなグレーがレイアウトを鮮明かつ一貫性のあるものに保ちます。

色調が抑えめなので、銅色やコーラル、ネオングリーンのようなアクセントを一色加えるだけで、配色の基盤を損なわずに簡単にヒエラルキーを生み出せます。

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

1）ストーミーコンクリート

HEX： #2b2f36 #404754 #5d6675 #8a919c #cfd3d8

イメージ： 都会的、落ち着き、安定感

最適な用途： モダンなインテリアデザインのムードボード

涼しげな雨に洗われたコンクリートと真夜中の影が、静かで都市的な雰囲気を演出します。温かみのある木材やブラッシュドブラスを加えると、洗練されつつも冷たさを感じさせません。リビングやオフィス、明瞭さが求められる建築プレゼンテーションのために、このグレーダークブルーカラーパレットを使いましょう。コツ：一番明るいグレーをメインの面色に、そして深いネイビーはトリムやフォーカルポイントに使いましょう。

ストーミーコンクリートの画像例（media.io生成）

Media.io

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

今すぐ無料で試す

2）ミッドナイトハーバー

HEX： #0b1d33 #123a5a #1f5a7a #6b7c8a #d7dde2

イメージ： 海洋的、映画的、自信

最適な用途： ブランドヒーローバナーやランディングページ

インクのような水面、ドックライト、シャープな地平線がこのセットにシネマティックなエッジを与えます。深みのあるブルーが見出しを引き立て、クールなグレーがレイアウトをクリーンに保ちます。コッパーやコーラルなどの暖色アクセントを一つ加えると即座にコントラストが生まれます。コツ：淡いグレーは本文の背景に使うと、重すぎる印象を防げます。

ミッドナイトハーバーの画像例（media.io生成）

3）スレート＆シルバー

HEX： #1c2430 #2f3b4a #4a5665 #a7b0ba #f2f4f6

イメージ： 洗練、ミニマル、プロフェッショナル

最適な用途： 企業向けスライド資料やレポート

滑らかなスレートと柔らかいシルバーは、涼しいオフィス照明の下で仕立ての良いスーツのような印象です。これらの色調はグラフや表、情報量の多いテキストも読みやすく、退屈に見えません。ティールやゴールドなど控えめなアクセントカラーをポイントや区切りに加えましょう。コツ：最も暗い色は見出しや重要な数字に使い、即座に情報の階層を作りましょう。

スレート＆シルバーの画像例（media.io生成）

4）デニムオフィス

HEX： #0f2a43 #1e3a57 #3a5872 #7c8b97 #e6e9ec

イメージ： 親しみやすい、モダン、信頼感

最適な用途： SaaS UIや設定画面

ソフトなグレーのニュートラルとクリーンなデニムブルーは、親しみやすく生産的な雰囲気です。コントラストの幅が広いので、ナビゲーションから繊細な区切りまでUIの状態がわかりやすくなります。明るいライムやシアンなどのアクションカラーを主ボタンに組み合わせましょう。コツ：中間色のブルーは選択状態に使い、最も濃い色はアクセシビリティ重視のテキスト用に温存しましょう。

デニムオフィスの画像例（media.io生成）

5）ウィンターアスファルト

HEX： #1a2028 #2d3540 #444e5c #8b949e #f7f8fa

イメージ： シャープ、クール、控えめ

最適な用途： ファッションルックブックやEC写真の背景

ダークなアスファルトに差すフロスティな光がクリーンでエディトリアルな涼感を生みます。配色は商品写真やタイポグラフィを引き立て、ファブリックやシルエットの主張を邪魔しません。オフホワイトスペースや、赤などのビビッドなアクセントをセールタグに加えるのがおすすめ。コツ：影色をやや青みがかったままにすると冬らしい雰囲気を写真全体に維持できます。

ウィンターアスファルトの画像例（media.io生成）

6）インクバウンドミニマル

HEX： #111822 #1e2a3a #2f4157 #7a8696 #dfe4ea

イメージ： 集中、エレガント、静寂

最適な用途： ポートフォリオサイトやケーススタディ

深いインクの濃淡と柔らかいグレーは、夜の明るいデスクスタジオのような雰囲気です。控えめなコントラストが長文のケーススタディも見やすくし、とくにタイポグラフィのヒエラルキーが効果的です。暖かみのあるニュートラル（サンドなど）を加えてページが冷たくなりすぎるのを防ぎましょう。コツ：ライトグレーはセクション背景に使い、画像やスクリーンショットを際立たせます。

インクバウンドミニマルの画像例（media.io生成）

7）コースタルダスク

HEX： #0e2538 #163b55 #2e607a #7b8f9e #e9f0f4

イメージ： フレッシュ、エアリー、海辺

最適な用途： 旅行ポスターや観光ガイド

海風と夕暮れ時のブルーがページに爽やかで穏やかな雰囲気をもたらします。これらのグレーダークブルーの組み合わせは、明瞭さとムードが共存する旅行用グラフィックに最適です。サンドベージュや日差しを感じるピーチと合わせれば、温かみやノスタルジーもプラス。コツ：一番明るい色を背景に使えば、解放感のある空模様が残せます。

コースタルダスクの画像例（media.io生成）

8）グラファイトブロッサム

HEX： #2a2d33 #3b3f48 #2b4a66 #6a8aa6 #e7edf2

イメージ： ムーディー、ソフト、アーティスティック

最適な用途： ボタニカルイラストやステーショナリー

スモーキーなグラファイトと優しいブルーの花びらが詩的で少し謎めいた雰囲気です。ダークなニュートラルは奥行きを、明るいハイライトは花モチーフを重くしません。落ち着いたモーヴやクリーム色の紙の質感と合わせればロマンチックな仕上がり。コツ：中間の青は線画に使い、最も濃い色は影用に温存しましょう。

グラファイトブロッサムの画像例（media.io生成）

9）スチールブループリント

HEX： #101826 #20314a #325070 #6d7e8c #c9d1d9

イメージ： テクニカル、精密、モダン

最適な用途： データダッシュボードや分析用UI

ブループリントのブルーとスチールグレーはシャープで整然とし、静かに未来感も感じさせます。数値の階調がグラフやグリッド、ホバー状態をノイズなくサポートします。アクセントにはネオングリーンなど明るい色を一色のみ使い、アラートや成功状態を際立たせましょう。コツ：グリッドラインは明るいグレーで、データそのものに注目が集まるようにします。

media.ioを使用して生成されたスチール設計図の画像例

10）ミュージアム・ナイト

HEX： #0a0f19 #152033 #223552 #5f6d7c #e0e5ea

イメージ：ラグジュアリー、ドラマティック、キュレーション感

最適な用途：アート展示会のチラシやイベントプロモーション

薄暗いギャラリーの壁とスポットライトのあたったフレームが、ドラマティックでキュレーションされた雰囲気を演出します。深い色合いはタイポグラフィを高級感ある印象にし、淡いグレーは日付や詳細を読みやすく保ちます。仕上げにシャンパンゴールドのような洗練された差し色をプラスすると、よりハイエンドな雰囲気に。ポイント：最も暗い色を背景に、最も淡いグレーでテキストを配置すると、きれいなコントラストが生まれます。

media.ioを使用して生成されたミュージアム・ナイトの画像例

11）クラウデッド・ネイビー

HEX： #141b24 #223044 #2f4663 #6f8294 #f0f3f6

イメージ：ソフト、信頼感、バランス

最適な用途：ヘルスケアブランドやサービス系ウェブサイト

曇りがかったネイビーとミスティグレーが安心感と落ち着きをもたらします。柔らかな色合いはウェルネスブランドにも適しつつ、サービスページやフォームにはしっかりとした印象を与えます。やさしいグリーンやアクアと組み合わせると、クリーンでケアの行き届いた印象に。ポイント：ミドルグレーはセカンダリーボタンやヘルパーテキストに使い、プライマリーアクションが際立つようにしましょう。

media.ioを使用して生成されたクラウデッド・ネイビーの画像例

12）インダストリアル・シック

HEX： #23272f #2d3440 #384659 #5b6f86 #b9c3cc

イメージ：エッジィ、モダン、実用的

最適な用途：メンズグルーミング製品のパッケージ

マットな金属グレーとダークブルーのアクセントが、力強くクリーンで実用的な印象を与えます。このパレットはミニマルなラベルに最適で、タイポグラフィや仕上げが主役になります。ウォームメタリックの箔押しや、さりげないテクスチャを加えて触感のコントラストを演出しましょう。ポイント：最も暗い色でリッチな背景を印刷し、淡いグレーは成分表示や法的表記に使いましょう。

media.ioを使用して生成されたインダストリアル・シックの画像例

13）クワイエット・オブザーバトリー

HEX： #0c1624 #16263b #27415f #6b7f95 #d9e2ea

イメージ：思慮深い、サイエンティフィック、静謐

最適な用途：教育用インフォグラフィックや科学系ブログ

夜空のようなブルーとコントロールされたグレーが、静かな天文台と集中した好奇心を感じさせます。コントラストは図表やチャート、長文読み物にも最適で、明瞭さが鍵となります。グレーダークブルーの配色は、ハイライトや注釈に少しイエローを加えると相性抜群です。ポイント：見出しに最も深い色を使い、淡いグレーを使って情報量の多いパートを読みやすくしましょう。

media.ioを使用して生成されたクワイエット・オブザーバトリーの画像例

14）ノルディック・ワークデイ

HEX： #2b3138 #3a4754 #1f3b57 #6c7d8a #f3f5f7

イメージ：北欧風、整然、実用的

最適な用途：プロダクティビティアプリのUIやToDoリスト

クリーンな北欧ニュートラルと深いブルーのアンカーで、整然として静かにやる気を高めます。丸みのあるカードやシンプルなアイコンは、淡い背景の上で特にシャープに映えます。このグレーダークブルーパレットは、色の使用を「アクティブ」「完了」「期限切れ」など状態だけに限定すると最も効果的です。ポイント：最も暗いブルーをプライマリーアクションに割り当て、残りのグレーで構造と余白を作りましょう。

media.ioを使用して生成されたノルディック・ワークデイの画像例

15）チャコール・ラベンダー

HEX： #2a2a31 #3a3b46 #2b365f #8a8faa #f6f4f8

イメージ：ソフト、エレガント、ほのかにロマンチック

最適な用途：ウェディング招待状やフォーマルステーショナリー

チャコールの影にラベンダーを帯びた明るさが、フォーマルと優しさの両方を感じさせます。クールなニュートラルは文字をシャープに保ち、ソフトなハイライトが夢のような紙質感を加えます。パールホワイトの用紙やシルバー箔のアクセントと合わせると品のある仕上がりに。ポイント：本文テキストはチャコールで、ラベンダーグレーは装飾線やモノグラムだけに使いましょう。

media.ioを使用して生成されたチャコール・ラベンダーの画像例

16）レイニー・コミュート

HEX： #1f232b #2c3441 #3b4b5f #6f7f8e #dde2e7

イメージ：ムーディー、日常的、安定感

最適な用途：ストリートウェアのルックブックやSNS投稿

濡れた舗道のグレーと通勤ブルーがリアルでテクスチャ感のあるモダンな印象に。中間色は写真のオーバーレイに最適で、キャプションを読みやすくしつつ圧迫感がありません。安全オレンジのような大胆なアクセントと組み合わせればストリート感UP。ポイント：淡いグレーは余白に使うと、モバイルでのパレットの呼吸感を保てます。

media.ioを使用して生成されたレイニー・コミュートの画像例

17）ディープシー・メトロ

HEX： #081a2a #0f2e46 #1d4d63 #4f6d7a #b9d0d8

イメージ：クール、モダン、エネルギッシュ

最適な用途：テック製品の広告やアプリランディングページ

深海のようなブルーに明るく水彩的なハイライトをあしらい、洗練されスピード感のある雰囲気に。見出しやグラデーションのアクセント、カードの微細な奥行きにも最適。余白と単一のネオンアクセントで、現代的なテックイメージを演出。ポイント：ライトなブルーグレーでグローやセパレーターを作ると、真っ白よりも洗練されます。

media.ioを使用して生成されたディープシー・メトロの画像例

18）スモーキー・サファイア

HEX： #1c1f28 #2a3240 #1e3a68 #3d6a9a #cfd9e6

イメージ：力強い、ラグジュアリー、夜間向き

最適な用途：ジュエリーブランドやプレミアムパッケージ

スモーキーな影とサファイアブルーで、ラグジュアリーかつ夜向けの雰囲気に。このグレーダークブルーの組み合わせは、マット紙とロゴのスポットグロスに特に映えます。ゴールドやブロンズなど暖色系のメタリックに合わせると、ブルーが宝石のような印象に。ポイント：最も明るい色は内箱や商品情報用に残しておくと、クリーンな仕上げになります。

media.ioを使用して生成されたスモーキー・サファイアの画像例

19）フォグ＆フィヨルド

HEX： #0f1a24 #1e2c39 #314453 #6f8594 #dfe8ee

イメージ：ミスティー、ナチュラル、思索的

最適な用途：アウトドアブランドのガイドラインやカタログ

霧が立ちこめるフィヨルドの空気とスレートの水面が、ナチュラルで思索的な静けさを生み出します。このパレットは過剰に素朴になりすぎず、現代的なギアブランドにも最適です。モスグリーンやクレイと組み合わせて地形とのつながりを感じさせましょう。ポイント：霧のようなライトトーンをページ背景に使うことで、クリーンで開放的な雰囲気をキープできます。

media.ioを使用して生成されたフォグ＆フィヨルドの画像例

20）ナイトシフト・ダッシュボード

HEX： #0d1420 #16233a #223a5a #3c5a7a #b6c2cf

イメージ：集中、高コントラスト、テクノロジー感

最適な用途：ダークモードのダッシュボードUI

深夜の管制室のようなブルーは、集中力と高いコントラストを持ちつつ、きつく見えません。深い基調はダークモードのレイアウトに最適で、クールなハイライトがチャートやトグルを見つけやすくします。シアンのような節度のあるアクセントを使ってアクティブ状態や警告を強調しましょう。ポイント：2つの最も暗い色で大きな面を作り、最も明るい色は重要な数値やラベルだけに使いましょう。

media.ioを使用して生成されたナイトシフト・ダッシュボードの画像例

グレーダークブルーと相性の良い色は？

ウォームメタリックと暖色系ニュートラルを使うと、グレーダークブルーがすぐに高級感を持ちます。例：シャンパンゴールド、ブラス、銅、クリーム、サンドなど。クールな基調を中和し、無機質に感じさせません。

よりモダンなコントラストのために、コーラル、ライム、シアン、安全オレンジなど明るく鮮やかなアクセントをグレーダークブルーに合わせましょう。アクセントはCTAや目立つタグ、主なデータポイントのみに絞ることで、インターフェイスが落ち着いた印象を保てます。

ナチュラルな雰囲気が欲しい場合は、アーシーなグリーン（モス・セージ）やクレイ系カラーを加えましょう。これらの組み合わせはパレットに安定感を与え、アウトドア系やウェルネス・ライフスタイルブランドにも特に向いています。

グレーダークブルーカラーパレットを実際のデザインで活用する方法

まず役割を割り当てましょう。背景にはライトグレー、境界線やセカンダリーUIにはミドルグレー、見出しやナビにはダークブルーです。これにより、ページ・スライド・印刷物全体で階層が一貫します。

特にダークモードでは序盤にコントラストをテストして可読性を確保しましょう。最も暗いネイビーやチャコールは大きな面や見出し用に、本文テキストはより明るいグレー上に配置して目の疲れを防いでください。

最後に、アクセントカラーは一つだけ選定し強調用途に一貫して使いましょう（メインボタン、ハイライト、アラートなど）。グレーダークブルーの場合、よく選ばれた単一のアクセント色が多数の色よりも効果的です。

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

グレーダークブルーカラーパレットが実際のシーン（ダッシュボード、パッケージ、ポスター、インテリアなど）でどう見えるか確認したいですか？クイックなモック画像を生成することで、コントラスト、雰囲気、ブランド適合性を導入前にバリデートできます。

Media.ioのText-to-Imageを使えば、シンプルなプロンプトからUI画面やマーケティング画像、印刷用レイアウトなど、パレットに統一性あるコンセプトを素早く生成可能です。デザインをゼロから作り直さずにバリエーションを検証できます。

上記のプロンプトから1つ選ぶ（または独自に作成）、複数パターンを生成し、最後に照明・素材・アクセントカラーを調整して仕上げましょう。

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