おすすめのダークカラーパレット20選｜HEXコード＆AI画像付き

ダークカラーパレットは、デザインに意図的な雰囲気を与えます：タイポグラフィの集中、コントロールされたコントラスト、ラグジュアリーな「アフターホワーズ」のムードがUI、ブランディング、印刷物全体で効果を発揮します。

以下で紹介する20種類以上のダークパレットアイデア（HEXコード付き）と、実践的な組み合わせのコツ、そしてAIプロンプトを使ってビジュアルを素早く生成する方法も紹介します。

なぜダークパレットがこれほどまでに効果的なのか

ダークパレットは瞬時にヒエラルキーを生み出します：最も明るい色はUIのキーステート、見出し、数字のスポットライトとなり、より深い色調で他の情報は落ち着いた印象になります。

さらに、カラーをよりリッチに見せてくれます。ジュエル調のアクセントや暖色メタル、ソフトなパステルは、白の背景よりもチャコールやインク、深夜色といった背景で一層高級感が際立ちます。

そして何より、ダーク系は現代のスクリーンにとって実用的です。コントラストを適切に調整し（全面真っ黒は避け）、ダークUIは長時間の利用でも快適で、低照度環境でのまぶしさも抑えられます。

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

1) ミッドナイトインク

HEX： #0b0f1a #111a2e #1b2a41 #2f3e56 #c8d3e0

雰囲気： 静寂、シャープ、編集的

最適な用途： ニュースアプリUIや分析ダッシュボード

静かなミッドナイトブルーとインクグレーは、落ち着いた管制室のような輝きを演出します。淡いブルーグレーのハイライトが、雰囲気を壊さずに読みやすさを保ちます。ダッシュボードやデータテーブル、ナビゲーションの多いレイアウトなど、コントラストが重要な場面に活用しましょう。細いラインアイコンや、アラート用の控えめなカッパーのような暖色アクセントを組み合わせるのがおすすめです。ポイント：最も明るい色は数字などキー箇所に使い、視線を誘導しましょう。

メディア.ioで生成したミッドナイトインクの画像例

Media.io

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

今すぐ無料で試す

2) オブシディアンティール

HEX： #071014 #0a1f24 #0f3a3f #1c6b6a #b8f2e6

雰囲気： 洗練、水中感、ハイテク

最適な用途： SaaSランディングページや特徴セクション

シャープなオブシディアンと深いシーティールの色調は、水中をゆらぐ光のようです。明るいミントの色味は、派手すぎずCTAやマイクロインタラクションにぴったりです。ランディングページや余白を広く取りたいレイアウト、さりげないグラデーションと組み合わせるのがおすすめ。幾何学的サンセリフフォントやソフトなシャドウで現代的な印象に。ポイント：ティールのアクセントは10％以内に抑えて高級感を保ちましょう。

メディア.ioで生成したオブシディアンティールの画像例

3) ノワールプラム

HEX： #0e0b12 #211428 #3a1c42 #6a2c6b #f2d7f7

雰囲気： ドラマティック、ベルベット感、ラグジュアリー

最適な用途： 美容ブランドやフレグランス広告

ベルベットのような紫色とほぼ黒の組み合わせは、贅沢で夜の華やかな雰囲気を生み出します。ソフトなブラッシュ・ライラックのハイライトで、スキンケアのような輝きをプラス。美容ブランドや高級ラベル、シネマチックなSNSクリエイティブなどに最適。セリフ体見出し＆広い余白でブティック感を演出しましょう。ポイント：ダーク部分には微細なグレインテクスチャを加えることで、フラットなグラデーションを避けましょう。

メディア.ioで生成したノワールプラムの画像例

4) ストーミーハーバー

HEX： #0d1416 #1b2a2f #2e454e #4f7b86 #d7eef2

雰囲気： 海岸風、落ち着き、大人っぽさ

最適な用途： アウトドアギアのウェブサイトやカタログ

ストーミーなスレート色や港のティールは、風雨にさらされたドックや潮風のようなラギッド感。アイシーな淡色で、控えめながらもレイアウトを軽やかに見せます。アウトドアブランド・製品カタログ・サステナブルなメッセージングに。写真にはサンドやタンなど暖色系ニュートラルを組み合わせて冷たさを和らげましょう。ポイント：最も明るい色はセクション区切りの背景バンドに使うとクリーン。

メディア.ioで生成したストーミーハーバーの画像例

5) エンバースモーク

HEX： #120c0a #2a1712 #4a2618 #a14b2c #f3cfb7

雰囲気： 温かみ、ラスティック、映画的

最適な用途： コーヒー包装やクラフトフードラベル

スモーキーなココア色とエンバー（残り火）ブラウンは、焙煎豆や焚き火を思わせます。淡いクリームピーチ色は、明快なラベルベースとして最適。コーヒーバッグやBBQソース、ハンドメイド製品パッケージなどに。クラフト紙の質感やシンプルなアイコンと合わせると、本格感がアップ。ポイント：エンバー色にスポットバーニッシュ（部分光沢加工）を加えると棚映え抜群。

メディア.ioで生成したエンバースモークの画像例

6) ギャラクティックグレープ

HEX： #07070f #1a1030 #331a58 #7b3ff2 #e9ddff

雰囲気： 未来的、エレクトリック、遊び心

最適な用途： 音楽イベントポスターやナイトライフプロモーション

宇宙の闇に輝くグレープ色のハイライトは、夜の路地裏のネオンサインのような印象を与えます。こうした暗色の配色は、ポスターなど遠くからの視認性やエネルギーが必要なデザインに最適です。バイオレットを主役に、淡いラベンダーで日付や会場などの詳細を目立たせましょう。太字のコンデンスド書体やシンプルなジオメトリックシェイプとの組み合わせでクラブイベントらしさを。ポイント：グラデーションは控えめに、紫系が紙でもくっきり映えるよう工夫しましょう。

メディア.ioで生成したギャラクティックグレープの画像例

7) アイアンウッドオリーブ

HEX： #0f120d #242a18 #3b4523 #6b7c3a #e6edd2

雰囲気： アーシー、実用的、控えめ

最適な用途： ワークウェアのブランディングや実用系ウェブデザイン

アイアン系グリーンとオリーブシャドウは、キャンバスジャケットやフィールドギアのような実用感。淡いカーキ色でタイポの視認性を高め、商品詳細が見やすいです。ワークウェアブランドやツールカタログ、無骨なECテーマにもぴったり。白寄りのフォト背景を使うと全体が重くなりません。ポイント：中間のオリーブ色はセカンダリーボタンに使うと階層がはっきりします。

メディア.ioで生成したアイアンウッドオリーブの画像例

8) ベルベットサファイア

HEX： #050a12 #0c1830 #132a52 #1f55a5 #d9ecff

雰囲気： クリーン、自信、コーポレート

最適な用途： フィンテックアプリや投資家プレゼン資料

サファイアブルー＋ほぼブラックの組み合わせで、信頼感や自信が表現されます。空色の淡色でチャートやKPIに呼吸空間を。フィンテック製品やピッチデック、コンプライアンス重視のUIなどでクリアな印象が重要な場面におすすめ。さりげない区切り線や、ソフトライムのようなアクセント1色で成功状態を明示。ポイント：最も明るい青はリンクや主要アクションだけに使いましょう。

メディア.ioで生成したベルベットサファイアの画像例

9) シンダーローズ

HEX： #120b0e #2a141e #4a1f34 #a33b6a #f6d2e2

雰囲気： ロマンティック、スモーキー、モダン

最適な用途： 結婚式招待状や夜のガラパーティー

スモーキーベリーとシンダーブラックは、ベルベットの花びらの上にキャンドルの灯りが差し込んだような雰囲気です。淡いハイライトは、名前や日付、RSVPの詳細などのテキストを読みやすくします。夕方の結婚式用ペーパーアイテム、ガライベント招待状、洗練されたSNSストーリーにどうぞ。メタリックフォイルや控えめなゴールドと組み合わせれば、一気に上品に。ヒント：非コーティング紙に印刷するとコントラストが和らぎ、質感も楽しめます。

media.ioを使用して生成されたシンダーローズの画像例

10) ディープフォレストナイト

HEX： #060b07 #132016 #1f3725 #2f6b44 #d6f2dc

雰囲気： ナチュラル、落ち着き、回復感

最適な用途： ウェルネスブランドとエコ製品ページ

松林の影のような深いグリーンは、雨上がりの静かな森の小道を思わせます。ミントのハイライトがバッジや主なメリットにさわやかさを加えます。ウェルネスサイトやエコ製品、サブスクリプションボックスなど、自然で落ち着きのある印象を持たせたい時におすすめです。写真はオートミールやクレイなどの暖色ニュートラルと組み合わせるとバランスが取れます。ヒント：最も明るいグリーンはコンテンツカードに使うと長文も快適です。

media.ioを使用して生成されたディープフォレストナイトの画像例

11) シャドウドカッパー

HEX： #0d0b0a #241a16 #3b2a22 #a86a4a #f2e0d4

雰囲気： インダストリアル、暖かみ、プレミアム感

最適な用途： 製品パッケージとハードウェアブランディング

焦げたようなニュートラルと銅の暖かみが、鍛造された金属や工房の灯りを思わせます。柔らかなベージュが仕様や細かい文字を際立たせます。ハードウェアブランドや高級パッケージ、ミニマルな製品ページにぴったりです。マクロ撮影の素材写真やクリーンなサンセリフラベルと組み合わせれば、エンジニアリング感覚のある印象に。ヒント：銅色は細い帯やシールのアクセントで取り入れるのが最適、背景一面は避けましょう。

media.ioを使用して生成されたシャドウドカッパーの画像例

12) ルナースレート

HEX： #0b0d10 #171c22 #2a333d #5d6f82 #e7eef5

雰囲気： ミニマル、クール、テクニカル

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

クールなスレートカラーと月光のようなグレーは、ターミナルウィンドウの下で精密な印象です。淡い霞んだホワイトはコードスニペットやテーブルを読みやすくします。ドキュメントやナレッジベース、長時間使うツールUIに最適です。アクセントはシアンのみでリンクや選択状態に使いましょう。ヒント：本文は最も明るい背景ブロック上に配置して目の疲れを軽減しましょう。

media.ioを使用して生成されたルナースレートの画像例

13) レイヴンベリー

HEX： #0a0710 #1a1022 #2f173a #5a2c66 #f0d9ff

雰囲気： ミステリアス、アーティスティック、洗練

最適な用途： 書籍カバーや文学ポスター

レイヴンブラックとベリーバイオレットは、ミステリー小説や夜更かし読書の雰囲気を想起させます。このような濃いカラーパレットは、強いコントラストなしでドラマ性を持たせたい時に最適です。書籍カバーや詩のポスター、文化イベントのプロモーションにおすすめ。質感のある紙の効果や控えめなセリフ体を合わせると文学調に仕上がります。ヒント：タイトルは淡いラベンダー、補助テキストにはより濃いパープルをフレームとして使いましょう。

media.ioを使用して生成されたレイヴンベリーの画像例

14) ダスクネオン

HEX： #0b0b12 #1f1633 #2d2a6d #ff3ea5 #d7f7ff

雰囲気： ボールド、若々しい、エネルギッシュ

最適な用途： ゲーミングオーバーレイやストリーマーパネル

深いインディゴにネオンマゼンタが加わると、黄昏の都市スカイラインのような雰囲気。アイシーなトーンは狭いスペースでもラベルやUIテキストをシャープに保ちます。ストリーミングのオーバーレイやeスポーツのプロモ、ゲームローンチのグラフィックに最適。ピクセルやテクノ系フォント、角ばったシェイプでスピード感を出しましょう。ヒント：マゼンタはバッジやCTAチップなどハイライトに絞って使いましょう。

media.ioを使用して生成されたダスクネオンの画像例

15) アンティークインクストーン

HEX： #0f0e0b #23211a #3a372b #7a735a #f1eedf

雰囲気： 伝統的、学術的、暖かみ

最適な用途： ミュージアムパンフレットやエディトリアルレイアウト

墨色と古風なトープカラーは、年季の入った紙面やアーカイブ印刷を思わせます。暖かいオフホワイトは羊皮紙のように本文を引き立てます。ミュージアムパンフレットや特集記事、伝統的なブランディングに最適。クラシックなセリフ体や控えめな罫線で構造を明確に。ヒント：写真はわずかに彩度を落とし、レトロなトーンに調和させましょう。

media.ioを使用して生成されたアンティークインクストーンの画像例

16) ブラックチェリーコーラ

HEX： #0b0708 #220d12 #3d121f #7d1f3a #f7d8df

雰囲気： セクシー、グロッシー、ナイトライフ

最適な用途： カクテルメニューやバーのブランディング

ブラックチェリーレッドとほぼブラックの配色は、コーラの泡立ちやバーのライトのようなつややかさ。強くなりすぎず食欲をそそるダークなカラーバリエーションはカクテルメニューやラウンジプロモ、プレミアム感あるボトルラベルに最適。クリーミーなニュートラルや真鍮色のアクセントでクラシックな仕上げに。ヒント：最も淡いピンクは小さな文字ブロックに限定し、ドラマチックな雰囲気を保ちましょう。

media.ioを使用して生成されたブラックチェリーコーラの画像例

17) ペトロールスチール

HEX： #081013 #10252c #1e3d49 #3f6a78 #d5f0f7

雰囲気： アーバン、モダン、レジリエント

最適な用途： 自動車ブランドやテック製品ページ

ペトロールブルーとスチールティールは、濡れたアスファルトやブラッシュメタルのように都会的。淡いアクアはスペック表や特徴をシャープに見せます。自動車系ブランディングやガジェットサイト、B2Bテックにおすすめ。インダストリアルな雰囲気は大胆な写真とミニマルなアイコンセットで完成。ヒント：ミッドティールは区切り線や進行表示など重いボーダーの代わりに使用しましょう。

media.ioを使用して生成されたペトロールスチールの画像例

18) トワイライトサンドストーン

HEX： #0e0b08 #261a12 #4a2d1f #b07a4c #f3e1cf

雰囲気： 砂漠、暖かみ、シネマティック

最適な用途： トラベルポスターやブティックホテルブランディング

トワイライトブラウンとサンドストーンアンバーは、砂漠の日没や焼かれた壁のイメージ。クリーミーベージュは行き先情報やオファーの可読性を支えます。旅行ポスターやブティックホテルのブランド、ライフスタイルのルックブックにおすすめ。深いティールのフォトアクセントと組み合わせて印象的なコントラストを演出しましょう。ヒント：アンバーは見出しの背後など焦点用に使い、背景一面には避けましょう。

media.ioを使用して生成されたトワイライトサンドストーンの画像例

19) クワイエットダンジョン

HEX： #070607 #151017 #261a2b #3c2a45 #cdbfd6

雰囲気： ゴシック、静寂、雰囲気

最適な用途： ファンタジー書籍カバーやゲームメニュー

控えめなパープルと影のようなグレーは、石造りの回廊に灯る松明のような雰囲気。くすんだラベンダーのハイライトでUIラベルや解説テキストも読みやすく。ファンタジーカバーやテーブルトップのシナリオ、ゲームメニュー画面に最適。装飾的なセリフタイトルやさりげないルーンモチーフと合わせて雰囲気を醸し出しましょう。ヒント：中央コンテンツが最も明るくなるよう、緩やかなビネットを加えましょう。

media.ioを使用して生成されたクワイエットダンジョンの画像例

20) スモークドインディゴデニム

HEX： #0b0e14 #161e2a #23324a #3a5a86 #e3edf9

雰囲気： カジュアル、信頼感、現代的

最適な用途： ファッションECやルックブックレイアウト

スモークドインディゴとデニムブルーは、なじみ深いよく着込んだジャケットのような感覚。冷たいほぼ白に近いカラーで商品名や価格表示もクリアに。ファッションECやルックブック、ブランドニュースレターにおすすめ。写真はミニマルに、テキストは控えめなオフブラックを組み合わせましょう。ヒント：ミディアムデニムトーンはホバーステートやフィルターに使ってフレンドリーなUIを実現しましょう。

media.ioを使用して生成されたスモークドインディゴデニムの画像例

21) チャコールシトラスポップ

HEX： #0a0a0c #1e1f25 #3b3f4a #ffb000 #f2f5f8

雰囲気： モダン、パンチのある、コンフィデント

最適な用途： スタートアップブランディングおよびCTA重視ページ

チャコールのニュートラルにシトラスイエローが弾けると、ストリートウェアラベルや鋭い案内板のようなボールド感。明るいアンバーは主要アクションや通知ドットに最適です。スタートアップのブランディングやコンバージョンページ、プロダクトツアーなど、明快な階層構造が必要な場合にどうぞ。幾何学的なシンプルイラストと組み合わせれば親しみやすく仕上がります。ヒント：アンバーはボタンやアイコン専用、残りはチャコールで構成しましょう。

media.ioを使用して生成されたチャコールシトラスポップの画像例

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

ダークニュートラル（チャコール、インク、ほぼブラック）は、柔らかなオフホワイトやブルーグレーと合わせることで読みやすいタイポグラフィと「エディトリアルな」構成を実現できます。デザインが重すぎる場合は、明るい色（クリームや羊皮紙）のトーンを少し暖かくすると、親しみやすくなります。

アクセントには、ダークな背景によく映えるバイオレット、ティール、サファイア、エメラルドなどのジュエルトーンを。暖色メタリック（カッパー、ブラス、控えめなゴールド）は、純粋な黄色よりも穏やかにコントラストを加えます。

モダンな製品やUIではアクセント使用は最小限に：主要アクション用アクセント1色、状態（成功・警告・エラー）用セマンティックセット、それ以外は濃淡ニュートラルで構成しましょう。

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

はじめに「キャンバス」（最も濃い2色）を選び、ページ背景やヒーローセクション、アプリの全体シェルなど広い面積に使いましょう。その後、中間色をカード、パネル、ナビゲーションに割り当てて、厚い枠線なしでもコンポーネントを分かりやすく配置できます。

最も明るいトーンは、見出しや主要な指標、インタラクティブテキストに戦略的に使用します。ダークテーマでは細すぎる文字はボケてしまうので、フォントウェイトをやや上げ、極細線のアイコンは避けましょう。

最後にコントラストを実際の背景と組み合わせて検証しましょう。ダークパレットは色見本では良く見えても、もしハイライトを多用しすぎるとうまくいきません。明るいアクセントは必要な時にだけ使い、意味と効果を最大化させましょう。

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

ランディングページやポスター、パッケージのコンセプトを作る場合は、上記プロンプトを再利用して、商品・レイアウト・アスペクト比を差し替えてブランド風モックアップを生成しましょう。

Media.io Text to Imageを使えば、複数の照明（リムライト、ソフトシャドウ、ネオングロー）を試し、「デバイスフレームなし」でクリアなプレビュー、背景は無地で合成も簡単です。

気に入った方向性が決まったら、何パターンかバリエーションを生成し、コントラストと余白がベストなものを選んでください。ダークテーマは繊細さが魅力です。

次へ： ブラウンバーガンディカラーパレット