ブルー・グリーン・パープル配色アイデア20選＆HEXコード

青、緑、紫は、穏やかさとエネルギーのユニークなバランスを生み出します。これは、信頼感、新鮮さ、そして少し意外性を求めるモダンブランドに最適です。

下記は、厳選された青・緑・紫の配色組み合わせとHEXコード、さらにUI、ブランディング、印刷、SNSデザインにおける実践的なペアリングのヒントです。

なぜ青・緑・紫のパレットはこれほど効果的なのか

青は明快さと信頼感を、緑は新鮮さとバランスを、紫は想像力と高級感を伝えます。これらを組み合わせることで、「信頼性」と「表現力」の両方をカバーできるため、SaaS、フィンテック、ウェルネス、クリエイティブなキャンペーンで人気です。

この3色は、ライトモードとダークモードの両方で優れたパフォーマンスを発揮します。濃いネイビーやインディゴがしっかりとした構成を生み、ティールやバイオレットがまとまりのあるアクセントを加えます。

色相が十分に近くてグラデーションに適し、かつUIの状態を分けるほどには異なるため、青・緑・紫のカラースキームは余計な色を使わずに階層性を構築できます。

20種類以上の青・緑・紫カラーパレットアイデア（HEXコード付き）

1) オーロララグーン

HEX： #0B3D91 #0FB9B1 #6C5CE7 #B8F2E6 #1B1F3B

雰囲気： 明るい、穏やか、モダン

最適用途： SaaSダッシュボードUI

北極光が静かな水面に映るような、明るく穏やかな印象。深いネイビーがレイアウトの軸となり、ティールとバイオレットがうるさくならず動きを演出します。ミント色は広めのパネルに、最も明るいアクセントはプライマリーボタンやハイライトに使いましょう。クールグレーと幾何学系サンセリフ体を合わせると、モダンでプロダクト主導の見た目を保てます。

media.ioで生成したオーロララグーンの画像例

Media.io

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

今すぐ無料で試す

2) プラムタイドプール

HEX： #1D4ED8 #14B8A6 #7C3AED #F1F5F9 #0F172A

雰囲気： クリア、プロフェッショナル、エネルギッシュ

最適用途： ブランドアイデンティティシステム

澄み切ったプロフェッショナルさ、まるで海の光が磨かれた石に当たるよう。コバルトとティールは自信を感じさせ、プラムはロゴやキーマークに個性的なアクセントを加えます。オフホワイトはメイン背景に、ほぼ黒はタイポグラフィやアウトラインに使用。ミニマルなアイコンセットと力強いディスプレイフォント一つでシャープな印象が保てます。

media.ioで生成したプラムタイドプールの画像例

3) トワイライトハイビスカス

HEX： #12355B #1BB3A3 #8E2DE2 #F7EDE2 #0B132B

雰囲気： ロマンチック、ムーディー、鮮やか

最適用途： イベントポスターのデザイン

夕暮れ後、ハイビスカスの花びらが輝くようなロマンチックでムーディーなカラーパレット。クリーム色で余白を演出すると特に効果的。ティールは補助的な要素に、バイオレットは見出しや主役部分に使いましょう。繊細なグレインと太字フォントを組み合わせ、読みやすさのためネイビーは小さいテキストに限定しましょう。

media.ioで生成したトワイライトハイビスカスの画像例

4) グレイシャーアメジスト

HEX： #2F6FED #3DD6D0 #B388FF #EAF2FF #25314F

雰囲気： フレッシュ、エアリー、楽観的

最適用途： モバイルアプリのオンボーディング画面

清涼感があり、まるで明るい空の下の氷河水のような印象。淡いラベンダーとアイスブルーが親しみやすい背景に、深いブルーがCTAに強いコントラストをもたらします。ティールは進捗やマイクロインタラクションカラーに使うのがおすすめ。角丸UIパーツとゆとりのある配置で歓迎感ある初回体験が生まれます。

media.ioで生成したグレイシャーアメジストの画像例

5) レインフォレストバイオレット

HEX： #064E3B #0EA5A4 #6D28D9 #A7F3D0 #1E1B4B

雰囲気： アーシー、大胆、冒険的

最適用途： アウトドア製品のパッケージ

大地の力強さと希少な花のひときわ鮮やかな色。深いグリーンとミッドナイトインディゴはワイルドな雰囲気、バイオレットは店頭で映える上質感を加えます。ミントは通気感あるラベル背景、ティールはバッジや機能性の強調アクセントに。マットなテクスチャとシンプルなラインアイコンを組み合わせると、視覚ノイズを抑えられます。

media.ioで生成したレインフォレストバイオレットの画像例

6) エレクトリックケルプ

HEX： #0057FF #00C2A8 #A855F7 #0B1026 #E2E8F0

雰囲気： ハイコントラスト、テクノ感、パンチが効いている

最適用途： ゲーム配信のストリームオーバーレイ

深海を切り裂くネオンライトのような、高コントラストでテクノロジー感のある組み合わせ。濃いインク色を主なキャンバスにすることで、存在感が際立ちます。電気的なブルーはアラートに、ティールはサブラベル、バイオレットは勝利やマイルストーンなどの特別シーンに。シャープな形状と控えめなグロー効果を組み合わせ、明るい色は同一モジュール内で使いすぎないのがコツです。

media.ioで生成したエレクトリックケルプの画像例

7) ソフトシーラベンダー

HEX： #2B50AA #5BD3C7 #C3B1E1 #FFF7ED #334155

雰囲気： やさしい、居心地が良い、親しみやすい

最適用途： ウェルネス系ブログテーマ

ラベンダーの霧と海の泡が溶け合うような、やさしく心地よい雰囲気。ピーチ系のオフホワイトで温かみをプラスし、ペリウィンクルやティールがリンクやタグ、セクションヘッダーに穏やかなリズムを与えます。スレートは本文やアクセシビリティ重視のコントラストに活用。柔らかいイラストアクセントを添えて、グラデを避けると穏やかなトーンを維持できます。

media.ioで生成したソフトシーラベンダーの画像例

8) コズミックガーデン

HEX： #101935 #2EC4B6 #7B2CBF #F0EBD8 #3A86FF

雰囲気： 神秘的、クリエイティブ、遊び心がある

最適用途： アルバムカバーデザイン

星明かりが夜の庭に降り注ぐような神秘的、そしてクリエイティブな配色。クリーミーなニュートラル色を背景にすると、宝石のような色味が強調されすぎず映えます。ティールは有機的な形に、バイオレットはタイトルやアイコンなどフォーカルパーツに。グレイン質感や抽象的な植物要素と組み合わせると、モダンで夢のある仕上がりに。

media.ioで生成したコズミックガーデンの画像例

9) デニムアイリス

HEX： #1E40AF #10B981 #9333EA #E5E7EB #111827

雰囲気： 自信、バランス、モダン

最適用途： 企業向けスライドデッキ

自信とバランスがあり、濃いデニムにアイリスカラーがアクセントのよう。グレーをスライドの背景として使えばグラフが読みやすくなり、ブルーとグリーンを主要なデータ系列に適用できます。バイオレットは重要な指標やセクション区切りのスポットライトカラーとして最適です。クリーンなインフォグラフィックと組み合わせ、見出しには限りなく黒に近い色を使用して、ぼやけた印象を避けましょう。

media.ioで生成したデニムアイリスの画像例

10) メトロ・ナイトシェード

HEX： #0F172A #2563EB #14B8A6 #A78BFA #F8FAFC

雰囲気： 洗練、都会的、上品

最適用途： フィンテック系ランディングページ

洗練され都会的で、濡れた舗道に浮かぶネオンサインのよう。インキーベースを活かし、ホワイトで余白を作れば、ブルー・グリーン・パープルの配色はプレミアムな印象に。ブルーは主なアクション用、ティールは信頼のサポート、ラベンダーは特長のハイライトに。細いラインアイコンや適度な余白と組み合わせて高級感をキープ。

media.ioで生成したメトロ・ナイトシェードの画像例

11) オーキッド・カレント

HEX： #012A4A #0B5FFF #00A8A8 #7209B7 #E0FBFC

雰囲気： 大胆、光沢、表現力豊か

最適用途： ビューティー製品広告

オーキッドの花びらが青い光を反射しているような、大胆で光沢のある雰囲気。鮮やかなメインカラーがエディトリアル感を演出し、淡いアクアがレイアウトの重さを抑えます。ティールは訴求ポイントや成分表示のサポートに、バイオレットは限定版やシグネチャーのようなプレミアム感の演出に使い分け。大きなタイポグラフィと主役の商品写真一枚で高級感を演出。

media.ioで生成したオーキッド・カレントの画像例

12) ティールベリー・パンチ

HEX： #0061A8 #00BFA6 #8A2BE2 #FFE66D #1A1A2E

雰囲気： 楽しい、若々しい、明るい

最適用途： サマーフェスティバルフライヤー

きらめくソーダにベリーを合わせたような、楽しくて活気のある雰囲気。明るいイエローで一気に元気になり、ティールとバイオレットでフライヤーをレトロではなくモダンに仕上げます。深いミッドナイトカラーはテキストブロックやスポンサー一覧で明快さを。遊び心ある形と厳格なタイポグラフィの階層で、明るいアクセントが詳細を圧倒しないように。

media.ioで生成したティールベリー・パンチの画像例

13) ミスティ・ネビュラ

HEX： #2C3E50 #2EC4B6 #B8B8FF #F6F7FB #5A189A

雰囲気： 柔らかい、夢のよう、思慮深い

最適用途： ブックカバーデザイン

遠い星雲に漂う霧のように柔らかな幻想感。ほぼ白の背景がラベンダーの軽やかさを引き立て、濃いパープルはタイトルに最適。ティールは小さなモチーフやシリーズ表示に使うことで主役から注意を奪いません。最小限のイラストと高コントラストにして書店のサムネイルでも読みやすく。

media.ioで生成したミスティ・ネビュラの画像例

14) ロイヤル・ラグーン

HEX： #003566 #00B4D8 #6F2DBD #CAF0F8 #03045E

雰囲気： 高貴、クリーン、インパクト大

最適用途： スポーツチームブランディング

スタジアムの照明下の優勝バナーのような高貴でインパクトある雰囲気。このブルー・グリーン・パープル配色は、ユニフォームやワードマークに深いロイヤルブルーを使うことで際立ちます。シアンはエネルギッシュな縁取り、バイオレットはグッズやSNS用グラフィックのアクセントに。太いコンデンスタイプと薄いティントでデジタルレイアウトに余白を。

media.ioで生成したロイヤル・ラグーンの画像例

15) ウルトラバイオレット・アクアリウム

HEX： #082F49 #0891B2 #7C3AED #D1FAE5 #0A0F1F

雰囲気： 深い、アクアティック、未来的

最適用途： 音楽ビジュアライザーUI

ウルトラバイオレットのライトで照らされた水槽のように深く未来的。暗いベースはアニメーションを鮮やかにし、ミント系ハイライトカラーでUIの重さを防げます。ティールは波形要素、バイオレットはビートマーカーやアクティブ状態に。滑らかなグラデーションと高コントラストのニュートラルで文字の視認性を確保。

media.ioで生成したウルトラバイオレット・アクアリウムの画像例

16) ハーバー・ライラック

HEX： #1B4965 #5FA8D3 #62B6CB #CA7DF9 #F3F4F6

雰囲気： コースタル、軽やか、親しみやすい

最適用途： トラベルニュースレターデザイン

明るい港の朝に地平線のライラックの霞がかかるような、コースタルで親しみやすい印象。明るいブルーで写真や見出し用のクリーンなセクションを作り、パープルのアクセントでブランド性を高めます。ティールはリンクや小さいUIマーク用、背景は極力軽やかでニュートラルに。大きめのマージンとシンプルな区切り線で読みやすいレイアウトを実現。

media.ioで生成したハーバー・ライラックの画像例

17) オーロラ・スプリント

HEX： #3A86FF #06D6A0 #8338EC #F1FAEE #1D3557

雰囲気： スポーティー、明るい、モチベート

最適用途： フィットネスアプリUI

明るく、スポーティーでやる気を引き出してくれる、明け方の空の下のランニングのよう。フレッシュなグリーンは進捗や成功のイメージを即座に伝え、バイオレットはバッジや達成マイルストーンに個性をプラスします。オフホワイトは多数の指標がある画面用、ネイビーはテキストやタブバーに。丸みのあるグラフやアイコンで素早く一目で状況を把握。

media.ioで生成したオーロラ・スプリントの画像例

18) ディープシー・オーキッド

HEX： #001D3D #0077B6 #00A896 #9D4EDD #E9D8FD

雰囲気： ラグジュアリー、落ち着き、夜間

最適用途： スパウェブサイト ヒーローセクション

深みがありつつも穏やかな、深海に浮かぶオーキッドの光のよう。ネイビーとオーシャンブルーで即座に安らぎの雰囲気、ラベンダーでやさしい空気感に。ティールはリンクや信頼感の控えめなアクセントに、ライトライラックは文字の背後のオーバーレイ用。エレガントなセリフ見出しとソフトなグラデーションでプレミアムなスパの印象に。

media.ioで生成したディープシー・オーキッドの画像例

19) ヴェイパーウェーブ・ラグーン

HEX： #2D00F7 #00F5D4 #B517FF #FEEAFA #0B1320

雰囲気： レトロフューチャー、大胆、遊び心

最適用途： SNSプロモバナー

レトロフューチャーで遊び心たっぷり、真夜中のゲームセンターで輝くネオンサインのよう。ネオンティールとパープルは強烈な印象を与えるため、どこにでも多用せず、柔らかなピンクのハイライト上で際立たせましょう。濃いブルーブラックはテキストやロゴでメッセージを見やすく。大胆な幾何学パターンと短いコピーで高い注目度を。

media.ioで生成したヴェイパーウェーブ・ラグーンの画像例

20) スタジオ・スペクトラム

HEX： #114B9A #1AA6B7 #7C4DFF #F2F2F2 #22223B

雰囲気： クリーン、クリエイティブ、多用途

最適用途： エディトリアルマガジン見開き

クリーンかつクリエイティブで、スタジオでカラージェルと真新しい紙を使用したような印象。ブルー・グリーン・パープルの配色は、階層が重要なエディトリアルレイアウトで特に活躍します。オフホワイトは読みやすさ用、ティールはサイドバーや強調用、バイオレットは特集ページの見出しに。一ページに一つのアクセントルールと強いグリッド構成で視覚的な雑音を防止。

media.ioで生成したスタジオ・スペクトラムの画像例

21) セージ・エクリプス

HEX： #1B3A57 #2A9D8F #6A4C93 #E9ECEF #0B0F1A

雰囲気： ムーディー、落ち着き、エレガント

最適用途： 建築家ポートフォリオウェブサイト

落ち着きのあるムードで、穏やかな石とガラスの上に浮かぶ日食のよう。クールグレーの背景でプロジェクトを広々と見せ、ティールとバイオレットは洗練されたセクションアクセントに。最も濃い色はナビやキャプションに使い、写真とコントラストを保つ。広い余白と控えめなアニメーションで洗練されたポートフォリオを演出。

media.ioで生成したセージ・エクリプスの画像例

22) プリズム・ヘイズ

HEX： #00509D #34D399 #C084FC #FFF1F2 #1F2937

雰囲気： 明るい、軽やか、楽観的

最適用途： 水彩ボタニカルイラスト

やわらかなプリズムを通る日差しのような明るく軽やかさ。ピンクがかったホワイトが暖かみを与え、グリーンとバイオレットでフローラルを現代的に。深いチャコールは茎やラベル、輪郭など小さなディテールだけに使うのがポイント。やさしい色のにじみと、彩度のやや不均一さで本物の水彩感に。

media.ioで生成したプリズム・ヘイズの画像例

青・緑・紫と相性の良い色は？

クリーンでモダンなバランスのためには、ブルー・グリーン・パープル系のトーンと、ホワイト・オフホワイト・ライトグレー・チャコールといったクールなニュートラルカラーを組み合わせましょう。これらはコントラストを保ちつつ、ティールやバイオレットを「主役」として際立たせてくれます。

より温かいコントラストが欲しい場合は、ソフトベージュ、クリーム、ブラッシュ、淡いサンドなどのウォームニュートラルを試してみてください。これらは「氷のような」印象を和らげ、ライフスタイルブランドにも使いやすくなります。

さらに強いアクセントを加えたい時は、明るいアクセント（レモンイエロー、コーラル、ホットピンクなど）を一色だけ使うのがおすすめです。アクセントを限定することで、特にUIシステムでパレットが混乱するのを防げます。

青・緑・紫パレットをリアルなデザインで使うには

役割から始めます：構造にはダークベース（ネイビー／インク）、主要アクションにはミッドブルー、セカンダリーステートにはティール、バッジや価格強調、主な特徴などのハイライトにはパープルを選びます。これにより、画面全体で予測可能な階層が生まれます。

印刷物やブランドアイデンティティでは、ひとつの色相（多くの場合青）を主役にし、ティールを“フレッシュ”なサポート色、パープルをシグネチャーとして使用します。すべての色を同時に使えなくても、ロゴやレイアウトの識別性が保たれます。

グラデーションでは、ブルー→ティールは穏やかな動き、ティール→バイオレットはよりエネルギッシュな印象を与えます。背景は控えめにし、鮮やかなグラデーションはヒーローエリアやポスター、SNSプロモーション用にとっておきましょう。

AIで青・緑・紫パレットのビジュアルを作成

すでにHEXコードをお持ちの場合は、レイアウト（ポスター、アプリ画面、パッケージ）や雰囲気（落ち着き、光沢感、未来感）を伝えることで、ブランドらしいモックアップを素早く作成できます。これにより、実際の構成の中で色の感じ方を検証しやすくなります（スウォッチだけでなく）。

Media.ioのテキストから画像へのワークフローを使うと、異なるアスペクト比の試行、ニュートラルな背景への切り替え、ティール／パープルの彩度調整によるアクセシビリティやマーケティング目的のコントラスト向上が素早く行えます。

パレット名をスタイルの基準（整合性のため）として使い、明確なテーマ（ダッシュボード、チラシ、商品広告など）を追加するとAIがデザイン内容を的確に把握できます。

次に進む： ブロンズカラーパレット