20選 | パープル×ダークブルー配色パレットとHEXコード一覧

パープル ダークブルーのカラー パレットは、モダンなデザインで使用できる最も汎用性の高い「ムード ファースト」の組み合わせの 1 つです。映画的で豪華な雰囲気を感じることができますが、アクセントに応じて清潔で技術的な雰囲気もあります。

以下は、十六進コードを使用した厳選された 20 の紫と深い青のペアリングに加え、コントラスト、ブランディング、UI、ポスター レイアウトに関する実践的なガイダンスを示します。

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

紫は創造性と個性をもたらし、濃い青は信頼と構造を追加します。彼らは協力して、結束力を失うことなく「プレミアム」から「遊び心」に変化できるバランスの取れたカラーストーリーを作成します。

これらのパレットは、深いベースが自然なコントラストを提供するため、ダークモードインターフェイスや夜をテーマにしたポスターにも優れています。落ち着いた色合いでレイアウトを落ち着かせたり、ネオン アクセント (シアン、ミント、ピンク、ゴールド) でエネルギーをプッシュしたりできます。

最も重要なのは、パープル + ネイビー/インディゴは画面全体で美しく撮影してレンダリングする傾向があるため、ブランディング システム、UI コンポーネント、マーケティング クリエイティブに信頼性があります。

20 以上のパープル ダークブルー カラー パレットのアイデア (十六進コード付き)

1) ミッドナイトラン

十六進：#2B124C #1A1F5A #4B2E83 #8F7BD9 #F2E9FF

気分：神秘的、エレガント、モダン

最適な場合:ブランディング・ロゴシステム

神秘的で洗練された、真夜中の空の下でベルベットの花びらのような感触です。深いベースがレイアウトをしっかりと保ち、ライラックのハイライトがすっきりとしたプレミアムな輝きを加えます。このパープル ダークブルーのカラー パレットを使用して、ロゴ、文房具、ランディング ページには、厳しく感じずに自信を必要とします。マットブラックまたはウォームアイボリーと組み合わせ、空白や小さなハイライトのために最も明るい色合いを予約してください。

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

メディア.io

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

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

2）星雲ベルベット

十六進：#2A0F3A #0B1D3A #3A2A6A #5F4DB8 #22D3EE

気分：宇宙的、エネルギッシュ、未来的

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

宇宙的で電気的で、深宇宙を切り裂く星雲の筋のように読まれます。シアンのアクセントが暗いトーンに浮き彫りになり、見出しや焦点要素が生き生きとした印象を与えます。大きなタイプ、大胆な形状、コントラストのためのネガティブなスペースがたくさんあるポスターに使用してください。明るいアクセントを 1 つまたは 2 つの要素に保ち、ノイズではなく滑らかな構成を維持します。

media.ioを使って生成したネビュラ・ベルベットの画像例

3) インディゴ・ダスク

十六進：#1F0F2E #0A2342 #2D2A7A #6A5ACD #C7C3FF

気分：落ち着いて、思いやりがあり、控えめな

最適な場合:モバイルアプリのオンボーディングui

落ち着いて内省的で、静かな街の上に最後の光が消えていくような気分になります。ほぼ黒から柔らかいペリウィンクルにステップアップすることで、読みやすいオンボーディング画面を簡単に構築できます。カードには淡い色合い、ナビゲーションとヘッダーには深い青を使用してください。微妙なグラデーションを控えめに追加して、コピーを圧倒することなく各ステップを通して目を導きます。

media.ioを使って生成したindigo duskの画像例

4) ロイヤルアメジスト

十六進：#3D135F #111C4E #5B2EA6 #B14CFF #FFD166

気分：王様、お祝い、大胆

最適な場合:豪華イベント招待状

王道でお祝いの雰囲気で、ろうそくの明かりに照らされた宝石を示唆しています。ゴールドのノートは、より深い色合いを紫の濃い青の色の組み合わせの1つに変え、すぐに高級感を感じさせます。ホイルのようなアクセントやモノグラム、上品なセリフタイプの招待状に使用してください。ボーダーや小さなオーナメントにはゴールドを残し、ダークブルーに背景を使ってドラマを最大限に演出します。

media.ioを使って生成したロイヤルアメジストの画像例

5）宇宙虹彩

十六進：#240A3D #0D1640 #3C2C8C #7B6DFF #A7F3D0

気分：技術的で、鮮明で、楽観的

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

技術的で鮮明で、暗い表面に宇宙実験室のような鮮明さをもたらします。ミントのアクセントが新鮮さを加え、セットをパープルのダークブルーの配色に変え、やはりフレンドリーな感じがします。階層が明確なダッシュボードに使用します。フレームの場合は深いトーン、チャートの場合はインディゴ、成功状態の場合はミントです。ヒント: 暗いパネルで小さなテキストが読みやすくなるように、データ ラベルのコントラストを早めにテストします。

media.ioを使って生成した宇宙虹彩の画像例

6) ナイトフォールラベンダー

十六進：#2E0D4D #101B4F #3C357A #A78BFA #E9D5FF

気分：癒される、優しい、夢のような

最適な場合:ウェルネスブログ ヒーロー

心地よく夢のような、夕暮れの霧の下のラベンダー畑のように見えます。柔らかい色合いは見出しを風通しがよく感じさせ、深い色合いはボタンとナビゲーションを安定させます。落ち着いた読みやすさが重要なウェルネス、ジャーナリング、瞑想コンテンツに使用してください。温かみのあるオフホワイトやミニマルなラインアイコンと組み合わせ、シャドウを微妙に保ち落ち着いた仕上がりに。

media.ioを使って生成したナイトフォールラベンダーの画像例

7) 深海梅

十六進：#2A0C2F#071A34#2B3A67#7A2E6F#94A3B8

気分：真面目、地に足のついた、プロフェッショナル

最適な場合:コーポレートレポートスライド

深刻で地に足のついた、深い水と磨かれた石を思い起こさせます。スレート ノートは、グラフ、グリッド ライン、およびセカンダリ テキストを濁さずに使用するのに最適です。明瞭さと信頼性が交渉できないデッキに使用してください。ヒント: ナラティブを簡単にスキャンできるように、主要なコールアウトとセクション ディバイダーにプラムを予約してください。

media.ioを使って生成した深海梅の画像例

8）ギャラクシーグレープ

十六進：#3A0F5C #0B144A #2F2A72 #6D28D9 #F472B6

気分：遊び心のある、大胆な、ナイトライフ

最適な場合:音楽祭ポスター

遊び心があり大胆で、夜の通りにネオンがこぼれるような感じです。ピンクのアクセントがパープルにモダンなエッジを与え、特に大きなタイポグラフィとよく合います。完全に虹にならずにエネルギーを必要とするフェスティバルのポスター、プレイリスト、アルバムのプロモーションに使用してください。鮮明な白のタイプと組み合わせて、最も濃い青を背景のアンカーとして保ちます。

media.ioを使って生成したギャラクシーグレープの画像例

9) カテドラルバイオレット

十六進：#2F1645 #0F1B3D #3D2B6F #8B5CF6 #D1D5DB

気分：古典的、洗練された、文学的

最適な場合:ブックカバーデザイン

クラシックで洗練された、ステンドグラスと静かな図書館を思い出させます。シルバーグレーは、字幕テキストと著者名の現代的なニュートラルのように機能します。洗練されたトーンのフィクションの表紙、エッセイ、詩集に使用してください。ヒント: タイトルに強い紫色を 1 つ選択し、視覚的な乱雑さを避けるためにグレーのサポート テキストを使用し続けます。

media.ioで生成されたカテドラルバイオレットのイメージ例

10) サファイアマルベリー

十六進： #311047 #0A1A4F #113C8A #7C3AED #38BDF8

気分：自信、クリーン、高コントラスト

最適な場合:eコマース商品広告

自信がありクリーンで、サテン生地の上に鋭いスポットライトが当たったように見えます。明るいシアンブルーがコールトゥアクションを即時的に感じさせ、デジタル広告で最も実用的なパープル×ダークブルーの組み合わせのひとつです。eコマースのバナーや特長表現、モダンなテック感のある新商品発表に使用してください。商品写真は白または非常に濃いネイビーにして、バイオレットは価格タグやバッジに使いましょう。

media.ioで生成されたサファイアマルベリーのイメージ例

11) トワイライトブルーム

十六進： #2B0F3F #111A46 #3B2B80 #C084FC #FB7185

気分：ロマンティック、鮮やか、若々しい

最適な場合:ソーシャルメディアカルーセル

ロマンティックで鮮やか、夕暮れの花々が最後のピンクの光を捉えるような雰囲気です。暖かいアクセントがライフスタイルコンテンツや名言カードに親しみやすさを与えます。カルーセルで使用する際は、1つは暗い背景、1つは明るい見出し色、1つはアクセントとしてハイライトに使いましょう。ヒント：本文はとても明るいラベンダーにしておくことで、暗いフレームでも可読性が高く保てます。

media.ioで生成されたトワイライトブルームのイメージ例

12) ネオンバイオレットパルス

十六進： #2A0A45 #081A4A #3D2CFF #A855F7 #34D399

気分：エレクトリック、スポーティ、配信対応

最適な場合:ゲーミング配信オーバーレイ

エレクトリックでパンチがあり、暗いアリーナの床にパワーアップの光が映えるような印象です。ネオンアクセントがグラデーションとうまく調和し、パネルやアラートに瞬時に注目を集めます。このパープルとダークブルーの配色は、配信オーバーレイやeスポーツバナー、エネルギッシュなクリエーターブランディングに最適です。ヒント：一番明るい色はステータス要素だけに使い、主な内容エリアは可読性を高く保ちましょう。

media.ioで生成されたネオンバイオレットパルスのイメージ例

13) インクベリーリュクス

十六進： #220A2E #0B1635 #1D2B64 #5B21B6 #F5F3FF

気分：プレミアム、ミニマル、エディトリアル

最適な場合:プレミアムパッケージ

プレミアムかつミニマルで、インクが紙にしみこんだような高級感があります。ほぼ白の色味がラベルのスペースを作り、暗いトーンが棚のシルエットを際立たせます。コスメやキャンドル、ブティックフードなど静かなラグジュアリー感が欲しい時におすすめです。ヒント：最も深いトーンはソフトタッチ仕上げと組み合わせ、バイオレットはワンポイントのマークやシールにだけ使いましょう。

media.ioで生成されたインクベリーリュクスのイメージ例

14) ムーンリットペリウィンクル

十六進： #2B0F4D #14245F #3F3CBB #9AA5FF #EEF2FF

気分：エアリー、ルミナス、モダン

最適な場合:エディトリアル誌面レイアウト

エアリーでルミナス、雲に反射する月明かりを思わせます。明るいペリウィンクルは、写真を消さずにクリーンなカラムやプルクオートを支えます。クールで現代的なトーンが欲しいファッションやカルチャー特集に最適です。ヒント：キャプションは最も暗いブルー、余白やネガティブスペースには最も淡い色合いを使いましょう。

media.ioで生成されたムーンリットペリウィンクルのイメージ例

15) オーベルジンストーム

十六進： #2D0B33 #0B1B3F #2F2F7A #6B21A8 #F8FAFC

気分：ドラマチック、スリーク、自信

最適な場合:ミニマリストウェブサイトテーマ

ドラマチックでスリーク、バイオレットの閃光がある雷雲のような雰囲気です。クリーンなほぼ白が文字やUIの空間を意図的で鋭く見せます。ヘッダーやカード、ボタンの明確な区切りが必要なダークモードの基盤として使ってください。パープル×ダークブルーの組み合わせの中でも、アクセントを限定しタイポグラフィが主役になることで輝きます。

media.ioで生成されたオーベルジンストームのイメージ例

16) ラベンダーノワール

十六進： #1F0B2E #0A102A #1F2A5A #8B5CF6 #A1A1AA

気分：ムーディー、アーティスティック、ギャラリー風

最適な場合:写真ポートフォリオUI

ムーディーでギャラリーのよう、濃い壁でプリントを引き立てるように画像をフレーミングします。グレーは仕切りやメタデータなど繊細なUI要素に最適です。作品が主役でナビゲーションは控えめなポートフォリオに使いましょう。ヒント：サムネイル枠はミニマルにし、バイオレットはホバー状態や選択されたフィルターだけに使います。

media.ioで生成されたラベンダーノワールのイメージ例

17) エレクトリックヒヤシンス

十六進： #3B0764 #0B1B5A #312E81 #D946EF #22C55E

気分：ラウド、エッジー、ナイトライフ

最適な場合:ナイトクラブフライヤー

ラウドでエッジが効いており、レーザービームと低音が響くような印象。グリーンアクセントが紫を甘くなりすぎず、鋭さを加えます。大きなタイポグラフィ、高コントラスト、幾何学的なパターンのフライヤーに使いましょう。ヒント：フォントウェイトは2種類までにし、色コントラストでひと目で分かるようにすると可読性がアップします。

media.ioで生成されたエレクトリックヒヤシンスのイメージ例

18) フロステッドアイリス

十六進： #2B0A3D #0A1B44 #3742A6 #A5B4FC #F1F5F9

気分：クール、クリスプ、信頼感

最適な場合:フィンテックアプ​​リUI

クールでクリスプ、深い水の上に曇りガラスを重ねたような印象です。明るい色調が、モダンでやや未来的な雰囲気を保ちながら信頼感のある画面を作ります。フィンテックUIなど状態・チャート・ボタンに一貫したコントラストが必要な時におすすめです。ヒント：一番明るい色を面に、飽和ブルーは主なアクションボタンに使い、視覚的な疲労感を回避しましょう。

media.ioで生成されたフロステッドアイリスのイメージ例

19) プラムオブザーバトリー

十六進： #2A0A2F #0B153A #3A2D6F #9333EA #FDE68A

気分：好奇心、学究的、暖色アクセント

最適な場合:教室プレゼンテーションテンプレート

好奇心旺盛で学問的、夜の天文台に暖かなランプの光が差し込んでいるような印象。バターのようなアクセントカラーが深いトーンを親しみやすくし、長文でも読みやすさを保ちます。授業用スライドやウェビナー、図解やコールアウトを用いた研究要約などに。ヒント：暖かいイエローは重要な用語やクイズの答えのみに使い、その他はクールな色で集中力を維持しましょう。

media.ioで生成されたプラムオブザーバトリーのイメージ例

20) バイオレットハーバー

十六進： #34125A #081A3A #1D4ED8 #7C3AED #E0F2FE

気分：フレッシュ、沿岸の夜、冒険的

最適な場合:旅行パンフレットカバー

フレッシュで冒険的、夜の海岸線に港の明かりが灯るような印象です。明るい青がクリアさと動きを与え、淡い空の色がレイアウトに呼吸感をもたらします。パンフレットカバーで、太い見出しと現代的な旅行感を演出したい時に使いましょう。ヒント：タイトルは一番明るい色×一番濃いベースで、明るい青はルートラインや小さなアイコンのみに使いましょう。

media.ioで生成されたバイオレットハーバーのイメージ例

パープル ダークブルーと合う色は何ですか?

ニュートラルカラーは最も使いやすい：暖かいアイボリー、クールな白、柔らかなグレーがパープル×ネイビーのレイアウトを読みやすく、プレミアムに保ちます。よりダークでエディトリアルな仕上げにしたいなら、チャコールやマットブラックを少量加えて奥行きを出しましょう。

より強いコントラストを出したい場合は、シアン、ミント、ホットピンク、エレクトリックブルーなど明るいアクセントを選びましょう。これらは深いベースにきれいに映え、CTAやバッジ、チャートのハイライトに最適です。

高級感やセレモニー感を出したい場合は、ゴールドやバターイエローなど暖かなメタリック系アクセントを取り入れてみてください。枠線やアイコン、小さなオーナメントなど最小限にすれば、意図的で洗練された印象になります。

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

まず役割分担から始めてください：最も暗いブルー／パープルを背景基調、ミッドトーンを面（カードやセクション）に、最も明るい色調を余白や区切り、可読性の高いテキストエリアに使いましょう。これで印刷・デジタルどちらのレイアウトでも階層が明確になります。

UIでは、アクセントカラーの数を絞りましょう。1色の明るいアクセント（シアン・ミント・ピンク・ゴールド）を主要アクションやキー状態に限定すると、視線誘導がしやすくなり、特にダッシュボードやオンボーディングフローで視覚的な疲労が減ります。

ポスターやSNSグラフィックではコントラストを効かせて：暗いベースに大きなタイポグラフィ、そのうえでネオンや暖色アクセントをひとつ加え視線を誘導します。グラデーションを使う場合は、（例：ディープネイビーからインディゴへ）控えめ・一貫性のあるものにし、全体の一体感を保ちましょう。

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

これらのHEX組み合わせが実際のデザイン（ポスターやブランドキット、パッケージモックアップ、UI画面など）でどう見えるか確認したい場合は、AIでクイックサンプルを生成しましょう。生産前にムード・コントラスト・可読性を検証する速い方法です。

Media.ioでは、プロンプトを貼り付けてアスペクト比を指定し、配色のバランスが整うまでバリエーションを繰り返し生成できます。最も濃い色をベースに、アクセントカラーは「小さなハイライト」として使いすぎないように指定しましょう。

次へ： ゴールドブルーのカラーパレット