ブラックカラーパレット20選とおすすめHEXコード

ブラックは、最も柔軟なデザインの基盤のひとつです。アクセントによって、ミニマルでモダン、クラシックでシネマティック、あるいは大胆でエレクトリックな雰囲気に変化します。

以下は厳選された20のブラックの配色コンビネーション（UI、ブランディング、ポスターなどに使えるHEXコード付き）と、ダークトーンでも読みやすさを失わずに使うためのポイントもあわせてご紹介します。

ブラックパレットがなぜこれほど効果的なのか

ブラックはすぐに構造を生み出します。レイアウトの基盤となり、コントラストを高め、見出しやCTA、イメージの階層を明確にします。

また感情面でも多様性があります。例えば、ゴールドと合わせればラグジュアリーに、アイボリー系なら落ち着きを、スチールグレーならテクニカルさを、ネオンアクセントなら遊び心を演出できます。

実用的には、ブラック系のトーンはさまざまなコンテンツをひとつにまとめます。写真やアイコン、タイポグラフィがダークな基調を共有することで、デザイン全体がより統一感と意図のある仕上がりになります。

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

1）ミッドナイト・ベルベット

HEX： #0b0b0d #1a141d #2b1f2e #5a3b66 #d6c7dd

雰囲気：ラグジュアリー、ムーディ、ベルベットのような

おすすめ用途：高級ブランドや香水パッケージ

贅沢で夜らしい雰囲気があり、ギャラリーの柔らかなバイオレットの光の下でレースのカーテンのような印象を与えます。高級パッケージやビューティーラベル、ハイエンドのアイデンティティに最適です。控えめなメタリックや温かみのあるオフホワイトと合わせれば、重すぎず洗練されたダークトーンに。ポイント：ラベンダーの色味はシールやキャップ、角などの控えめな強調部分だけに使うことで、高級感を維持できます。

media.ioで生成したミッドナイト・ベルベットの画像例

Media.io

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

今すぐ無料で試す

2）インク・アイボリー

HEX： #0f0f10 #2a2a2c #5b5b5e #f2efe9 #c9c2b6

雰囲気：雰囲気：エディトリアル、落ち着き、バランス

おすすめ用途：雑誌レイアウトや長文記事

静かでエディトリアルな印象。温かみのある紙に新鮮なインクが乗ったような余白感です。クリーミーなニュートラルカラーがダークなトーンを和らげ、見出しや引用も読みやすく意図的に見せます。印刷レイアウトやブログテンプレート、タイポグラフィがメインのポートフォリオに最適です。ポイント：本文は真っ黒よりも一段明るいグレーを使うと、明るい背景での眩しさを軽減できます。

media.ioで生成したインク・アイボリーの画像例

3）オブシディアン・ゴールド

HEX： #090909 #1d1b16 #3a2f1f #b08d57 #f5e6c8

雰囲気：雰囲気：ゴージャス、ドラマティック、クラシック

おすすめ用途：高級商品の広告やヒーローバナー

ゴージャスでシネマティック、まるで黒曜石にゴールドスポットライトが当たったよう。ゴールドとクリームのトーンがコールアウトやバッジ、価格表記に瞬時に階層を付け、土台を邪魔しません。高級感のある広告やランディングページ、ブランドの刷新におすすめ。ポイント：ゴールドはキーとなる部分やアイコンだけに使い、エレガントさを保ちましょう。

media.ioで生成したオブシディアン・ゴールドの画像例

4）ノワール・ボタニカル

HEX： #0a0a0b #1f2420 #3f5a48 #8fb996 #e6f2e8

雰囲気：雰囲気：ナチュラル、フレッシュ、影のある

おすすめ用途：エコパッケージや植物イラスト

ナチュラルで影のある雰囲気。月明かりに照らされた葉と朝露のようなソフトグリーンで、ウェルネスやサステナビリティ関連プロジェクトにぴったりです。再生紙のテクスチャや細いラインのアイコン、余白を多めにすると効果的。ポイント：淡いミントグリーンは背景のウォッシュとして使い、他のグリーンを引き立てましょう。

media.ioで生成したノワール・ボタニカルの画像例

5）カーボン・ネオン

HEX： #060607 #1b1c22 #2d2f3a #ff2e88 #2ef2ff

雰囲気：雰囲気：エレクトリック、大胆、ナイトライフ

おすすめ用途：コンサートポスターやナイトイベントプロモ

エネルギッシュで落ち着きがなく、夜の街のネオンサインが光るイメージ。ブラック系の組み合わせが、イベントポスターやDJラインナップ、コントラスト重視のSNS画像で映えます。ネオンアクセントはシンプルなサンセリフ系フォントと整ったレイアウトでまとめ、騒がしくし過ぎないのがコツ。ポイント：どちらかのネオンをメイン、もう一方は時間や会場など細部だけに使うと効果的です。

media.ioで生成したカーボン・ネオンの画像例

6）スレート・スモーク

HEX： #101114 #2b2e35 #4a4f59 #9aa3ad #e7eaee

雰囲気：雰囲気：モダン、控えめ、建築的

おすすめ用途：インテリアデザインの提案やポートフォリオ

控えめで建築的。スレートの壁、柔らかなコンクリート、そして煙が漂うようなイメージ。クールグレーがプロフェッショナルな構造を与え、ブラックより柔らかな印象に。インテリア資料・建築ポートフォリオ・製品ドキュメント等で明快さを求める時におすすめ。ポイント：広いエリアは最も明るいグレー、最も暗い色はタイトルや区切りに使いましょう。

media.ioで生成したスレート・スモークの画像例

7）エスプレッソ・チャコール

HEX： #120d0a #2a1e18 #4a3a31 #b68a6a #f3e2d6

雰囲気：雰囲気：温もり、居心地の良さ、手作り感

おすすめ用途：カフェのブランディングやメニュー

温かく居心地の良い雰囲気。エスプレッソのクレマや深煎り豆、使い込まれた木のカウンターをイメージ。ベージュや赤みのあるクリーム色がホスピタリティを加え、チャコール系の色味で全体を引き締めます。カフェメニューやロースタリーのラベル、手作り感重視のアート系パッケージに最適です。ポイント：淡い色は未コーティング紙に印刷すると手ざわりやクラフト感を強調できます。

media.ioで生成したエスプレッソ・チャコールの画像例

8）グラファイト・デニム

HEX： #0c0d10 #1a2433 #2f4a6b #7aa0c7 #e8eef6

雰囲気：雰囲気：クール、都会的、自信に満ちた

おすすめ用途：ファッションルックブックやアパレルブランド

クールで都会的。ダークデニムや冷たい空気、洗練されたストリートスタイルの印象。ブルートーンがブラック系に親近感とエッジを加えます。高級感にこだわり過ぎない自信派ブランドに最適。ルックブックやECバナー、強い写真を並べたレイアウトによく合います。ポイント：明るいブルーはキャプションやサイズ情報など、画像上でも可読性を保つ部分に。

media.ioで生成したグラファイト・デニムの画像例

9）ルナー・スチール

HEX： #0b0c0f #1b2028 #323a46 #7e8a99 #dfe6ef

雰囲気： スリーク、テクニカル、未来感

おすすめ用途： SaaSダッシュボードと分析UI

スリークでテクニカルな印象は、月明かりに照らされた金属と静かなコントロールルームを想起させます。階段状のグレーによって、カードやモーダル、表の行で奥行きが簡単に生まれ、ビジュアルの混雑もありません。分析プロダクトやデベロッパーツール、ダークモードUIキットに最適です。ヒント：最も明るい色味をダークな背景のテキストに使い、ボーダーは控えめにしグリッドが騒がしくならないようにしましょう。

media.ioで生成されたルナースチールのイメージ例

10) レイヴンプラム

HEX： #0b0b0e #241624 #3f2a4b #a173b3 #f2e7f6

雰囲気： ロマンチック、ムーディー、エレガント

おすすめ用途： 結婚式の招待状と夜のイベント

ロマンチックでムーディー、ベルベットのリボンやたそがれの花、キャンドルの灯るセレモニーを思わせます。プラム系の色が暗さを和らげ、フォーマルな招待状やガラプログラム、高級感のある告知状に最適です。繊細なセリフ体と最小限のラインワークを合わせて、洗練された雰囲気にしましょう。ヒント：淡いライラックで余白を作ることで、濃いプラムも重たくなく意図的に感じさせられます。

media.ioで生成されたレイヴンプラムのイメージ例

11) アスファルトコーラル

HEX： #0e0f12 #2a2c33 #505361 #ff5a6d #ffe3e7

雰囲気： 遊び心、パンチの効いた、モダン

おすすめ用途： コスメ広告とソーシャルキャンペーン

パンチが効いていてモダン、雨上がりの濡れたアスファルトにネオンリップが映えるようなイメージです。コーラルのアクセントは、CTAボタン、セールステッカー、商品訴求のコールアウトなど、即座にエネルギーを与えます。美容系キャンペーンやスタートアップ広告、目立つソーシャルクリエイティブにおすすめです。ヒント：コーラルの面積はレイアウトの10～15％に抑え、デザインが派手すぎずシックにまとまるように。

media.ioで生成されたアスファルトコーラルのイメージ例

12) ブラックサンドビーチ

HEX： #0a0a0c #1f1c1a #5c5048 #c8b29a #f3efe9

雰囲気： ナチュラル、安定感、旅支度

おすすめ用途： 旅行ポスターと観光地ブランディング

安定したナチュラルな印象は、火山砂や流木、日差しに色あせた石をイメージさせます。これらのブラック系配色は、旅のブランディングでラギッドなコントラストを出しつつも、温かさを損なわずに使えます。テクスチャ入りの紙効果やシンプルな地図の線、控えめな写真色調と組み合わせましょう。ヒント：大きな文字ブロックにはサンディベージュを使い、遠くからでも目的地が読みやすくなるよう工夫しましょう。

media.ioで生成されたブラックサンドビーチのイメージ例

13) ヴィンテージフィルムノワール

HEX： #0d0d0f #2a2a2e #6b6a70 #d7d3ca #f7f3ea

雰囲気： クラシック、スモーキー、レトロ

おすすめ用途： 映画ポスターとレトロタイトルカード

クラシックでスモーキー、古いシネマのロビーや柔らかなプロジェクターの光、使い込まれた紙の雰囲気を感じさせます。あたたかみのあるオフホワイトがグレースケールの冷たさを和らげ、レトロなタイポグラフィにぴったりです。映画ポスターやブックカバー、不変的なブランドストーリーにご活用ください。ヒント：明るいトーンにさりげないグレイン（粒状感）を加えてヴィンテージな雰囲気を出しつつ、可読性を損なわないように。

media.ioで生成されたヴィンテージフィルムノワールのイメージ例

14) サイバーシャドウ

HEX： #07070a #141520 #262a3a #7c5cff #38ffb6

雰囲気： サイバーパンク、ハイコントラスト、エネルギッシュ

おすすめ用途： ゲーミングHUDと配信オーバーレイ

ハイコントラストでサイバーパンク、暗いアーケードで光るHUDのようなイメージです。パープルとミントのアクセントが、ホバー・アクティブ・アラートなど即座のインタラクション状態を生み出します。ゲームUIや配信オーバーレイ、動きの中でも見やすさが重要なeスポーツブランディングにも適しています。ヒント：テキストは基本的に淡いトーンで、ネオンはステータスや重要なアクション用に絞って使いましょう。

media.ioで生成されたサイバーシャドウのイメージ例

15) モノクロームミニマル

HEX： #050506 #151517 #2e2e31 #b9b9be #ffffff

雰囲気： ミニマル、クリスプ、タイムレス

おすすめ用途： ロゴプレゼンテーションとミニマリストWebデザイン

クリアでミニマル、ギャラリーの白壁やシャープな文字が白い紙に浮かぶような印象です。このブラックパレットは、ロゴシステムやプロダクトタイポグラフィ、余白重視のミニマルサイトに最適です。もしアクセント色が必要なら1色だけを使い、それ以外はコントラストで階層を作りましょう。ヒント：セカンダリーテキストには中間グレーを使い、純黒と白の間を穏やかにつなぎます。

media.ioで生成されたモノクロームミニマルのイメージ例

16) ストーミーティール

HEX： #0b0c0e #1a2224 #2e4d52 #4fb7b3 #e2fbfa

雰囲気： フレッシュ、自信、プロフェッショナル

おすすめ用途： フィンテックとヘルステックのランディングページ

フレッシュで自信を感じさせる配色は、嵐の雲を抜けてクールなティールの地平線に広がるイメージ。ティールの段階分けでボタンやチャート、リンクの状態が明瞭で、暗いベースが全体を引き締めます。モダンな信頼感が欲しいフィンテック、ヘルステック、データ系プロダクトに適しています。ヒント：ティールのグラデーションは控えめに、アクションにはフラットな色面を用いてアクセシビリティを確保しましょう。

media.ioで生成されたストーミーティールのイメージ例

17) ガーネットエンバー

HEX： #0b0a0c #241015 #4b1d24 #c24a5c #f7d4da

雰囲気： リッチ、親密、ナイトライフ

おすすめ用途： カクテルメニューとバーのブランディング

リッチで親密、赤ワイン越しのキャンドルの灯りのような空気感です。ガーネット色のレンジがセクションのヘッダーやスタンプ、シグネチャーカクテルに深みを与えつつ、ベースは洗練された印象をキープします。バーのメニューやナイトライフのブランド、限定ラベルなどにもおすすめ。ヒント：フィーチャーアイテムの背後にブラッシュの色を敷けば、飾りを増やさずとも引き立たせられます。

media.ioで生成されたガーネットエンバーのイメージ例

18) チョークボードシトラス

HEX： #0a0a0b #202225 #3c3f45 #ffd34d #fff4cf

雰囲気： 親しみやすい、ハイコントラスト、明るい

おすすめ用途： インフォグラフィックスと教室ポスター

明るく読みやすい印象は、黒板に描かれたチョークの文字にシトラスのアクセントがはじけるような雰囲気。イエローアクセントはラベルやデータのハイライト、アイコンが即座に目を引くのに最適です。インフォグラフィックスや教育ポスター、プレゼン資料など明瞭さが重要な場面にどうぞ。ヒント：チャートはグレーでまとめ、イエローはキーとなる値のみ使ってメッセージ性を絞りましょう。

media.ioで生成されたチョークボードシトラスのイメージ例

19) ウィンターナイト

HEX： #0a0b0d #1a2230 #314a66 #a7c7e7 #f2f7ff

雰囲気： 静けさ、クリスプ、季節感

おすすめ用途： ホリデーカードと冬キャンペーン

静かでクリアな印象は、澄んだ冬の空と雪に反射する氷のようなきらめきを感じさせます。ブルーが季節感のある落ち着きを与え、暗いベースがレイアウトをシャープ＆モダンにします。ホリデーカードや冬のセールキャンペーン、クールでクリーンな雰囲気が必要なイベントバナーに最適。ヒント：最も明るい色で小さな星や細いラインを加えて、散らかさず奥行きを出しましょう。

media.ioで生成されたウィンターナイトのイメージ例

20) ミュージアムマーブル

HEX： #0c0c0f #202023 #3f3f45 #c9c7c0 #f5f4f0

雰囲気： キュレーションされた、洗練、ギャラリー的

おすすめ用途： ポートフォリオサイトと展示マイクロサイト

キュレーションされ洗練された印象は、美術館の室内でダークな台座と柔らかな大理石のハイライトを連想させます。暖かいライトニュートラルはコントラストを心地よくし、とくにテキスト多めのページに最適です。ポートフォリオサイトや展示系のマイクロサイト、格上げしたい製品紹介に。ヒント：インタラクティブな要素は中間グレーに留め、一番明るい色は強調用に温存しましょう。

media.ioで生成されたミュージアムマーブルのイメージ例

ブラックと相性の良い色は？

クリーム、アイボリー、ベージュといった暖色系ニュートラルは、ブラックを柔らかく編集的な雰囲気にし、テキスト主体のレイアウトやプレミアムなパッケージに最適です。

ゴールドやブラスのようなメタリック表現（またはスクリーン上でのマスタード/イエローの代用）は、アイコンやボーダー、重要なラベルに控えめに使うことで瞬時に高級感や階層性を演出できます。

高エネルギーなコントラストにはブラック＋ネオン（シアン、マゼンタ、ライム）や飽和度高い宝石色（プラム、ティール、ガーネット）などを組み合わせて。アクセントは絞って使い、視認性と意図を大切に。

ブラックカラーパレットを実際のデザインで使う方法

大きな背景には純黒ではなくニアブラックからスタートを。ほんの少し明るいブラックはバンディングや眼精疲労を軽減し、カードやセクションで奥行きを作る余地を与えます。

2～3段階のダーク＋本文用の明るいニュートラルで階層を作りましょう。アクセントカラーは装飾ではなくインタラクション状態（プライマリーボタン、アクティブタブ、ハイライト）用に温存します。

最初の段階でコントラストチェックを。ダークテーマでは細いフォントや低不透明度の仕切り線が失敗しやすいので、本文には最も明るい色、セカンダリーテキストにはアクセシビリティ基準を満たす中間グレーを使いましょう。

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

コンセプト提案時は、ポスター・商品広告・招待状・UIモックアップなど文脈の中でパレットを示すと、ステークホルダーも即座に「雰囲気」を実感できます。

Media.ioのテキストto画像を使えば、シンプルなプロンプトからブランドイメージのビジュアルを生成でき、ベースの黒を保ちながらアクセント色（金、ティール、ネオンなど）を差し替えて迅速にバリエーションを検討できます。

パレットのHEXコードをスタイリングの指針にしつつ、最終的なデザインシステムでタイポグラフィ、余白、コントラストを調整してください。

次へ： クリームホワイトカラーパレット