インディゴブルーはネイビーとパープルの間に位置し、デザインに権威と想像力という希少な組み合わせをもたらします。組み合わせるアクセント次第で企業的、映画的、落ち着いた、あるいはエレクトリックな印象も演出できます。
以下はHEXコード付きのインディゴブルーカラーパレット20選と、実際の活用アドバイス、Media.ioで再利用できるAIプロンプトの紹介です。
なぜインディゴブルーパレットは効果的なのか
インディゴブルーは自然とコントラストが高く、暗さでレイアウトを安定させ階層を作る一方で、微妙なパープルのニュアンスがあり基本のネイビーよりも上質感が漂います。
また、さまざまな媒体で非常に柔軟です。UIでは、インディゴは読みやすい白文字やクリーンなデータ可視化をサポートし、印刷物ならリッチなインクのようで、暖かい用紙色と美しく調和します。
さらに重要なのは、インディゴは寒色・暖色の両方と相性が良いこと。ミント、シアン、コーラル、ゴールド、ブラッシュ、アイボリーなどで、ブランドカラーを変えずに雰囲気を穏やかにも大胆にも演出できます。
20+ インディゴブルーカラーパレット案(HEXコード付き)
1) ミッドナイトアイリス

HEX: #1B1A3A #2E2B5F #4A3E8C #B7B0E6 #F3F1FF
雰囲気: 神秘的、ラグジュアリー、落ち着き
おすすめ用途: SaaSダッシュボードUI
ミステリアスでベルベットのような印象は、真夜中の空に映る都市の光を連想させます。深いインディゴをベースに、やわらかいラベンダーとほぼ白の色味でカードやテーブルの読みやすさを高めます。さりげないシャドウや角丸パーツで、ゴシック調ではなく現代的に仕上げましょう。ポイント:もっとも明るい色は重要なCTAやアクティブ状態用に使い、インターフェースの集中力を維持します。
media.ioで生成したミッドナイトアイリスの画像例
Media.ioは、ブラウザ上で動画・画像・音声を作成・編集できるオンラインAIスタジオです。
2) コースタルインク

HEX: #12233F #243B77 #2F7EA8 #CBEAF2 #F7FBFF
雰囲気: 爽やか、モダン、軽快
おすすめ用途: トラベルブランドのランディングページ
フレッシュで風を感じる海のようなインクブルーと澄んだ朝の空気を思わせます。重さを感じさせずに奥行きを出したいときに効果的、特にペールアクアで空間を広く見せられます。ティールとシンプルなラインアイコン、最も暗い色はヘッダーやナビに。ポイント:一番明るい色をセクション区切りに使い、穏やかなスクロールリズムをキープ。
media.ioで生成したコースタルインクの画像例
3) ベルベットナイトフォール

HEX: #140D2B #2A1E4F #4E2D6A #D2A6C9 #F8EEF6
雰囲気: 劇的、ロマンチック、上品
おすすめ用途: 高級フレグランスのパッケージ
演出力のあるロマンチックなパレットは、ベルベットのカーテンと薄暗いラウンジのような趣です。ほぼ黒のインディゴがラグジュアリーなコントラストを生み出し、モーブやブラッシュが美容製品向けのやわらかさを添えます。メタリックな箔押し(シルバーまたはローズゴールド)や最小限のタイポグラフィでハイエンドな演出に。ポイント:サイドパネルにはブラッシュを使ってスタジオライティングで立体感をプラス。
media.ioで生成したベルベットナイトフォールの画像例
4) インディゴ&アイボリー

HEX: #1F255C #3442A8 #8EA0FF #F2EBDD #FFFFFF
雰囲気: クリーン、クラシック、自信
おすすめ用途: 企業ブランディングキット
清潔感と自信を感じさせ、エグゼクティブのデスク上のステーショナリーのようです。インディゴは権威を、アイボリーやホワイトはレイアウトを開放的で親しみやすい印象にします。見出しは太字1種類に絞り、広いマージンでグローバルで洗練されたイメージに。ポイント:ペリウィンクルはチャートやハイライトの差し色に抑えて、ビジュアルノイズを防ぎます。
media.ioで生成したインディゴ&アイボリーの画像例
5) エレクトリックオーキッド

HEX: #1A1B4B #3A2BCB #A12CFF #FF57C8 #FFF0FA
雰囲気: ボールド、エネルギッシュ、未来的
おすすめ用途: 音楽フェスティバルのポスター
ビビッドでエレクトリックな印象、ネオンサインや夜の低音を思わせます。深いインディゴが明るい色を抑え、パープルやマゼンタが視界にポップに映ります。幾何学模様や高コントラストタイポグラフィと組み合わせて、遠くからでも瞬時に印象を与えます。ポイント:ライトピンクはスケジュールや細かい説明の余白に使いましょう。
media.ioで生成したエレクトリックオーキッドの画像例
6) デニムダスク

HEX: #202A44 #2E4A7F #7B93B7 #C9D2DC #F6F7F9
雰囲気: カジュアル、信頼感、リラックス
おすすめ用途: アプリのオンボーディング画面
見慣れたジーンズや柔らかな夕暮れ空を思わせ、リラックス感のある親しみやすいパレットです。ミッドインディゴ・スレートブルーは信頼を、淡いグレーはオンボード画面を明るく読みやすくします。角丸イラストやシンプルな進捗でストレスを減らしましょう。ポイント:ミディアムブルーはメインボタン用、最も暗い色はヘッダー専用に。
media.ioで生成したデニムダスクの画像例
7) ルーナーラベンダー

HEX: #23214E #3B3A87 #7F7BD1 #D9D7F6 #F9F9FF
雰囲気: 夢見心地、ソフト、穏やか
おすすめ用途: ウェルネスジャーナル表紙
夢のように穏やかなこのパレットは、淡いラベンダーの花びらに月明かりが差し込むような印象です。やわらかさと構造を両立させたいウェルネス・セルフケア系デザインに最適。細身のセリフ見出しや、インディゴからライラックへの繊細なグラデーションと合わせましょう。ポイント:最も濃い色はタイトルや背表紙など少量に控え、重々しい印象を避けましょう。
media.ioで生成したルーナーラベンダーの画像例
8) サファイアスモーク

HEX: #0E1B2D #1D3557 #3A6EA5 #9FBAD3 #E9F0F6
雰囲気: クール、プロフェッショナル、落ち着き
おすすめ用途: フィンテックの分析UI
クールで落ち着いた印象はサファイアガラスや霞む煙のよう。濃紺~インディゴでデータに信頼感を、くすみブルーでチャートの読みやすさと落ち着きが出ます。繊細なグリッドやクリアな数字表記、控えめアイコンでまとめましょう。ポイント:一番明るい青グレーはカード背景用で、データを主役にします。
media.ioで生成したサファイアスモークの画像例
9) ストーミープラム

HEX: #1A1633 #33224D #5A3A7A #B49ACB #EFE7F3
雰囲気: ムーディー、アーティスティック、洗練
おすすめ用途: 雑誌のエディトリアル紙面
ムーディーで洗練された印象は、プラム色に染まる嵐雲のよう。深いインディゴやナス色は見出しに映え、淡いライラックは長文を読みやすくします。モノクロ写真や厳格なグリッドでエディトリアル感を高めましょう。ポイント:本文はダーク系で、プラム色はプルクオートや見出しのみに限定。
media.io を使用して生成されたストーミープラムの画像例
10) アールデコ インディゴ

HEX: #14163A #27307A #D7B35C #F3E7C8 #FFFFFF
雰囲気: グラマラス、ヴィンテージ、ハイコントラスト
おすすめ用途: イベント招待カード
グラマラスでヴィンテージ感があり、アールデコのホールと暖かいシャンパンの光を感じさせます。インディゴとアンティークゴールドの組み合わせで華やかな印象になり、クリーム色がレイアウトをエレガントに保ちます。幾何学的なボーダーやコンデンス書体を合わせると時代感ある雰囲気に。ポイント:ゴールド要素は細く、アクセントとして使い、テクスチャ紙にきれいに印刷されるようにしましょう。
media.io を使用して生成されたアールデコインディゴの画像例
11) 禅スレート

HEX: #1C2233 #2C3756 #5C6E8A #CBD3DD #F5F7FA
雰囲気: ミニマル、落ち着き、静寂
おすすめ用途: 建築事務所ウェブサイト
静かで落ち着きがあり、スレートストーンやスチール、クリーンな昼光を連想させます。インディゴ寄りの濃色はナビゲーションやケーススタディに信頼感を与え、柔らかなグレーでポートフォリオをシャープに保ちます。大きな写真、細いライン、余白を多く取り工芸感を際立たせてください。ポイント:ホバーステートには中間のスレート色を使い、控えめなインタラクションを。
media.io を使用して生成された禅スレートの画像例
12) ベリーオブザバトリー

HEX: #1B1441 #2B2E8F #7C2A8F #E04677 #FFE6EE
雰囲気: 遊び心、宇宙的、表現力豊か
おすすめ用途: ストリーミングチャンネルブランディング
遊び心と宇宙観を感じさせ、夜の天文台でベリー色の信号が輝いているような印象。インディゴ、バイオレット、ラズベリーのコントラストで、サムネイルやバッジが目立ちます。太めサンセリフ書体と、シンプルなスターや軌道モチーフで即座に認識されます。ポイント:バナーなどテキストが多いエリアの背景にブラッシュカラーを使えば、視認性が高まります。
media.io を使用して生成されたベリーオブザバトリーの画像例
13) インディゴサンライズ

HEX: #1A2057 #3845C6 #FF8A5B #FFD3A6 #FFF6EE
雰囲気: 楽観的、温かみ、ハイコントラスト
おすすめ用途: スタートアップピッチデックスライド
楽観的で力強く、深いインディゴの地平線からサンライズの暖かさが広がるような雰囲気。このインディゴブルー配色は、自信のあるストーリーテリングや印象的なアクセントが必要なスライドに適しています。コーラルはシンプルなグラフやハイライトコールアウトに使用し、背景はクリーム色で可読性を保ってください。ポイント:コーラルは1スライドにつき1要素に制限し、際立たせます。
media.io を使用して生成されたインディゴサンライズの画像例
14) ミュージアム クワイエット

HEX: #121A2B #2A3153 #6D7396 #D7D5CF #FAF8F2
雰囲気: タイムレス、控えめ、キュレート
おすすめ用途: 写真家用ポートフォリオサイト
タイムレスで厳選された雰囲気、美術館のギャラリーのような印象。インディゴのダークトーンでナビゲーションに洗練されたエッジを持たせ、ウォームグレーで画像を自然な色味に保ちます。最小限のUIクロームと写 真そのものを主役に。ポイント:背景はウォームなオフホワイトにすることで純白のまぶしさを回避します。
media.io を使用して生成されたミュージアムクワイエットの画像例
15) ネオン ブループリント

HEX: #0B1028 #1E2A78 #2DE2E6 #B7F7F8 #F4FEFF
雰囲気: テック、シャープ、フューチャリスティック
おすすめ用途: デベロッパーカンファレンスフライヤー
テックでシャープな印象、ネオンシアンで照らされた設計図のラインを思わせます。インディゴブルーの組み合わせは、ダークな基調とハイエナジーなアクセントが欲しいイベント素材に最適です。等幅フォントやグリッド、明確な階層でスケジュールやスピーカーを表現。ポイント:シアンは日付や会場など主要情報だけに使い、見やすさを保ちましょう。
media.io を使用して生成されたネオンブループリントの画像例
16) ウィンターハーバー

HEX: #0F1A30 #233B6E #5F7FB2 #C9D8EA #F6FAFF
雰囲気: クール、安定、広がり
おすすめ用途: 海運・物流ウェブサイト
クールで安定感があり、冬の港で静かな水面やスチールのクレーンを連想させます。重なり合うブルーがオペレーションやトラッキングページに信頼感をもたらし、ペールトーンでフォームも視認性良好。分かりやすいアイコンセットと十分なホワイトスペースで実用的で落ち着いた印象に。ポイント:中間ブルーはステータスタグに使うと迅速な視認が可能です。
media.io を使用して生成されたウィンターハーバーの画像例
17) インディゴクレイ

HEX: #1C1D3B #3A3C78 #C07B5A #E7C7B7 #FBF2EE
雰囲気: アーシー、クリエイティブ、ハンドメイド
おすすめ用途: 陶器ショップ商品広告
アーシーで手作り感があり、ワークベンチにインディゴ染めと温かな陶土が並ぶような雰囲気。クラフト感と洗練さのバランスが取れたインディゴ配色は、小ロット商品のストーリーテリングに最適です。自然なテクスチャー、柔らかな影と暖茶系ニュートラルでテラコッタのアクセントを引き立てましょう。ポイント:粘土色はプライスタグやコールアウトにだけ使い、目立ちすぎず自然に視線を誘導。
media.io を使用して生成されたインディゴクレイの画像例
18) ロイヤルステーショナリー

HEX: #151A4A #2A2F8A #5F6FE6 #D9DDFB #FFFFFF
雰囲気: フォーマル、洗練、明るい
おすすめ用途: 結婚式招待状セット
フォーマルで洗練された印象、明るい紙に伝統的なインク+王室的な華やかさ。インディゴでクラシックな雰囲気を、明るいペリウィンクルでモダンな柔らかさをプラス。繊細なボーダーやスクリプト、十分なホワイトスペースで清潔な仕上がりに。ポイント:セクション区切りは中間ブルーを使い、全体の統一感を演出してください。
media.io を使用して生成されたロイヤルステーショナリーの画像例
19) コズミックネイビー

HEX: #070A1E #141B4D #3F4ACB #9AA6FF #F0F2FF
雰囲気: シネマティック、大胆、スリーク
おすすめ用途: ゲーミングアプリUI
シネマティックでスリーク、深宇宙にシャープなブルーハイライト。限りなく黒に近いネイビーがメニューに集中をもたらし、明るいインディゴが動きとエネルギー感を追加。光るボタンやさりげないグラデーション、ハイコントラストなタイポグラフィで即座に読みやすいUIに。ポイント:ライトラベンダーはツールチップやマイクロコピー用としてダーク画面の眩しさを抑えましょう。
media.io を使用して生成されたコズミックネイビーの画像例
20) インディゴガーデン

HEX: #1B1E4B #3A3FA3 #4DAA7A #BFE7D1 #F3FFF8
雰囲気: 瑞々しい、ボタニカル、バランス
おすすめ用途: 水彩ボタニカルイラスト
瑞々しくボタニカルな印象、雨上がりの新緑とインディゴの花びらを思わせます。グリーンはベースではなく控えめなアクセントとして使うことで、インディゴの配色がより生き生きと見えます。ソフトなテクスチャや十分な余白と合わせることでイラストが軽やかに仕上がります。ポイント:一番深いインディゴは輪郭や影用に使い、グリーンの輝きを際立たせましょう。
media.io を使用して生成されたインディゴガーデンの画像例
インディゴブルーに合う色は?
インディゴブルーは、白やアイボリー、クールグレーなどのクリーンなニュートラルととてもよく合います。それらはレイアウトの呼吸感を保ちつつ、インディゴに見出し、ナビゲーション、ヒーローセクションの構造を持たせます。
アクセントには、ウォームコントラスト(コーラル、テラコッタ、アンティークゴールド、ブラッシュ)か、クールなエナジー(ミント、シアン、アクア)を選びましょう。ウォームは親しみやすく編集的な雰囲気に、クールはテック&モダンな印象に。
トーナルな配色にしたいなら、ライラックやペリウィンクル、バイオレットでブルー〜パープルのパレットを作りましょう。これで全体の調和を保ちつつ、ボタンやグラフ、ハイライトの差別化も可能です。
インディゴブルーカラーパレットを実際のデザインで使う方法
まずインディゴを「基軸色」として使い、トップナビゲーションやヒーロー見出し、ダークセクションに。背景やカードには淡い色(ホワイトに近い、淡いラベンダーやブルーグレー)を組み合わせ、テキストの可読性を確保します。
高彩度のアクセントは1つの用途に制限しましょう。例:CTAのみコーラル、成功のみミント、区切り線や有料バッジのみゴールド。その方がインディゴが濁らず、パレットが騒がしくなるのを防げます。
印刷では、ピュアブラックを避けるとインディゴの深みが最も美しくなります。本文用にはかなり深いインディゴを使い、バーコードや極小テキストなど最大コントラストが必要な時だけ真の黒を使いましょう。
AIでインディゴブルーパレットビジュアルを作成
既にHEXコードを持っていれば、レイアウト(ダッシュボード、ポスター、パッケージ)や優先したい色を明確に指定すると、リアルなデザインモックアップがすぐ作れます。
一貫した結果がほしければ、プロンプトを具体的かつ明確に:「dominant colors(主要カラー)」でベースインディゴ、「accents(アクセント)」で差し色、さらに「no device frame」や「plain background」などクリーンアウトプット用条件を追加しましょう。
複数バリエーションを生成し、一番良かった画像スタイルを以後のブランドアセットのテンプレートに活用しましょう。これは特にSNS投稿やランディングページ、ピッチデック等に便利です。
インディゴブルーカラーパレット よくある質問
-
インディゴブルーはネイビーとパープルどちらが近いですか?
インディゴブルーはネイビーとパープルの中間くらいです。ネイビーに比べ青紫がかっており、パープルよりは「青インク」寄りで落ち着きがあるため、プロフェッショナル/クリエイティブ両ブランドに向いています。 -
インディゴブルーに合う良いアクセント色は?
コーラル、テラコッタ、アンティークゴールドなどのウォームアクセントはインディゴブルーによく映え、親しみやすさもプラスできます。モダンでテックな印象を目指すなら、シアンやミントがクリーンでハイエナジーな対比色になります。 -
ウェブサイトの背景色にインディゴブルーは使えますか?
はい、ダークヘッダーやヒーローセクション、フルダークモードUIに最適です。テキストエリアにはオフホワイトや非常に明るいブルーグレーを、ビビッドなアクセントはCTAやアクティブな状態だけに絞り、可読性を保ってください。 -
インディゴブルーパレットに合うニュートラルは?
アイボリー、ウォームオフホワイト、柔らかいクールグレーが最も汎用性あります。深いインディゴの重さを軽減し、意図的なスペーシングを実現できます。特にエディトリアルやブランディングに最適です。 -
インディゴブルー配色を重く見せないコツは?
深いインディゴには、最低2色の明るいトーン(ほぼホワイトな背景、中間色:ペリウィンクル、スレートブルー、ライラックなど)を合わせましょう。濃い色は主にナビゲーションや見出し、アウトラインに用い、広い面積には使いません。 -
インディゴブルーブランディングはどんな業種で使われますか?
インディゴブルーは、信頼感を与えつつ、現代的で高級感のある印象を保てるため、SaaS、フィンテック、ゲーム、ラグジュアリービューティー、コーポレートアイデンティティシステムで人気です。 -
一貫した色味のインディゴブルーパレット画像をどのように生成できますか?
プロンプトには、HEXコードを「ドミナント」「アクセント」とラベル付けして一覧化し、さらにデザインタイプ(UI、パッケージ、ポスター)と制約事項(無地背景、手なし、デバイス枠なし)を指定してください。これによって、出力ごとの色の忠実度と再現性が向上します。

