ダークグレーカラーの配色例20選・おすすめ組み合わせとHEXコード

ダークグレーは、何を合わせるかによって、なめらかで落ち着いていたり、ドラマチックに感じられるモダンなニュートラルです。純粋な黒のような厳しさを伴わずに構造を追加するため、UI、ブランディング、インテリアに頼りになります。

以下は、16進コードを使用した厳選されたダークグレーのカラーパレットのアイデア20選に加え、アクセントの選択、コントラストのバランス、AIによるパレットビジュアルの生成に関する実践的なガイダンスを紹介します。

ダークグレーのパレットがうまく機能する理由

ダークグレーは、黒とミッドトーンのニュートラルの間の「スイートスポット」に位置します。深み、コントラスト、階層性を提供しますが、目には柔らかいです。そのため、インターフェイス デザイン、編集レイアウト、プレミアム ブランド システムに特に効果的です。

ダークグレーは本質的に汎用性があるため、暖かい（トープ、エスプレッソ、ローズウッド）またはクール（スチール、スレート、ブルーブラック）にスイングできます。適切なアクセントで、同じニュートラルベースは、ウェルネスフォワード、企業、遊び心、または贅沢を感じることができます。

また、紙目、微妙なノイズ、マット仕上げ、柔らかい影などのテクスチャとの相性も抜群で、パレットを最小限に抑えても、デザインが次元的で「平ら」に感じにくくなります。

ダークグレーのカラーパレットのアイデア 20 選 (十六進コード付き)

1) グラファイトとリネン

十六進：#2b2d31 #3c3f45 #6b6f77 #d7d1c6 #f3f1ed

気分：落ち着いた、建築的、洗練された

最適な場合:建築スタジオ ウェブサイト ヒーロー

落ち着いて建築的なこれらのグラファイトトーンは、リネンニュートラルに対して、コンクリート、紙、柔らかい日光のように感じます。静かな信頼を必要とするスタジオ Web サイト、ポートフォリオ、プレミアム サービス ブランドに使用してください。温かみのあるオフホワイトと微妙な質感（紙目や軽いノイズ）を合わせると、フラットな印象を避けます。ヒント: 明るいリネンを主な背景にし、見出しと主なボタンには深いグラファイトを予約します。

media.ioを使って生成したグラファイトとリネンの画像例

メディア.io

Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。

今すぐ無料でお試しください

2）チャコールセージ

十六進：#24262b #3a3d44 #5a6b5f #9bb49c #e6efe7

気分：接地、ボタニカル、モダン

最適な場合:ウェルネスブランドアイデンティティキット

グラウンドとボタニカルな木炭は石のように読み、セージは新鮮でハーブのリフトを追加します。これらのダークグレーの色の組み合わせは、ウェルネス ブランディング、薬局のラベル、落ち着いたライフスタイル パッケージに美しく適しています。マットなテクスチャーと控えめなラインアートを組み合わせて、モダンで自然主導の雰囲気を演出します。ヒント: 暗い色調が重く感じないように、淡いミントをネガティブなスペースとして使用してください。

media.ioを使って生成したチャコールセージの画像例

3) スチールブルーナイト

十六進：#1f2228 #353a44 #4a6072 #7b9bb8 #e8edf3

気分：クール、技術的、信頼できる

最適な場合:saasダッシュボードui

クールでテクニカルな、ほぼ黒の上に重ねられたスチールブルーは、清潔で自信のある輝きを持つナイトモードのように感じます。明確さが重要なSaaSダッシュボード、分析ツール、エンタープライズUIに適合します。データテーブルやセカンダリパネルには、薄い仕切りと軽い氷のような背景を組み合わせます。ヒント: 重要なメトリクスに最も明るいトーンを予約して、追加の色を追加せずに即座に階層を作成します。

media.ioを使って生成したsteel blue nightの画像例

4) アッシュローズウッド

十六進：#2a2728 #444041 #6d5a58 #b08a82 #f2e7e5

気分：暖かい、親密な、ヴィンテージ傾向

最適な場合:コーヒーショップのメニューデザイン

暖かく親密な、ローズウッドのアンダートーンのアッシュグレーは、革製のノートと静かなカフェコーナーを思い起こさせます。メニュー、ブティックのおもてなし、居心地の良い洗練さが必要な職人技の製品リストに適しています。セクションヘッダーのクリーミーな紙の背景とミュートされたチークハイライトと組み合わせます。ヒント: 本文のテキストはミッドグレーに保ち、価格設定と主要なラベルにのみ深いトーンを使用します。

media.ioを使って生成したアッシュローズウッドの画像例

5) スレートシトラスポップ

十六進：#262a30 #3d434d #707786 #f0c94a #fff3d6

気分：大胆、明るい、編集

最適な場合:ソーシャルメディア広告クリエイティブ

大胆で明るいスレートグレーが舞台を設定し、シトラスイエローが見出しのハイライトのようにパンチします。ネオンにならずにコントラストを必要とするソーシャル広告、プロモーションバナー、アナウンスに最適です。大きなタイポグラフィとシンプルな幾何学的形状と組み合わせることで、エネルギーを清潔に保ちます。ヒント: インパクトを最大限に高めるために、黄色を 1 つの焦点要素 (ボタン、値札、またはバッジ) にキャップします。

media.ioを使って生成したslate citrus popの画像例

6) インクと砂岩

十六進：#202226 #36383f #6a6f78 #c3b6a6 #f6f0e8

気分：ミニマル、プレミアム、タイムレス

最適な場合:高級スキンケアパッケージ

砂岩のニュートラルに対するミニマルでプレミアムなインキグレーは、石器、リネン、そして静かな贅沢のように感じます。このダークグレーのカラーパレットは、スキンケアパッケージ、ブティックキャンドル、抑制を求める高度なDTCブランドに適しています。エンボス加工と暖かいニュートラルと組み合わせると、冷たくなく魅力的に保たれます。ヒント: ラベル フィールドに砂岩を使用し、インク トーンにロゴと成分の階層を伝えます。

media.ioを使って生成したインクと砂岩の画像例

7) 真夜中の梅の煙

十六進：#1d1c22 #332b37 #5a435f #a07aa6 #efe7f1

気分：神秘的、クリエイティブ、夜行性

最適な場合:インディーズ・アルバム・ジャケット・アートワーク

ミステリアスでクリエイティブな、プラムスモークのミッドナイトグレーは、柔らかい紫色の光の下で深夜のスタジオセッションのように感じます。アルバムジャケット、イベントポスター、雰囲気を重視した芸術的なキャンペーンに最適です。淡いライラックのハイコントラストタイプと組み合わせて、イメージを抽象的に保ち、雰囲気を増幅します。ヒント: 余分な色を加えずに深みのある最も暗いトーンを使用して、グレインと穏やかなビネットを追加します。

media.ioを使って生成した真夜中の梅の煙の画像例

8) コンクリートおよび铜

十六進：#2c2f33 #454a51 #777d86 #b46b4d #f1dfd6

気分：インダストリアル、コンフィデント、ウォームメタル

最適な場合:クラフトスピリッツのラベルデザイン

工業的ですが魅力的なコンクリートグレーは、都市の石に対するブラッシュメタルのような銅と出会います。クラフトスピリッツ、プレミアムコーヒー、温かみのあるグリットを求める製品ラベルに適しています。凝縮されたタイポグラフィと銅箔スタイルのアクセントと組み合わせると、手触りが良く、棚にすぐに置ける外観になります。ヒント: 中立的なベースがコントロールされたままになるように、小さなバッジやボーダーにのみ銅を置きます。

media.ioを使って生成したコンクリートと銅の画像例

9) ストーミーティール

十六進：#23262b #3c4248 #4b6b6b #69a6a1 #e7f3f2

気分：フレッシュ、コースタル、モダン

最適な場合:旅行ブログのヘッダーデザイン

新鮮で海岸沿いの嵐のグレーとティールは、曇り空の下で海ガラスのように感じます。ニュートラルなバックボーンを失うことなく色を求めるトラベルヘッダーやライフスタイルブログ、エアリーブランドに合っています。リンクやコールアウトには、たくさんのホワイトスペースとティールのハイライトを組み合わせてください。ヒント: ティールが偶然ではなく意図的に読まれるように、画像をクールトーンに保ちます。

media.ioで生成されたストーミーティールの画像例

10）スモークド ラベンダー

十六進： #26242a #3e3a45 #6f667a #b5a9c9 #f4f0fa

気分： ソフト、ドリーミー、コンテンポラリー

最適な場合: 結婚式招待状セット

柔らかく夢のようなスモーキーグレーとラベンダーを混ぜることで、まるで夕暮れの霞や押し花を連想させます。明るいパステルなしでロマンチックを演出したいモダンな結婚式やエレガントな招待状、ステーショナリーにぴったりです。繊細なセリフ体と、背景の余白をたっぷり取って組み合わせましょう。ヒント：ラベンダーは枠線や小さなアイコンに使い、全面には塗らないのがコツです。

media.ioで生成されたスモークド ラベンダーの画像例

11）グラナイト ミント スタジオ

十六進： #24272c #3a3f46 #5e646e #7fd1b9 #eaf8f3

気分： クリーン、エネルギッシュ、テック向け

最適な場合: フィットネスアプリのオンボーディング画面

クリーンでエネルギッシュなグラナイトグレーがシャープさを保ち、ミントがフレッシュさを加えます。明快さとモチベーションが重要なフィットネスアプリ、習慣トラッカー、プロダクトのオンボーディングに最適です。無駄を避けたい場合は、太いプログレスインジケーターやシンプルなイラストと組み合わせましょう。ヒント：成功状態や主要アクションにはミントを使い、セカンダリーボタンには中間グレーを使いましょう。

media.ioで生成されたグラナイト ミント スタジオの画像例

12）アーバン チェリー

十六進： #1f2024 #34363d #5c4a52 #b23a56 #f6e7ec

気分： ボールド、スタイリッシュ、ナイトライフ

最適な場合: ファッション ルックブック レイアウト

ボールドでスタイリッシュなアーバングレーにチェリーレッドを合わせることで、都会の夜景を磨かれた石に反射したような雰囲気を演出します。ファッションルックブック、ナイトライフのフライヤー、インパクトのあるブランディングに適しています。大きな写真ブロックと、セクションタイトルやページ番号などアクセントとしてチェリーを使いましょう。ヒント：最も濃いトーンは背景に使い、赤みを効かせた色で余白に柔らかさを。

media.ioで生成されたアーバン チェリーの画像例

13）フォグ＆マスタード

十六進： #2a2c31 #40444c #7a808b #d7a51f #f7f0d6

気分： 自信、レトロモダン、パンチの効いた

最適な場合: イベントポスターデザイン

自信がありややレトロ、霧がかったグレーにマスタードが効いて、雨の日のストリートにスポットライトがあたるようです。暗めのグレーカラーはイベントポスターやカンファレンスグラフィック、インパクトのある告知に最適。チャンキーなサンセリフ体にシンプルな図形を合わせて、クリーンで高コントラストな印象に。ヒント：マスタードは日付やCTAに使い、グレーにはその他全てを任せて。

media.ioで生成されたフォグ＆マスタードの画像例

14）ピューター オーシャン

十六進： #262a2f #3e454f #6b7787 #3c7fa6 #e6f1f7

気分： シャープ、信頼感、安定したコーポレート感

最適な場合: B2Bランディングページデザイン

シャープで信頼感のあるピューターグレーとオーシャンブルーは、磨き上げられたスチールと広がる海を彷彿とさせます。B2Bランディングページ、フィンテック、コンサル系の落ち着いた権威感が必要なブランドにおすすめです。明快なアイコンと淡い背景と組み合わせることで、ブルーが遊び心でなくプロフェッショナルに映ります。ヒント：オーシャンブルーはリンクやセクションマーカーに使い、面積の大きい背景は避けましょう。

media.ioで生成されたピューター オーシャンの画像例

15）カーボン ネオンライム

十六進： #1c1f23 #2f333a #555c66 #b8ff4a #f4ffe0

気分： エッジー、高コントラスト、未来的

最適な場合: ゲーミング製品広告バナー

エッジーで未来的なカーボングレーにより、ネオンライムはダークルームのHUDハイライトのように際立ちます。ゲーミング広告やテック系のローンチ、即座に視認性を求めるバナーに最適。シャープな形状と、1つだけライムのグロー効果を加え、洗練された印象に。ヒント：ライムはメインのボタン1つと細いライン1本のみ、コントロールされたプレミアムな雰囲気を出しましょう。

media.ioで生成されたカーボン ネオンライムの画像例

16）ミュージアム トープ

十六進： #2d2c2a #474543 #746b63 #b9aa96 #f2ede6

気分： クラシック、キュレート、控えめ

最適な場合: 美術館ギャラリーブローシャーレイアウト

クラシックで厳選されたトープ系グレーは、美術館の壁や額縁入りプリント、柔らかなスポットライトを想起させます。ギャラリーブロッシャー、文化イベントプログラム、洗練された印刷物向き。たっぷりの余白とさりげないルールラインでコンテンツに呼吸を与えて。ヒント：ページ背景にはクリーム、最も暗いトーンはキャプションやナビ要素に。

media.ioで生成されたミュージアム トープの画像例

17）モノクローム ドリフト

十六進： #17181b #2a2c31 #4a4e57 #7b818d #d9dde3

気分： ミニマル、ニュートラル、超モダン

最適な場合: モバイルUIコンポーネントライブラリ

ミニマルかつ超モダンな漂うグレーは、霧・クローム・クリーンなタイポグラフィのようです。こんなダークグレーパレットはコンポーネントライブラリ、デザインシステム、最大限の柔軟性を必要とするUIキットに最適。ブランドのアクセントは1カ所だけ他の要素に使い、構造はこのニュートラル群に任せましょう。ヒント：小さなテキストの後ろは一番明るいグレーを使い、主なラベルにはほぼ黒で。

media.ioで生成されたモノクローム ドリフトの画像例

18）エスプレッソ オリーブ

十六進： #2a2420 #413835 #5a6150 #8b9b6a #efece6

気分： アーシー、ラスティックモダン、安心感

最適な場合: レストラン ブランディング＆メニュー

土の温もりと安心感のあるエスプレッソのブラウングレーとオリーブグリーンが、木のテーブルや陶器の皿、ボードに乗ったハーブを連想させます。レストランのブランディング、ファーム・トゥ・テーブルのメニュー、食品パッケージにおすすめ。自然な紙質やシンプルなイラストで落ち着いた印象に。ヒント：カテゴリーマーカーとハイライトにオリーブを使い、ヘッドラインやロゴには最も濃いエスプレッソを。

media.ioで生成されたエスプレッソ オリーブの画像例

19）レイニーデイ パステル

十六進： #2a2d34 #434854 #6f7582 #c9b7d8 #e8eef5

気分： ソフト、フレンドリー、テックライト

最適な場合: 学生用プランナーテンプレート

柔らかく親しみやすい雨色グレーにやさしいライラックをかけあわせると、ノートや曇りの日の午後、穏やかな集中を思わせます。プランナーや学習ダッシュボード、印刷用オーガナイザーに最適。丸みのある形状や淡いブルーグレーでセクションをさりげなく塗り分けて。ヒント：ライラックはヘッダーやチェックマークにだけ使い、印刷時も読みやすく保つのがコツです。

media.ioで生成されたレイニーデイ パステルの画像例

20）ノワール ゴールドアクセント

十六進： #1b1c1f #2f3136 #585b61 #c7a04a #f6f0e3

気分： ラグジュアリー、ドラマティック、高コントラスト

最適な場合: プレミアム腕時計製品広告

ラグジュアリーでドラマティックなノワールグレーと温かみのあるゴールドは、薄暗いブティックと磨かれた金属にスポットライトが当たった様子のようです。高級感のある製品広告、ハイエンドのランディングページ、エレガントな告知に最適。最小限のコピー、強いコントラスト、クリーム地でゴールドが上品に映えます。ヒント：ゴールドはロゴや小さなルールなど、ミクロなアクセント用途に限定すると◎。

media.ioで生成されたノワール ゴールドアクセントの画像例

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

クリームやリネン、ベージュ、サンドストーンのような暖色ニュートラルはダークグレーに高級感と親しみやすさをもたらします。これはパッケージングや編集レイアウト、インテリア系ブランディングで「静かなラグジュアリー」を演出したいときにおすすめの組み合わせです。

スチールブルー、ティール、オーシャンなどクール系アクセントは、ダークグレーを現代的で信頼感のある技術的な雰囲気へと引き上げます。SaaSのUIやダッシュボード、コーポレートサイトなどで特に効果的で、明快さや階層性を保てます。

よりパワフルな印象を作るには、ダークグレーをベースにマスタード、シトラスイエロー、チェリー、ネオンライム、ゴールドのいずれか1色だけをアクティブなアクセントとして取り入れましょう。要点は「節度」：アクセント用途は1つか2つ（CTAやバッジ、ハイライトなど）にとどめ、シャープかつ統制されたデザインにしましょう。

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

まず役割を割り当ててみてください：見出し/メインUI用にダークトーン、本文や枠線用に中間グレー、背景用に明るいニュートラルを一色ずつ設定。これで「ごちゃごちゃしたグレー同士のレイアウト」を避け、タイポグラフィも読みやすくなります。

ボタン・リンク・アクティブ状態・日付・プライスタグや小さなブランドマークなど、相互作用や強調にはアクセント色を意図的に使いましょう。色数を増やさず奥行きが欲しい場合は、既存のグレーで微妙なグラデーションやシャドウ、テクスチャを活用しましょう。

アクセシビリティのため、小さなテキストのコントラストをチェックし、一番明るい色をテキスト背景に使いましょう。UIでは、背景を真っ黒ではなくダークグレーにすることで、目の疲れが減りつつプレミアム感も損ねません。

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

ダークグレーパレットがレイアウトでどう見えるか知りたいなら、AIでクイックモックアップを生成してみてください：ヒーローセクション、ポスター、パッケージ、UI画面など。HEXカラーを統一して使うことで、階層、コントラスト、雰囲気を制作前にチェックできます。

Media.io「Text to Image」なら上記のプロンプトのように貼り付けて、パレットを維持しながら迅速に反復できます。ムードボード作成、ピッチデッキ、ブランド初期検討に最適です。

次へ： 肌色パレット