バイオレットブルー配色22選｜おすすめカラーコーディネート例と#5a4bff

バイオレットブルーは、ブルーの信頼感とバイオレットの想像力の間に位置し、現代のUIやブランディング、編集デザインに最適な選択肢となっています。

以下に、HEXコード付きの厳選されたバイオレットブルーのカラーパレットアイデア20種類以上と、配色やコントラスト、実際の使用に役立つガイドラインをご紹介します。

バイオレットブルーのパレットがうまく機能する理由

バイオレットブルーは、「橋渡しカラー」と呼ばれ、信頼感と表現力の両方を感じさせます。ブルーが持つ安定感に、パープルの繊細な創造性を加えます。

デジタルデザインでは、バイオレットブルーは淡い色調に対してクリーンでハイコントラストに映え、クールなニュートラルカラー（シルバー、スレート、オフホワイト）やウォームアクセント（ゴールド、クレイ、コーラル）とも相性良く組み合わせることができます。

ブランディングや印刷物全体では、バイオレットブルーは雰囲気を簡単に変えられます。インディゴ系の深い配色は高級感や映画的な印象、ペリウィンクル系の淡い色調は軽やかで親しみやすく、現代的に仕上がります。

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

1）ミッドナイトアイリス

HEX： #1b1533 #2a1f5e #4633b9 #7a6cff #e9e6ff

雰囲気： シネマティック、大胆、ミステリアス

おすすめ用途： SaaSのランディングページヒーロー・ナビゲーション

映画的かつ夜の雰囲気を備えたこの配色は、深いベルベットに映る都市の光のような印象です。最も暗い色はヘッダーやナビに、中心のバイオレットブルーは主要ボタンやリンクに最適。読みやすさを保つには淡いライラックホワイトを組み合わせ、無機質にならないようにします。使い方のコツ：一番明るいトーンは大きな背景ブロックに使い、中間色が際立つよう調整しましょう。

media.ioで生成したミッドナイトアイリスの画像例

Media.io

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

今すぐ無料で試す

2）ペリウィンクルミスト

HEX： #f4f2ff #dcd8ff #a9a2ff #6b63f6 #2c2a7a

雰囲気：雰囲気：

おすすめ用途： ウェルネスアプリのオンボーディング画面

空気感があり穏やかなこのセットは、柔らかなペリウィンクル色に染まる朝霧のような印象です。淡いトーンでレイアウトに余白を生み、濃いバイオレットブルーは進捗や主要アクションに使いましょう。深いインディゴがアイコンや重要なラベルを明るい背景でもはっきりさせます。使い方のコツ：中間のラベンダーをやわらかいグラデーションとして使うと、フラットさを和らげてノイズを増やさずに済みます。

media.ioで生成したペリウィンクルミストの画像例

3）エレクトリックバイオレットポップ

HEX： #0f1026 #2d2a8c #5a4bff #ff4fd8 #f2f4ff

雰囲気：雰囲気：

おすすめ用途： 音楽イベントポスターのデザイン

パンチが効いてエレクトリックな印象、深夜のセットにネオンが映るような雰囲気です。バイオレットブルーは見出しや主要な形状に、マゼンタは日付や注目部分のアクセントとして適度に使います。ほぼ黒のベースが全体を引き締め、鮮やかな色を引き立てます。使い方のコツ：マゼンタはレイアウト全体の15％以下に抑え、アクセントとして機能させます。

media.ioで生成したエレクトリックバイオレットポップの画像例

4）ロイヤルインク＆シルバー

HEX： #14112a #2b235a #4b3fbf #bfc5d8 #f6f7fb

雰囲気：雰囲気：

おすすめ用途： 高級ブランドのアイデンティティ・ステーショナリー

磨き抜かれた高貴な印象で、厚手の紙にインクをのせたような冷たい金属の光沢感です。深いインクトーンはロゴやタイポグラフィに、バイオレットブルーはモノグラムや署名マークに。シルバーグレーはラインや封印、さりげないパターンに使える洗練されたニュートラルカラーです。使い方のコツ：最も暗い色を濃いブラックの代用として印刷すると、柔らかく上質な仕上がりになります。

media.ioで生成したロイヤルインク＆シルバーの画像例

5）ラピスラベンダークリーム

HEX： #2a2c8a #5247d6 #9b8cff #f3e7ff #fff6e8

雰囲気：雰囲気：

おすすめ用途： ウェディング招待状セット

ロマンティックで明るい印象、温かいキャンドルライトにラベンダーの花びらが浮かぶイメージです。クリーム色は用紙のベースに、バイオレットブルーは名前や見出しなどに重ねます。淡いライラックは、枠やアイコン、繊細な装飾にぴったり。使い方のコツ：本文は深いラピス色にすると、やさしいコントラストを保てます。

media.ioで生成したラピスラベンダークリームの画像例

6）コズミックベリードリフト

HEX： #0b0d1e #2b1b5a #4f3adf #a24bff #ffd1f3

雰囲気：雰囲気：

おすすめ用途： ビューティー製品広告クリエイティブ

夢幻的で宇宙的な雰囲気、ベリー色の霞に星屑が溶けるイメージです。これらのバイオレットブルーの組み合わせはグラデーションの多い広告に映え、深いインディゴが鮮やかなパープルアクセントへと滑らかに移ります。淡いピンクはグロー効果のハイライト用に、背景全体には使いすぎないこと。使い方のコツ：グラデーションにはソフトなグレインを加え、SNS出力時のバンディングを防ぎましょう。

media.ioで生成したコズミックベリードリフトの画像例

7）ストーミーデニムスレート

HEX： #1a2238 #2f3a66 #4553a6 #8a93c6 #e6e9f4

雰囲気：雰囲気：

おすすめ用途： B2Bダッシュボード・データビジュアライゼーション

クールで頼れる印象、古びたデニムの上に嵐雲がかかるイメージです。スレートブルーはグラフやホバーステートに、淡いグレーブルーは背景パネルカラーに適しています。最も暗いネイビーは表やツールバー、サイドバーアイテムの構造化に使います。使い方のコツ：中間のバイオレットブルーは主要指標のみに絞り、分析画面が騒々しくならないようにしましょう。

media.ioで生成したストーミーデニムスレートの画像例

8）アメジストネオンナイト

HEX： #070716 #22104f #4a2cff #00d4ff #f7f2ff

雰囲気：雰囲気：

おすすめ用途： ゲーム配信オーバーレイグラフィック

未来的かつ鮮明で、暗いアーケードを切り裂くネオン看板のようなイメージです。バイオレットブルーは主要なフレームやパネルカラーに、シアンはアラートやライブバッジに使用します。オフホワイトのトーンは小さな文字を読みやすくしつつ、オーバーレイがグレー化しないように調整します。使い方のコツ：シアンは動きのある要素のみ使い、視線が重要な部分に集まるように。

media.ioで生成したアメジストネオンナイトの画像例

9）サファイアオーキッドクレイ

HEX： #1e1b4b #3f3aa8 #7a6cff #d7c4ff #c6a18a

雰囲気：芸術的、現代的、やや暖かみ

おすすめ用途：ブティックインテリア ムードボード

アート感とモダンな雰囲気で、クールなサファイアとオーキッドの柔らかさ、さらにクレイの暖かみが絶妙にミックスされています。バイオレットブルーやソフトライラックはテキスタイルや壁のアクセントに、クレイトーンは木材やレザー、セラミックなどで取り入れてください。ディープインディゴはベースの塗装やメタル仕上げに最適です。使用のコツ：クレイのアクセントは最低2回繰り返して、カラーパレットが冷たくなりすぎないようにしましょう。

media.ioを使って生成されたサファイア・オーキッド・クレイのイメージ例

10) グレイシャーバイオレット・ミニマル

HEX： #f8f9ff #e6e9ff #b8c0ff #6a74ff #2a2f6e

雰囲気：クリーン、ミニマル、テック志向

おすすめ用途：フィンテックモバイルUIコンポーネント

クリーンで氷のような雰囲気に、バイオレットのきらめきが感じられます。 このバイオレットブルーの配色は、冷たくなりすぎず精密さを感じさせるため、フィンテックのUIに最適です。ライトなトーンはカードやサーフェスに、鮮やかなブルーバイオレットはメインのアクションやアクティブなタブに使ってください。使用のコツ：エラーや成功のカラーは控えめなトーンで、ベースの色調がブランドの主役であることを保ちましょう。

media.ioを使って生成されたグレイシャーバイオレットミニマルのイメージ例

11) インディゴ・プラム・ベルベット

HEX： #120a1f #2a0f3d #3b2aa3 #7d4aa8 #f0d7ff

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

おすすめ用途：カクテルバーメニュー デザイン

ドラマティックでベルベットのような質感は、キャンドルが灯るブースや柔らかなドレープを連想させます。ほぼブラックのプラムをメニューベースに使い、セクションタイトルはバイオレットブルーで上品な輝きを添えましょう。淡いピンクライラックはスペシャル用のアクセントにぴったり（可愛らしくなりすぎません）。使用のコツ：ネガティブスペースをたっぷりとり、暗い背景でも重たくならずプレミアム感を保ちましょう。

media.ioを使って生成されたインディゴ・プラム・ベルベットのイメージ例

12) スカイバイオレット・シトラス

HEX： #f2f7ff #8f9bff #4b52d9 #2b2d6f #ffcc4d

雰囲気：明るい、現代的、人目を引く

おすすめ用途：スタートアップ向けソーシャルメディアカルーセル

明るくモダンで、澄み切った空に自信あふれるシトラスが加わった空気感です。バイオレットブルー系は見出しや図形に、イエローは主な数字やCTA、ステッカーなどの強調パーツに限定しましょう。ネイビーは細かいテキストの可読性を保ち、全体のカルーセルがぼやけて見えないようにします。使用のコツ：イエローは細い線でなくブロックで使い、画面でのちらつきを防ぎましょう。

media.ioを使って生成されたスカイバイオレットシトラスのイメージ例

13) トワイライト・ハイドランジア

HEX： #1a133a #3b2f7a #5c55d6 #b1a9ff #efeaff

雰囲気：やさしい、花柄、ノスタルジック

おすすめ用途：春のボタニカルイラストセット

やさしく花のような印象で、アジサイの花が宵闇に溶けていく情景を思わせます。花びらにはソフトライラックやペリウィンクルのトーン、茎や影、インクの輪郭には深いインディゴを使いましょう。明るいバイオレットブルーは注目の花や小さな飾りに最適。使用のコツ：塗りは半透明で、重くならず空気感を保ちましょう。

media.ioを使って生成されたトワイライト・ハイドランジアのイメージ例

14) ブルーベリーミルクシェイク

HEX： #fff7ff #e7dcff #b7a6ff #6a5cff #3a2a7a

雰囲気：スイート、ソフト、フレンドリー

おすすめ用途：キッズ教育アプリのブランディング

甘く親しみやすく、ブルーベリーミルクシェイクのようなクリーミーな仕上がり。淡いトーンは背景や円いカードに、鮮やかなバイオレットブルーはキャラクターやバッジ、インタラクションに使いましょう。濃いパープルブルーはアイコンを目立たせつつ強すぎない印象に。使用のコツ：タイポグラフィは一番濃い色で、最も明るい色は報酬など特別な要素に使いましょう。

media.ioを使って生成されたブルーベリーミルクシェイクのイメージ例

15) オーバージン・シーフォーム

HEX： #140b21 #3a1a5a #4d3cff #7fe7d6 #f4fff9

雰囲気：意外性、新鮮、コンテンポラリー

おすすめ用途：クリエイティブエージェンシーのウェブサイト刷新

意外性と新鮮さは、オーバージンの深みとシーフォームの軽やかさの組み合わせです。この配色はシーフォームをホバーやリンク、小さなイラストのハイライトとして使うのがベスト。深いパープルブラックは印象的なタイポグラフィやレイアウトのフレームに。使用のコツ：ライトな背景ではシーフォームのテキストを十分に試し、コントラストが低い場合はアウトラインに切り替えてください。

media.ioを使って生成されたオーバージン・シーフォームのイメージ例

16) ベルベットダスクゴールド

HEX： #0d0b1c #2a2358 #5b4cff #a99bd6 #d6b14a

雰囲気：贅沢、ムーディー、祝祭感

おすすめ用途：プレミアムキャンドル用パッケージデザイン

贅沢でムーディーな雰囲気は、夕暮れのベルベットに温かみのあるゴールドがきらめくようです。ラベルのメインカラーにバイオレットブルーを使い、ゴールドは箔や細い飾りで現れます。ソフトモーブはセカンダリー情報を穏やかでエレガントにまとめます。使用のコツ：ゴールドは小さくハイインパクトな要素に限定し、派手になりすぎずプレミアム感を出しましょう。

media.ioを使って生成されたベルベットダスクゴールドのイメージ例

17) ウルトラバイオレット・コーラルスパーク

HEX： #1a0f2e #3620a6 #5f55ff #ff6b6b #fff0f0

雰囲気：大胆、若々しい、明るい気分

おすすめ用途：商品ローンチ告知メールヘッダー

大胆で明るい雰囲気、ウルトラバイオレットの輝きとコーラルの勢いが感じられます。バイオレットブルーはメインのヘッダーブロックやナビのアクセントに、コーラルは特典とカウントダウンなどの強調用に使いましょう。ソフトなブラッシュの背景がメッセージを親しみやすくまとめます。使用のコツ：コーラルはデザイン内で唯一の暖色アクセントとし、注目を集中させましょう。

media.ioを使って生成されたウルトラバイオレット・コーラルスパークのイメージ例

18) ネビュラグラデーションフェード

HEX： #0b0a22 #24106e #4f3adf #7a6cff #d9d1ff

雰囲気：雰囲気的、現代的、没入感

おすすめ用途：アプリのスプラッシュスクリーンとグラデーション

雰囲気的で没入感があるこの配色は、漆黒の宇宙からやわらかな光へと漂う星雲を思わせます。インディゴからバイオレットブルーのグラデーションを作り、淡いライラックへとフェードさせてプレミアムな輝きを演出。アイコンはシンプルに、最も濃い色はステータスバーに使用してください。使用のコツ：中央ロゴを囲むように控えめなビネットを加え、フラットなグラデーションバンドを避けましょう。

media.ioを使って生成されたネビュラグラデーションフェードのイメージ例

19) クラシック・バイオレットブルー・スタジオ

HEX： #10122a #2c2e78 #4b52d9 #9aa3ff #f5f6ff

雰囲気：自信、バランス、多用途

おすすめ用途：ブランドガイドラインの表紙とスライド

自信に満ち、バランスの取れた空気は、どこも意図的に設計された明るいスタジオを思わせます。このようなバイオレットブルーのパレットは、デッキにも多用できます。タイトルにはディープネイビー、チャートに中間のバイオレットブルー、セクション区切りに薄いトーン。明るいペリウィンクルがページを重たく見せません。使用のコツ：各色に役割を割り当て、すべて統一感あるシステムを作りましょう。

media.ioを使って生成されたクラシックバイオレットブルースタジオのイメージ例

20) バイオレットブルーとセージカーム

HEX： #f2f3ff #a9b0ff #5b4cff #6b8f7a #1f2b3a

雰囲気：穏やか、ナチュラル、落ち着き

おすすめ用途：エコプロダクトのラベルデザイン

穏やかで落ち着いた印象は、クールなバイオレットブルーと静かなボタニカルセージの融合です。セージはサブパネルや成分表示、アイコンに、バイオレットブルーはブランドマークや主張したい箇所に使ってください。ダークブルーグレーによりラベルが自然でなじみやすく、ブラックの強さを抑えます。使用のコツ：淡いトーンが印刷で飛ばないよう、非コート紙でプリントテストを行いましょう。

media.ioを使って生成されたバイオレットブルーとセージカームのイメージ例

21) クリスタルライラックナイト

HEX： #0f0b24 #2a1b5a #4633b9 #a39bff #ffffff

雰囲気：シャープ、きらめき、モダン

おすすめ用途：テック基調講演スライドテーマ

シャープできらめく雰囲気は、暗い部屋を貫くクリスタルの光のよう。ディープベースはスライド全面背景に、大きな数字やチャートは明るいバイオレットブルーで。ホワイトがメッセージをはっきり伝え、淡いライラックがサブチャートやフッターの情報の視認性を保ちます。使用のコツ：ダーク背景では線の太さを太くし、プロジェクターで細部が消えないようにしましょう。

media.ioを使って生成されたクリスタルライラックナイトのイメージ例

22) フロステッドバイオレットグリッド

HEX： #f7f8ff #d7dcff #9aa3ff #5a4bff #2a2f6e

雰囲気：整理、シャープ、現代的

おすすめ用途：EC製品グリッドUI

整理されシャープな雰囲気は、フロストガラス越しの美しいグリッドを思わせます。最も明るいトーンはページ背景とカードに、バイオレットブルーは価格強調や主要なアクションに。ディープインディゴはフィルターや固定ヘッダー、集中的なステートにベストです。使用のコツ：ボーダーは控えめにし、スペーシングやトーンのグラデーションの変化で商品カードを区切りましょう。

media.ioを使って生成されたフロステッドバイオレットグリッドのイメージ例

バイオレットブルーと相性が良い色は？

シルバーやスレート、オフホワイトなどのクールなニュートラルを組み合わせると、バイオレットブルーがよりシャープで「テック感」を強めます。特にUIではコントラストや階層が重要です。

ゴールドやクレイ、クリーム、柔らかなブラッシュなど暖色のアクセントは、バイオレットブルーの冷たさを和らげ、パッケージ・インテリア・エディトリアルレイアウトなどにプレミアムでヒューマンな魅力をもたらします。

強いコントラストが欲しいときは、シアンやコーラル、マゼンタなど高彩度の差し色を適度に使いましょう。ただし、バイオレットブルーがブランドの軸であることを守ります。

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

各色調には役割を割り当てます。: 見出し・ナビには深いベース、主要アクションには中間のバイオレットブルー、背景やスペースには淡いトーン。この組み立てで画面の可読性と一貫性が保たれます。

印刷やブランディングでは、強いブラックの代わりにディープインディゴを使い、バイオレットブルーはロゴ・罫線・アイコン等の「記名」要素に。洗練された印象を保ちながら視認性も損ないません。

グラデーションを使用する場合は、微細なざらつきを加え、複数のディスプレイで書き出しをテストしてバンディングを防ぎ、バイオレットブルーが滑らかに保たれているか確認しましょう。

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

ポスター、UI画面、パッケージ、ムードボードなど、実際のレイアウトでこれらのバイオレットブルーの配色を見たいですか？簡単なプロンプトから素早くモックアップを生成し、数分で試作できます。

キーワード（例：「クリーンなベクターUI」「スタジオショット」「印刷用ポスター」など）を統一し、選んだHEXの雰囲気を加えて、ビジュアルが意図したスタイルに合うようにしましょう。

気に入った方向性が見つかったら、同じプロンプト構成を維持し、パレットのアクセントだけを変えて統一感のあるシリーズを作成しましょう。

次へ： ミディアムブルーカラーパレット