Black and Gray Color Palette Ideas: Top 20 Picks with Hex Codes

ブラックグレーのカラーパレットは、デザインをモダンで自信があり、クリーンに見せる最も簡単な方法のひとつです。UIレイアウトから印刷物まで、これらのニュートラルトーンは、コンテンツの邪魔をせずに瞬時に構造を与えます。

以下に、HEXコード付きで20以上のブラック＆グレーのパレットアイデアと、コントラスト・タイポグラフィ・アクセントカラー選びの実用的なヒントを紹介します。

なぜブラックグレーパレットはこんなに効果的なのか

ブラックグレーのパレットは自然に整理されています：明度の幅が階層・スペーシング・強調を生み出し、多色を使わなくても明確な構造を得られます。そのため、明瞭さが求められるレイアウト――ダッシュボード、エディトリアルページ、商品詳細画面、ブランドシステム――に最適です。

また、ブラックグレーは時代を超えた印象も与えます。ニュートラルカラーは鮮やかなカラースキームほど流行に左右されにくいため、モノクロームやチャコール/スレート系のパレットは長く使えるうえ、Web・印刷・パッケージングにも柔軟に適応できます。

さらに、ブラックグレーとアクセントカラーを組み合わせることで、アクセントの色味がより強く際立ちます。ティール・コバルト・コーラル・ライムなど、1色だけでもUIで「クリックしたくなる」存在感や、印刷物で「特別感」を即座に演出できます。

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

1）ミッドナイトスレート

HEX： #0B0D10 #1A1F26 #2E3640 #7C8794 #E6E9EE

雰囲気： スタイリッシュ、夜、ミニマル

最適な用途： SaaSダッシュボードUI

精悍なミッドナイトトーンはコントラストの高い都市のスカイラインやクリーンなガラス面を思わせます。このブラックグレーパレットは、階層が重要なダッシュボード、分析画面、管理画面で真価を発揮します。スペーシングにはオフホワイト、メインのアクションには明るいアクセントカラーを1色合わせましょう。使い方のコツ：本文は最も明るいグレーを使い、ヘッダーやナビにはほぼ黒を使いましょう。

media.ioで生成されたミッドナイトスレートの画像例

Media.io

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

今すぐ無料で試す

2）コンクリートスタジオ

HEX： #111315 #2A2D30 #4A4F55 #B8BDC3 #F4F5F7

雰囲気： 工業的、静か、洗練

最適な用途： 建築ポートフォリオサイト

インダストリアルなコンクリートの雰囲気は落ち着きがあり、構造感があり、さりげない高級感を醸し出します。中間グレーは写真やレンダリングを意図的に、かつ硬すぎず見せるのに最適です。温かみのあるホワイトの背景と細いブラックラインで組み合わせてエディトリアルグリッドを形成しましょう。使い方のコツ：レイアウトに呼吸感を持たせながらミニマル感を維持するため、最も明るいグレーでセクションの帯を作りましょう。

media.ioで生成されたコンクリートスタジオの画像例

3）グラファイトウィスパー

HEX： #0F1114 #23262B #3B4048 #9AA2AD #DADFE6

雰囲気： ソフト、モダン、控えめ

最適な用途： ブランドガイドライン資料

やわらかなグラファイトトーンは、抑制・明瞭さ・現代的なクラフト感を連想させます。文字・スペーシング・ロゴルールが自信を持って伝わるブランドブックにぴったりです。二次的な強調にはくすんだ青やセージなど色味を抑えたカラーチップを1つプラスしましょう。使い方のコツ：プレゼン資料ではチャートやカラースウォッチをライトグレーにして、真っ白のまぶしさを避けてください。

media.ioで生成されたグラファイトウィスパーの画像例

4）シルバーライニング

HEX： #101215 #2C2F35 #5B616B #C7CDD6 #FFFFFF

雰囲気： 明るい、クリーン、洗練された質感

最適な用途： EC商品ページ

磨かれたニュートラルカラーは、スタジオライトの下のクロームディテールのように、軽やかでクリーン・商品の存在感を際立たせます。明るい端がページに信頼感と見やすさを与えます。強い発色のCTAカラー（コバルトやコーラル）1色と組み合わせ、コンバージョンを意識したレイアウトを作りましょう。使い方のコツ：中間グレーを区切り線やマイクロコピーに使い、重要な情報がきちんと主役になるようにしましょう。

media.ioで生成されたシルバーライニングの画像例

5）ストームシグナル

HEX： #0E1013 #1F242B #3E4652 #A0A9B5 #E9EDF2

雰囲気： ムーディー、テクノロジー、集中感

最適な用途： サイバーセキュリティ ランディングページ

ムーディーなストームトーンは、暗号化された画面やサーバールーム、制御された緊張感を呼び起こします。こうしたブラックグレーの組み合わせは、権威と信頼が必要なセキュリティ・コンプライアンス・ITサービスに最適です。エレクトリックティールやライムをステータスや信頼バッジのアクセントに。使い方のコツ：グラデーションは控えめにし、シャープなアイコンでテックな雰囲気を作りましょう。

media.ioで生成されたストームシグナルの画像例

6）インク アンド フォグ

HEX： #0A0B0D #1B1D21 #343842 #B0B6C0 #F2F4F7

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

最適な用途： 編集雑誌の見開き

墨色と霞んだグレーの組み合わせは、エレガントでどこかミステリアスな印象を与えます。意図が伝わり、高級感を出したい長文レイアウトに最適です。温かみのある紙色ホワイトと自在なラインワークでクラシックなエディトリアルグリッドを構成しましょう。使い方のコツ：キャプションボックスの背景にフォググレーを使うと、重い罫線なしで注釈を分離できます。

media.ioで生成されたインク アンド フォグの画像例

7）ミュージアムチャコール

HEX： #0C0C0D #202022 #3A3A3F #8F8F96 #E8E8EA

雰囲気： キュレーションされた、静か、ギャラリー風

最適な用途： アート展示ポスター

キュレーションされたチャコールトーンは、柔らかなスポットライトが当たる静かなギャラリーの壁のようです。アート作品のタイトルや日付を、ビジュアルの邪魔をせず際立たせます。特集アーティスト名のためだけにスポットカラーを1色使い、視線を誘導しましょう。使い方のコツ：余白をしっかり確保し、テキストは厳格なグリッドに揃えることで美術館レベルの完成度に。

media.ioで生成されたミュージアムチャコールの画像例

8）スチールモノクローム

HEX： #0D0F12 #262B31 #414A55 #6F7A88 #D9DEE6

雰囲気： プロフェッショナル、構造的、コーポレート

最適な用途： 年次報告書レイアウト

スチールグレーは、構造・信頼感・情報整理の象徴です。グラフや表、データコールアウトが多数入る報告書に最適。ネイビーなど控えめなアクセントでセクションを分ければ、全体のニュートラルストーリーを壊しません。使い方のコツ：最も暗いトーンは見出しのみで使い、文字密度の高いページでも読みやすさを保ちましょう。

media.ioで生成されたスチールモノクロームの画像例

9）シャドウパール

HEX： #0E0E10 #24262B #5A5F68 #C9CDD3 #FAFAFB

雰囲気： ラグジュアリー、ソフト、高コントラスト

最適な用途： ビューティー商品パッケージ

シャドーブラックにパールグレーを合わせると、スポットライトを当てたサテン生地のように高級感があります。この黒とグレーの色の組み合わせは、最小限のタイポグラフィがプレミアムなストーリーを販売する美容、スキンケア、フレグランスに適しています。フォイルシルバーやシングルチークのアクセントと合わせて、洗練されたひねりを加えます。使用法のヒント: ハイライトが光沢ではなく意図的に見えるように、ダークトーンの仕上げをマットに保ちます。

media.ioを使って生成したシャドウパールの画像例

10) 静かなタイプ

HEX：#0B0C0E #1C1F24 #2F353E #A7AFBA #F6F7F9

雰囲気：落ち着いた、タイポグラフィックな、ミニマルな

最適な用途：ブログタイポグラフィシステム

落ち着いたニュートラルは、滑らかな紙のインクのように、言葉のための静かなステージを設定します。グレーの範囲により、視覚的なノイズなしでタイポグラフィラダーを簡単に構築できます。優しいアクセント（ダスティブルーやテラコッタ）と合わせてリンクやハイライトを演出します。使用法のヒント: コード ブロックにソフト グレーを使用し、引用符を引き出して、読み取りフローを中断せずに維持します。

media.ioを使って生成した静かなタイプの画像例

11) アスファルト最小

HEX：#090A0B #16181B #2A2E34 #616873 #DDE1E7

雰囲気：都会的、大胆、モダン

最適な用途：ストリートウェアルックブック

都会的なアスファルトの色合いは、新鮮な舗装やネオンの反射のように、大胆でモダンな感じがします。レイアウトを最小限に抑えながら、アパレルの写真に強いコントラストを与えます。ドロップ日や値札には、1 つの大きなアクセントと組み合わせてください。使用法のヒント: 製品ショットが支配的なままになるように、ラベルとサイズ情報にミッドグレーを使用してください。

media.ioを使って生成したアスファルトミニマルの画像例

12) 烟とクロム

HEX：#0C0E10 #22262C #3C434E #8D98A6 #EEF1F5

雰囲気：未来的で、鮮明で、テクノロジー先進的

最適な用途：ハードウェア製品広告

鮮明な煙とクロームの色調は、精密エンジニアリングときれいな金属表面を呼び起こします。このブラックグレーのカラーパレットは、製品がシャープでプレミアムな感じが必要なハードウェア発売に適しています。クールなブルーのハイライトと組み合わせて、スペックと機能のコールアウトを表示します。使用法のヒント: 広告を一目で読みやすくするために、最も明るいグレーのパネルに仕様テキストを配置します。

media.ioで生成したsmokeとchromeの画像例

13) リネンシャドウ

HEX：#111214 #2A2C30 #4B4F56 #BFC3C9 #F1EFEA

雰囲気：暖かいニュートラル、居心地の良い、バランスの取れた

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

暖かい陰影のニュートラルは、リネン張りと柔らかい午後の光のように感じます。ほんのりクリーミーなオフホワイトでパレットが冷えにくい。天然木の質感とブラッシュブラスを組み合わせて、住んでいるモダンな外観を実現します。使用法のヒント: フレームや備品にはダークトーンを使用し、テキスタイルに柔らかいグレーを持たせます。

media.ioを使って生成したリネンシャドウの画像例

14) ノワールノート

HEX：#07080A #171A1F #2B313A #9099A6 #F7F8FA

雰囲気：賢く、学術的で、集中的

最適な用途：メモ取りアプリui

ノワールノートのトーンは、パリッとした紙の上のグラファイトのように、集中力と勉強を感じます。UI要素を控えめにしながら、コンテンツを目立たせるのに役立ちます。タグと選択した状態の落ち着いたアクセントカラーと組み合わせます。使用法のヒント: 入力フィールドを背景よりも 1 つ明るくして、フォーカス リングがうるさくなく明らかになるようにします。

media.ioを使って生成したノワールノートの画像例

15) 冬の黒鉛

HEX：#0D0F13 #242A33 #3B4553 #AAB3C0 #F0F3F7

雰囲気：涼しく、風通しがよく、モダン

最適な用途：モバイルアプリのオンボーディング画面

涼しい冬のグレーは、さわやかなエッジのガラスの霜のように、風通しがよくモダンな感じがします。これらは、オンボーディング画面にイラストとショートコピーのクリーンなベースラインを提供します。進行点とプライマリボタンのために1つの明るいアクセントとペアリングします。使用法のヒント: 第一印象が強くならないように、背景をほぼ白に保ち、タイトルにのみ濃いグレーを使用してください。

media.ioを使って生成した冬黒鉛の画像例

16）カーボンと砂

HEX：#0B0C0D #1E2024 #3D4046 #B0B3B8 #E8DDCF

雰囲気：土っぽい、プレミアム、接地

最適な用途：コーヒーブランドラベル

砂のハイライトを加えたグラウンドカーボントーンは、ローストビーンズやクラフトペーパーのように、土っぽくてプレミアムな感じがします。無菌に見えることなく、強いコントラストが必要なラベルに適しています。シンプルなイラストラインと触感のある紙の質感を組み合わせます。使用法のヒント: コーティングされていない素材のエッジが泥だらけにならないように、最も暗い色調をわずかに柔らかくした (リッチ ブラック) で印刷します。

media.ioを使って生成した炭素と砂の画像例

17) モノクロブルーム

HEX：#0B0C0E #1E2126 #3A3F47 #C3C7CE #F8F8F9

雰囲気：柔らかい、ボタニカル、エアリー

最適な用途：水彩ボタニカル招待状

柔らかいモノクロトーンは、霧の花びらと繊細なインクウォッシュのように感じられます。gentle レンジは、タイプを読みやすく保ちながら、植物のアートワークをサポートします。シルバーグレーのラインワークとたっぷりのホワイトスペースを組み合わせると、エレガントなステーショナリールックになります。使用法のヒント: 招待状のテキストは、水彩画の柔らかさに合わせて、純粋な黒ではなく深い炭で保管してください。

media.ioを使って生成したモノクロブルームの画像例

18) プリズム中立

HEX：#0E1012 #252A31 #4B5460 #9FA9B6 #ECEFF3

雰囲気：清潔、柔軟、モダン

最適な用途：プレゼンテーションテンプレート

クリーンなニュートラルは、明るい会議室の磨かれたデッキのように、柔軟でモダンな感じがします。これらは、多くのスライド タイプでチャート、アイコン、写真を一貫性を保ちます。セクションヘッダーと主要なメトリックには、1つのブランドのアクセントカラーとペアリングします。使用法のヒント: 背景には最も明るいトーンを使用し、淡いグレーのパネルと交互に使用して、密集したスライドを分解します。

media.ioを使って生成したprism neutralの画像例

19）黒曜石インターフェース

HEX：#050607 #14171B #2B3138 #6A7380 #D7DCE3

雰囲気：ダーク、精密、ハイコントラスト

最適な用途：開発者ドキュメントサイト

黒曜日のトーンは、暗い部屋のコードエディタのように正確で技術的な感じがします。これらの黒とグレーの色の組み合わせにより、ナビゲーション、サイドバー、コードブロックを大きな境界線なしで簡単に分離できます。リンクや構文のハイライトには、抑制されたアクセント (シアンまたはアンバー) とペアリングします。使い方のヒント: ページの背景よりも少し軽いパネルにコードテキストを保持して、目の疲れを軽減します。

media.io を使用して生成された obsidian インターフェースの画像例

20) アーバンミスト

HEX：#101216 #2A2F37 #474F5B #B7BEC8 #F3F5F8

雰囲気：フレッシュでバランスの取れた、シティモダン

最適な用途：不動産パンフレット

アーバンミストグレーは、ガラスの塔の上にある朝の霧のように、新鮮でバランスが取れているように感じます。間取りや写真に明瞭さと落ち着きが必要な不動産パンフレットに適しています。価格と主要なアメニティのために、落ち着いたメタリックなアクセントと組み合わせてください。使用法のヒント: 本体のコピーをダークグレーに設定し、見出しを黒よりもわずかに明るくして、印刷の過酷なコントラストを避けます。

media.ioを使って生成した都市ミストの画像例

21) モノワークショップ

HEX：#0A0B0D #1C1F24 #3A3F47 #7F8792 #E5E8ED

雰囲気：実用的、メーカー、整理された

最適な用途：ワークショップイベントチラシ

実用的なワークショップのトーンは、ツール、きれいなベンチ、そしてナンセンスなメーカーの雰囲気を呼び起こします。狭いグレースケール範囲により、スケジュール、スピーカー、会場情報を簡単にスキャンできます。日付と登録リンクに大胆なアクセントを 1 つ組み合わせます。使用法のヒント: セクション ブロックにライト グレーを使用して、チラシが重い箱なしで構造化されたままにします。

media.ioを使って生成したモノワークショップの画像例

ブラック×グレーに合う色は？

ブラックグレーは、ティール、ライム、コバルト、コーラル、マゼンタなどのエネルギーの高いアクセントと簡単に組み合わせることができます。CTA、ハイライト、またはキーラベルをポップにしたい場合に最適です。ニュートラルなベースでは、小さなアクセントエリアでもはっきりと読みます。

より柔らかく、よりプレミアムな組み合わせには、セージグリーン、ダスティブルー、チーク、暖かい砂などの落ち着いたアクセントを試してください。これらはモノクロの雰囲気を保ちながら、暖かさと個性を加えます。

印刷用にデザインする場合は、ホイル、インク、または素材仕上げを通じて、メタリック (シルバー、ピューター、シャンパン ゴールド) をアクセントの「色」として検討してください。レイアウトをうるさいものにすることなく、チャコールトーンを引き立てます。

リアルなデザインでブラックグレーパレットを使う方法

余分な色ではなく、価値のある階層を構築します。見出し/ナビゲーションにはほぼ黒、セカンダリUIとディバイダーにはミッドグレー、サーフェスには非常に明るいグレーまたはオフホワイトを使用します。これにより、ページが構造化されているように感じられ、視覚的な乱雑さが軽減されます。

コントラストと読みやすさに注意してください。どこにでも純白に純黒ではなく、オフホワイトの背景に濃い炭のテキストを長く読むように試し、強調とキーアンカーのために最も深い黒を予約してください。

「平らな」外観を避けるには、特に暗いテーマでは、間隔、微妙な影、穏やかなグラデーションで深みを追加します。これらの効果を最小限に抑えて、パレットを清潔でプロフェッショナルに保ちます。

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

ダッシュボード、ポスター、パッケージショット、またはスライドテンプレートで黒とグレーのパレットがどのように見えるかをプレビューしたい場合は、AIを使用してクイックモックビジュアルを生成します。完全なデザインにコミットする前に、ムード、コントラスト、アクセントの色のアイデアをテストするための迅速な方法です。

パレット 16 進コードを制約として使用し、レイアウトと照明スタイル (スタジオ、編集、シネマティック、最小限の UI) を説明します。小さなプロンプト変更で反復して、数分で適切な雰囲気を見つけることができます。

結果が気に入ったら、エクスポートして、web、印刷、またはブランドのガイドラインのムードボードのリファレンスとして再利用します。

次へ： ピンクグリーンカラーパレット