ミッドナイトブルー配色20選：カラーコードとAIデザイン例

ミッドナイトブルーは、プレミアム感、落ち着き、現代的な印象を同時に与えるダークブルーの一種です。ドラマチックな深みがありつつ、純粋な黒よりも目に優しい色合いです。

以下はブランディング、UI、ポスター、パッケージ、インテリアに使えるミッドナイトブルーのカラーバリエーションです。各パレットにはHEXコードと、Media.ioで再利用できるAI画像生成プロンプトが付いています。

ミッドナイトブルーの配色が優れている理由

ミッドナイトブルー（たとえば#0b1320）は絶妙な位置にあります。シネマティックで高級感があるほど濃いのに、黒よりも色の個性を感じやすい色です。そのため、「真面目」だけど冷たくなりすぎないブランドカラーとして最適です。

もともと反射が少ないため、ミッドナイトブルーはインターフェース、特にダークモードに最適です。コントラストと読みやすさが重要な場面で効果を発揮します。コントロールされたアクセントカラー（シアン、コーラル、ゴールド）と組み合わせれば、視覚ノイズなしに明瞭になります。

デザイン的には、ミッドナイトブルーは暖かみのあるニュートラル（アイボリー、パーチメント、サンドストーン）にも、寒色系（スチール、ティール、アイシーアクア）にもよく合います。この柔軟性が、ポスターやパッケージ、インテリア、編集系レイアウトのさまざまな分野で使われる理由です。

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

1）ナイトハーバー

HEX：#0b1320 #0f2a45 #1e4e6a #8fb8c9 #f2efe9

雰囲気：シネマティック、落ち着き、海の雰囲気

おすすめ用途：トラベルブランドのランディングページヒーローUI

シネマティックで落ち着いた印象。霧がかった港の明かりが深い水面を照らす情景が浮かびます。ヘッダーやナビゲーションには濃い色を、見出しやチャートのハイライトには柔らかいシーグラスブルーを使いましょう。温かみのあるオフホワイトを取り入れることで、レイアウトの読みやすさを保ちつつ、冷たくなりません。コツ：最も明るいトーンは重要なアクション用に限定し、全体の雰囲気を保ちながらコンバージョン率を維持しましょう。

Media.ioで生成したナイトハーバーの画像例

Media.io

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

今すぐ無料で試す

2）ベルベットネビュラ

HEX：#0d1026 #1b1f4a #3d2c6d #b07bb4 #f6d6e8

雰囲気：雰囲気：幻想的、ラグジュアリー、宇宙的

おすすめ用途：おすすめ用途：アルバムカバーアートワーク

幻想的でラグジュアリーな色合い。ベルベットの夜空に柔らかな星雲が輝くイメージです。背景には最も深いネイビーを使い、バイオレットやプラムでグラデーションやタイポグラフィの影を重ねましょう。ブラッシュピンクはさりげないハイライトに留めるのが上品です。コツ：グレインや柔らかなビネット効果で紫をリッチに、派手になりすぎない演出を。

Media.ioで生成したベルベットネビュラの画像例

3）アークティックミッドナイト

HEX：#071525 #0c2a45 #2d6f85 #a7d9e6 #eef9fb

雰囲気：雰囲気：シャープ、澄んだ、極地的

おすすめ用途：おすすめ用途：SaaSダッシュボードのチャートや表

シャープで澄みきったミッドナイトブルー。氷の反射やピュアな空気感のある北極の夜をイメージさせる配色です。表のヘッダーやサイドバーには濃いブルーを、選択状態やデータのハイライトには明るいアクアブルーを使いましょう。最も明るいトーンを使えば、情報量の多いダッシュボードでも目が疲れません。コツ：グリッドラインは控えめにして、アクアのハイライトが集中を誘うように使いましょう。

Media.ioで生成したアークティックミッドナイトの画像例

4）インク＆アイボリー

HEX：#0a1220 #111827 #374151 #e5e7eb #fff7ed

雰囲気：雰囲気：エディトリアル、ミニマル、上品

おすすめ用途：おすすめ用途：ポートフォリオサイトのタイポグラフィシステム

洗練されたエディトリアルデザイン。厚手アイボリーペーパーに静かな濃淡を持たせたインクのよう。装飾より階層性を重視するタイプ主体のレイアウトに最適です。最も濃い2色は見出しやナビゲーションに、広い白地には温かみのあるアイボリーを。コツ：純粋な黒ではなく深いネイビーを使うことで、プレミアム感と優しさが演出できます。

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

5）サファイアエスプレッソ

HEX：#0b1b3a #123c69 #f0b429 #5c3a21 #f7f3e9

雰囲気：雰囲気：大胆、温かみ、洗練

おすすめ用途：おすすめ用途：コーヒーパッケージ・商品広告

大胆かつ洗練された色調。深夜のエスプレッソにサファイアの艶を添えたようなイメージです。濃いブルーと温かいゴールドを組み合わせ、ラベルやシール、プレミアムな装飾として目立たせましょう。コーヒーブラウンがデザインの基調を支え、ゴールドが派手になりすぎません。コツ：ゴールドは小さめで存在感ある要所—箔押しのラインやバッジ程度に—とどめれば高級感がキープできます。

Media.ioで生成したサファイアエスプレッソの画像例

6）ムーンリットラベンダー

HEX：#10162f #2a2f6b #6b5ca5 #d9c7ff #f5f1ff

雰囲気：雰囲気：柔らかい、ロマンチック、夜のイメージ

おすすめ用途：おすすめ用途：結婚式招待状セット

柔らかく夜を感じさせるミッドナイトブルー。月明かりとラベンダーの花びら、シルクリボンを思わせる配色です。最も濃い色はタイポグラフィやモノグラム、ライラックは境界線やアイコン、繊細な装飾柄に。淡いラベンダーホワイトで紙面をエアリーかつロマンチックに。コツ：ダークインク部分はエンボス加工、ライラックのアクセントは細部に留めて、甘すぎない上品さを。

Media.ioで生成したムーンリットラベンダーの画像例

7）コースタルストーム

HEX：#0b1d2e #1b3a57 #3a6d8c #7fb1c6 #d9e9ef

雰囲気：雰囲気：フレッシュ、風になびく、自信

おすすめ用途：おすすめ用途：アウトドアブランドのSNS投稿

風を感じる自信と爽やかさ。明るい沿岸の水面に嵐が近づくイメージです。見出しブロックはネイビーで力強く、波形や図形には中間のブルーを。ミストカラーはモバイルでも画面がすっきり見えるネガティブスペースとして活躍します。コツ：文字は2番目に濃い色か最も濃い色に置いてコントラストを保ちましょう。

Media.ioで生成したコースタルストームの画像例

8）ブラスオブザーバトリー

HEX：#0b1526 #1c2f4a #2f4f6f #c6a15b #f2eadc

雰囲気：雰囲気：ヴィンテージ、学術的、雰囲気たっぷり

おすすめ用途：おすすめ用途：ブックカバーデザイン

ヴィンテージで知的な雰囲気。真鍮の器具、古い星図、静かな天文台を思わせます。クラシカルなコントラストが際立つ配色。濃いネイビーが背景、真鍮色がタイトルや装飾、パーチメントで余白を確保。中間のブルーはグラデーションや星座イラストの橋渡しに。コツ：真鍮のアクセントはやや落ち着かせて、スクリーン上でメタリック過剰にならないように。

Media.ioで生成したブラスオブザーバトリーの画像例

9）黄昏の森

HEX：#08131f #0f2d2e #2f5d50 #7aa68d #e7efe6

雰囲気：雰囲気：アーシー、静か、安定感

おすすめ用途： エコフレンドリーなブランドアイデンティティ

静かで落ち着いた雰囲気は、夜が近づく松の影と冷たい空気のように感じられます。深いブルーグリーンをブランドのコアカラーとして使用し、苔のようなグリーンをサポート用のグラフィックやセカンダリボタンに活用します。淡いセージホワイトは、持続可能性を伝えるメッセージを穏やかで信頼できるものにします。ヒント：リサイクルペーパーのテクスチャとミニマルなアイコンを組み合わせることで、モダンかつ洗練されたアイデンティティを維持できます。

media.ioを使用して生成した夕暮れの森の画像例

10) チェリーノワール

HEX： #0b1020 #22112b #4b1d3f #b23a64 #f3d3dd

雰囲気：ムーディー、ドラマティック、ロマンチック

おすすめ用途：カクテルバーイベントポスター

ムーディーでドラマティックなこのミッドナイトブルーのカラースキームは、キャンドルの光とチェリーレッドの輝きが漂うカクテルタイムを想起させます。ダークネイビーとナス色をベースに、チェリーアクセントを日付、場所、チケット価格など重要なディテールに使います。ブラッシュトーンはポスターの読みやすさを保ち、柔らかさを演出します。ヒント：デュオトーンの背景を試し、チェリー色は一つの目立つ要素にだけ使用します。

media.ioを使用して生成したチェリーノワールの画像例

11) グレイシャースチール

HEX： #0a1624 #12304a #2a5c7a #9bb3c4 #e9eef2

雰囲気：テクニカル、クール、信頼感

おすすめ用途：B2Bピッチデックスライド

テクニカルで信頼できる雰囲気は、冷たいスチールやガラス、クリーンなエンジニアリングのよう。最も深い色をスライドのタイトルやセクション区切りに、ミッドブルーを図やアイコンに使用します。ライトグレー・ブルーはチャートを読みやすくし、冷たい印象を保ちます。ヒント：1枚のスライドごとにアクセントカラーを1つに絞り、他の階層には色の濃淡でメリハリをつけます。

media.ioを使用して生成したグレイシャースチールの画像例

12) コーラル・アフターダーク

HEX： #0b1326 #102a43 #1f6f8b #ff6b6b #fff1f0

雰囲気：遊び心、モダン、ハイコントラスト

おすすめ用途：アプリオンボーディング画面

遊び心いっぱいのモダンな雰囲気は、深い夜の海に輝くネオンコーラルのようです。ミッドナイトブルーの組み合わせは、オンボーディングに最適で、コーラル色が進行やアクションを直感的に表現します。ミッドティール・ブルーは、セカンダリイラストやフレンドリーなアイコン塗りに使います。ヒント：コーラルはボタンや重要なハイライトのみに使い、特別感を維持します。

media.ioを使用して生成したコーラル・アフターダークの画像例

13) サンドストーン・エクリプス

HEX： #0a1422 #1b2a3a #4a5568 #d6c3a3 #f7f0e6

雰囲気：暖かいニュートラル、建築的、タイムレス

おすすめ用途：リビングルームインテリアムードボード

建築的でタイムレス。夕空と温かな砂岩やリネンの雰囲気を感じます。深い色を収納や造作、アクセントウォールに、サンディベージュをテキスタイルやラグに使ってバランスを取ります。ソフトクリーム色は空間を重くせずに広々と演出します。ヒント：マットブラックの金具は端だけに使い、温もりを損なわずシャープな印象をプラスします。

media.ioを使用して生成したサンドストーン・エクリプスの画像例

14) ティール・コンステレーション

HEX： #071a2d #0b3a4a #0f7a7a #7fe0d8 #e7fffb

雰囲気：エネルギッシュ、水生、未来的

おすすめ用途：テックカンファレンスフライヤー

エネルギッシュで水生的、このミッドナイトブルーのパレットは深い水面に輝く星座を想起させます。フライヤーの背景にミッドナイトカラーを使い、ティールのタイポとアイコンでシャープかつモダンなコントラストを作ります。明るいアクアは日付、QRコード、セクションマーカーなど小さなハイライトに最適。ヒント：背景はクリーンに保ち、ティールのグラデーションだけで動きを演出します。

media.ioを使用して生成したティール・コンステレーションの画像例

15) ローズスモーク

HEX： #0b1224 #2a1f3d #5a3f6f #d7a6c2 #f8f1f6

雰囲気：柔らかい、懐かしい、エレガント

おすすめ用途：ビューティーブランドパッケージ

柔らかく懐かしい雰囲気は、夕暮れの部屋に漂うローズパウダーのよう。最も暗い色でロゴや小さな文字を扱い、モーヴやローズで優しいブロックやグラデーションを作ります。淡いブラッシュはメインのカートン背景に最適で、軽やかかつプレミアム感を演出。ヒント：サテン仕上げとトーンパターンで、パッケージが触感を感じさせつつ忙しい印象にならないようにします。

media.ioを使用して生成したローズスモークの画像例

16) サイバーミッドナイトUI

HEX： #0a0f1f #0d1b3d #1f3cff #35c9ff #e9f1ff

雰囲気：エレクトリック、スリーク、ハイテク

おすすめ用途：ダークモードフィンテックアプリUI

エレクトリックでスリーク。深夜2時の都市の光がガラスに映るイメージです。このミッドナイトブルーのパレットはダークモードに最適、明るくコントロールされたアクセントによる明瞭さが鍵です。鮮やかなブルーを主要アクション、シアンをステータスやマイクロインタラクションに使用します。ヒント：明るいアクセントは一画面につき2つのコンポーネントまでに限定し、インターフェースがプレミアム感を損なわないようにします。

media.ioを使用して生成したサイバーミッドナイトUIの画像例

17) ミュージアム・エディトリアル

HEX： #0b1320 #1f2937 #6b7280 #d1d5db #fafaf9

雰囲気：キュレートされた、落ち着き、モダンクラシック

おすすめ用途：雑誌特集レイアウト

キュレートされ落ち着いた雰囲気は、ギャラリーの壁のよう：深いフレーム、柔らかな照明、余白のある空間。ヘッドラインにはネイビー、キャプションやプルクォートにはグレーで強いタイポリズムを構築します。温かなホワイトはレイアウトを無機質にせず、特に長文の記事に最適です。ヒント：最も暗い色はトップ階層にだけ使い、全体が軽やかかつ高級感を保つようにします。

media.ioを使用して生成したミュージアム・エディトリアルの画像例

18) ラグジュアリーホテルロビー

HEX： #091223 #132a3e #2b4c5f #b08d57 #1c1c1c

雰囲気：ラグジュアリー、親密、ドラマティック

おすすめ用途：ホテルブランドウェブサイトヘッダー

ラグジュアリーで親密な雰囲気は、暗いロビーに真鍮の装飾と柔らかな影を感じさせます。ミッドナイトブルーのカラースキームは控えめなゴールドをボタンやアイコン、細いルールにアクセントとして使うと効果的です。チャコールはフッターやオーバーレイの深みを加えるセカンダリトーン。ヒント：暖色系の写真を選び、ネイビーのオーバーレイでビジュアルがパレットに合うよう調整します。

media.ioを使用して生成したラグジュアリーホテルロビーの画像例

19) ウィンターウェディングスイート

HEX： #0b1630 #233b6e #6b8fe6 #c9d6ff #fff8fb

雰囲気：クリスプ、祝祭的、エアリー

おすすめ用途：冬のウェディングセーブザデート

クリスプで祝祭的、黄昏の雪と柔らかなブルーシルクのような雰囲気です。深い色は名前や会場詳細に使用し、鮮やかなブルーはボーダーや星や雪のアイコンに活用します。淡いアイシーラベンダーブルーは、花嫁感を保ちながらも柔らかな背景になります。ヒント：装飾要素を控えめにして、余白でエレガンスを演出しましょう。

media.ioを使用して生成したウィンターウェディングスイートの画像例

20) スペースバウンドグラデーション

HEX： #060b1a #0b1f3a #233a7a #6b5cff #f1efff

雰囲気：広がり、モダン、雰囲気

おすすめ用途：音楽フェスティバルチケットデザイン

広がりと雰囲気のあるミッドナイトブルーの組み合わせは、エッジにバイオレットの差し色があるディープスペースグラデーションのよう。チケットベースにブラック近い色を使い、インディゴからバイオレットへ滑らかなグラデを中心部に展開。ソフトなホワイトはQRコードや細かい文字を鮮明に保ちつつ雰囲気を損ねません。ヒント：グラデーションは1パネルだけに適用し、スキャンエリアはコントラストを強く保ちます。

media.ioを使用して生成したスペースバウンドグラデーションの画像例

ミッドナイトブルーに合う色は？

ミッドナイトブルーはアイボリー、クリーム、パーチメント、ベージュ、ソフトブラッシュなど暖かいニュートラルと美しく調和します—これらはダークなレイアウトを読みやすくし、パレットに高級感をもたらします。

モダンでハイコントラストな仕上がりを求めるなら、コーラル、シアン、エレクトリックブルーなど明るいアクセントを追加しましょう。アクセントは控えめに（ボタン、バッジ、主要な数字など）使うことでデザインがクリーンに保たれます。

より穏やかで「ナチュラル」な印象にしたい場合は、ミッドナイトブルーをティール、セージ、苔グリーンと組み合わせるのがおすすめです。現代的かつ地に足のついた雰囲気を作れます。

ミッドナイトブルーパレットを実際のデザインで使う方法

まず、ミッドナイトブルーをヘッダー、ナビ、背景、ヒーローブロック、パッケージパネルなど広い面積の基礎色に選びましょう。次に、読みやすさや余白のためのライトニュートラルを1色選びます（カード、ページ背景、ネガティブスペースなど）。

次に、アクセントの役割をひとつ決めましょう：アクション（CTAボタン）、強調（主要な数値）、装飾（オーナメント）。ミッドナイトブルーがベースのとき、アクセントは存在感が強くなるため、少量で十分です。

最後に、コントラスト管理を意識しましょう：最も暗い2色にはホワイトやオフホワイトのテキストを重ね、ミッドトーンはセカンダリUI状態や区切り、イラストに活用します。こうすることで階層が明確になり、ごちゃごちゃせずに済みます。

AIでミッドナイトブルーパレットのビジュアルを作成する

UI画面、ポスター、招待状、パッケージなどの早いモックアップが必要なら、上記パレットのプロンプトを使ってAIでブランドビジュアルを生成できます。テーマ（例：「ランディングページヒーロー」や「書籍カバー」）を変えても、カラールールを守れば一貫性が保てます。

Media.io Text-to-Imageは、グレイン追加、比率変更、デザインスタイル変更などのバリエーション探求に便利です—レイアウトを一から作り直す必要がありません。

次へ： スペースカラーパレット