青・緑・赤のカラーパレットは、瞬時にコントラストを生み出す最も簡単な方法のひとつです。青は信頼感を、緑は「進む」のサインを、赤は注意を引くフォーカルポイントをもたらします。
カギは階層構造です。青と緑をシステムカラーとして使い、赤はアクセントにとどめれば、デザインはエネルギッシュでありながらも雑然としません。
なぜ青・緑・赤のパレットは効果的なのか
青と緑はカラーホイール上で近いため一体感があり、赤は高い視認性のアクセントとなります。このバランスが、安定感とワクワク感の両方を与えます。
実践では、青は「構造」色（ナビゲーション、ヘッダー、大きなパネル）として、緑は「状態」色（成功、アクティブ状態、確認）として使われます。赤は緊急性や警告、または目立つCTAボタンとしてすぐに認識されます。
このパレットは自然に強いコントラストを持つため、UI、ポスター、パッケージ、ダッシュボードなど、明確な階層と素早い判読が必要なあらゆる場面に最適です。
20種類以上の青・緑・赤カラーパレットアイデア（HEXコード付き）
1) コースタルシグナル
HEX： #0B3C5D #1FA9A6 #E63946 #F4F1DE #2B2D42
ムード： クリスプ、海洋的、自信に満ちた
おすすめ用途： 旅行ブランドのランディングページヒーローUI
クリアな海の港旗のようなエネルギッシュな雰囲気が漂います。ネイビーとティールをメインキャンバスにし、赤で明確なアクションを示します。クリームの色味でテキストエリアに余白を持たせ、チャコールは本文やアイコンをサポート。使用ポイント: 赤は各セクションで主なボタン1つだけに使い、階層を保ってください。
media.ioで作成したコースタルシグナルの画像例
Media.ioは、ブラウザ上で動画、画像、音声を作成・編集できるオンラインAIスタジオです。
2) レトロレガッタ
HEX： #2D6CDF #34C759 #FF3B30 #FFF4E6 #1C1C1E
ムード： レトロ、スポーティ、陽気
おすすめ用途： サマーイベントのポスターデザイン
陽気でレトロスポーツな雰囲気は、ヨットの番号やホイッスルの音、日差しの中の水面を思わせます。明るい青と緑がメインで形を作り、赤で見出しや日付ブロックを目立たせましょう。アイボリー調の背景で親しみやすく、ほぼ黒色で小さな文字やスポンサー行を引き締めます。使用ポイント: 太くジオメトリックな文字を使い、遠目からでも瞬時にパレットを認識できるようにしましょう。
media.ioで作成したレトロレガッタの画像例
3) フォレストカーニバル
HEX： #145A32 #1E88E5 #C62828 #F1F8E9 #4E342E
ムード： アーシー、遊び心、本の世界観
おすすめ用途： SNS投稿用ボタニカルイラストセット
森の中に隠れたお祭りのような、物語性ある遊び心。深い緑と空色が葉や影を表現し、赤で可愛いベリーや小さなフォーカルポイントを追加。ミント色でページを軽やかにし、ブラウンのアウトラインで手描きの温かみを加えます。使用ポイント: 赤はアイキャッチとして少しだけ使い、カルーセル全体をガイドするビジュアルパンくずに。
media.ioで作成したフォレストカーニバルの画像例
4) シティトランジット
HEX： #003B73 #00A676 #D7263D #F7F7FF #2E294E
ムード： アーバン、効率的、ハイコントラスト
おすすめ用途： 道案内サイネージシステムのコンセプト
都会的な効率性は、清潔な駅タイルやシャープな矢印、明快なプラットフォーム番号となって現れます。この青・緑・赤の配色は、青を主情報色、緑を確認用、赤を警告用に絞ると最も効果的。オフホワイトでサインの視認性を保ち、インディゴがサブパネルに奥行きを与えます。使用ポイント: インディゴカラーでアイコン線幅を統一し、システム全体の一貫性を出しましょう。
media.ioで作成したシティトランジットの画像例
5) ガーデンキオスク
HEX： #2F6690 #3A7D44 #D1495B #E9ECEF #1B1B1E
ムード： 新鮮、親しみやすい、ローカルマーケット
おすすめ用途： ファーマーズマーケットのベンダーロゴとラベル
ローカル市場の魅力は、チョークボードのメニューや店頭のハーブの束のような雰囲気。ロゴベースに青、ナチュラルなグリーン、苺やトマトのような季節のアクセントにダスティレッドを。ライトグレーでラベルを明確に保ち、黒はビンやバッグに小さな文字でも視認性を確保。使用ポイント: コストと一貫性のために、赤はステッカーの1か所だけにスポット的に使用。
media.ioで作成したガーデンキオスクの画像例
6) アルパインピクニック
HEX： #1B4965 #5FAF4E #E84855 #F0EBD8 #3D3D3D
ムード： アウトドア、心地よい、前向き
おすすめ用途： キャンプ用品のプロダクト広告
アウトドアの前向きさは、湖畔のピクニックブランケットのような安らぎを演出します。ベースには青とベージュで静かさを、緑でエコ感やトレイルのディテールを加え、暖かい赤は価格バッジや限定タグに最適。使用ポイント: 背景はベージュにし、赤は一点だけに留め、ビジュアルノイズを避けます。
media.ioで作成したアルパインピクニックの画像例
7) ネオンハーバー
HEX： #0A84FF #00D084 #FF2D55 #0B0B0F #F2F2F7
ムード： ナイトライフ、ネオン、テク系
おすすめ用途： 音楽アプリのプレイリストUI画面
ナイトクラブのネオンサインが水面に映るようなポップさ。メインはほぼ黒のベースに、エレクトリックブルーやネオングリーンでアクティブ要素や進捗を演出。ホットレッドは、いいね・通知・ライブバッジなどのマイクロアクセントに最適。使用ポイント: 大きな文字エリアはライトグレーでソフトに保ち、鮮やかな色の見やすさとパンチ力を両立。
media.ioで作成したネオンハーバーの画像例
8) ヴィンテージアトラス
HEX： #1D3557 #2A9D8F #E76F51 #F4A261 #FAF9F6
ムード： ヘリテージ、暖かい、探検的
おすすめ用途： 雑誌誌面のエディトリアルレイアウト
伝統の温かみは、使い込まれた地図やスタンプされたルート、余白に記された旅行メモのよう。濃い青で強調見出し、ティールでセクションラベル、赤みオレンジで引用やロケーションピンをハイライト。サンディトーンで大きなブロックを柔らかく包み、誌面を親しみやすくまとめます。使用ポイント: セリフ体の見出しフォントと細めのアクセントシェイプを組み合わせれば、エディトリアル感が損なわれません。
media.ioで作成したヴィンテージアトラスの画像例
9) ミニマルバッジ
HEX： #114B5F #1A936F #D00000 #F3E9D2 #2D2A32
ムード： ミニマル、プレミアム、集中
おすすめ用途：コーヒーバッグパッケージラベル
ミニマルでプレミアムな印象は、テクスチャ紙にワックスシール一つだけのよう。ラベルの主要部分にはティールブルー、控えめなアイコンにはミントグリーン、焙煎度など目立つバッジには赤を使う。温かみのあるタン色の背景はクラフト感を演出し、ダークチャコールが細部を際立たせる。使用のコツ：赤いバッジの周りには余裕のあるマージンを取り、意図的で雑音にならないレイアウトに。
media.ioで生成したミニマルバッジの画像例
10）フェスティバルポスター
HEX： #005F73 #0A9396 #AE2012 #E9D8A6 #001219
ムード：大胆、アート、日焼け風
おすすめ用途：ストリートフェスティバルフライヤーデザイン
大胆なアートのエネルギーは、ペイントバナーや熱い午後の陽射しの中で鳴り響く音楽のよう。ブルーとティールが大きな形を作り、煉瓦赤が日付やチケット情報に緊迫感を与える。砂色のイエローがテクスチャや背景ブロックを支えるが、コントラストは失わない。使用のコツ：スポンサーやQRコードの読みやすさのため、暗い色をフッターに一本だけ使う。
media.ioで生成したフェスティバルポスターの画像例
11）ティーハウス モダン
HEX： #15616D #2EC4B6 #E71D36 #FFDDD2 #0B1320
ムード：モダン、穏やか、ブティック
おすすめ用途：カフェメニューとテーブルテントセット
モダンな静けさは、スチームガラス、清潔なセラミック、開店時の静かなカウンターのよう。見出しにはディープブルー、セクション分割にはティール、サインとなるアイテムには赤を1つか2つ。ブラッシュ色がメニューを柔らかく迎え入れ、ほぼ黒が細字をシャープに保つ。使用のコツ：赤の使い方は小さなドットや価格ポインターだけにして、ブティック感を保つ。
media.ioで生成したティーハウス モダンの画像例
12）ウィンターマーケット
HEX： #1C77C3 #39A275 #E5383B #F8F9FA #343A40
ムード：クリーン、祝祭、構造的
おすすめ用途：ホリデー用メールニュースレターテンプレート
クリーンで祝祭的な構造は、新雪に電飾が輝くような印象。ヘッダーやリンクにはブルー、ポジティブな呼びかけにはグリーン、ギフトや限定バナーなどには赤。ほぼ白の背景がメールを軽やかにし、ダークグレーが長文の読みやすさを支える。使用のコツ：主要CTAはグリーン、赤は緊急ラベル用などに限定し、クリック誘導が自然になるように。
media.ioで生成したウィンターマーケットの画像例
13）スタジオ プライマリー
HEX： #1E3A8A #16A34A #DC2626 #F5F5F4 #0F172A
ムード：クラシック、スタジオクリーン、プロフェッショナル
おすすめ用途：ブランドスタイルガイド表紙
クラシックなスタジオクリーンな自信は、鮮明な紙、シャープなグリッド、よく照らされたモックアップのよう。ブルーベースとグリーンのサポートトーンでプロ感を強化し、赤はセクションタブや重要ルールにぴったり。オフホワイトがページを呼吸させ、ディープスレートがタイポグラフィーにプレミアム感を加える。使用のコツ：赤は見出しや分割線のみにして、ガイドが規律的で読みやすく。
media.ioで生成したスタジオ プライマリーの画像例
14）コーラルリーフルート
HEX： #00509D #00A896 #D90368 #F0F3BD #1B263B
ムード：トロピカル、鮮やか、エネルギッシュ
おすすめ用途：水着商品パッケージ
トロピカルな鮮やかさは、サンゴ礁の色が澄んだ水中で煌めくよう。ブルーとアクアがパッケージのベースを支配し、ピンクレッドで大胆なパターンやロゴスタンプを演出。淡いライム背景は明るい雰囲気を保ちながらネオンに寄せすぎない。使用のコツ：アクセントはシンプルなサンセリフ字体と合わせ、余計な色を避けることで売場でのインパクトを強く。
media.ioで生成したコーラルリーフルートの画像例
15）アルチザンラベル
HEX： #2B50AA #3EB489 #C1121F #FDF0D5 #780000
ムード：クラフト、豊か、懐かしい
おすすめ用途：ホットソースボトルラベル
クラフトの豊かさは、小ロットのキッチンや手押し紙のような雰囲気。ブランドブロックには強いブルー、新鮮さの演出にはミント、辛さやアイコンバッジにはディープレッド。クリームが読みやすく、ダークマルーンが熟成されたプレミアム感を加える。使用のコツ：メインの赤は一箇所で、細かなペッパーアイコンで繰り返して一体感を。
media.ioで生成したアルチザンラベルの画像例
16）キッズミュージアム
HEX： #3A86FF #06D6A0 #EF476F #FFFCF9 #073B4C
ムード：遊び心、明るい、歓迎的
おすすめ用途：子供ワークショップ登録ランディングページUI
遊び心のある明るさは、体験型展示やカラフルな学習ステーションのよう。構造やナビにはブルー、進捗状態にはグリーン、バッジやイベントタグなどのハイライトにはピンクレッド。オフホワイトでインターフェースを軽やかに、ディープティールは見出しの読みやすさを保つ。使用のコツ：UIコンポーネントは角丸にして、色が積極的でなく、親しみやすくなるよう。
media.ioで生成したキッズミュージアムの画像例
17）スポーツバナー
HEX： #004E98 #3C9D23 #D00000 #F8F1F1 #22223B
ムード：競争的、大胆、高エネルギー
おすすめ用途：チーム発表用ソーシャルバナー
競争的なエネルギーは、スタジアムの照明やラストミニットの逆転劇のよう。青は基調バンドに、緑は動きのアクセント、赤は名前やスコアなどヘッドラインに最適。淡い背景はSNSでのシェアしやすさを確保し、ダークインディゴは文字の鮮明さを保つ。使用のコツ：選手名の裏に赤を配置し、スクロール時にメッセージが瞬時に伝わるよう。
media.ioで生成したスポーツバナーの画像例
18）データダッシュボード
HEX： #2563EB #10B981 #F43F5E #F9FAFB #111827
ムード：モダン、分析的、鮮明
おすすめ用途：SaaS分析ダッシュボードUI
モダンで分析的な明快さは、整然としたチャート、鮮明なラベル、冷静な決断を思わせる。このブルー・グリーン・レッドの配色では、ブルーを主要シリーズ、グリーンを成功指標、赤は異常のみと位置付ける。ライト背景はデータの読みやすさを支え、ディープスレートは密なナビゲーションを補強。使用のコツ：チャートエリアの赤ポイントは5%未満にして、アラートが意味のあるものになるよう。
media.ioで生成したデータダッシュボードの画像例
19）ホリデースプリグ
HEX： #0B4F6C #2ECC71 #E74C3C #FDF6E3 #34495E
ムード：明るく、季節感、居心地の良い
おすすめ用途：ホリデー招待カード
明るく季節感のある居心地は、常緑の枝が温かみあるクリームカードに乗ったようなイメージ。メインテキストや枠にはディープブルー、葉のイラストにはグリーン、ベリーや小さなRSVPスタンプには赤を。スレート色が補助的な詳細を安定させ、きつ過ぎない雰囲気に。使用のコツ：イラストは赤か緑のどちらかをメインにしもう一方は補助アクセントとしてバランス重視。
media.ioで生成したホリデースプリグの画像例
20）ストリートミューラル
HEX： #22356F #00B06B #F94144 #F6F7EB #2B2D42
ムード：大胆、クリエイティブ、現代的
おすすめ用途：ギャラリーオープニングポスター
大胆で現代的なクリエイティブ感は、新鮮なペイント、大きな形、自信あるタイポリズムのよう。ブルーとグリーンが大判ブロックを構成し、鮮烈な赤が見出しを最大限に強調。ブルー・グリーン・レッドの組合せ探索に適した現代的な配色は、背景をオフホワイト、シャドウをダークで保つと現代的に。使用のコツ：グラデーションは控え目にし、ソリッドカラー重視で大判印刷でもクリーンに。
media.ioで生成したストリートミューラルの画像例
21）クリニック カーム
HEX： #1B5EAA #2BB673 #E23D3D #F5F7FA #243B53
ムード：穏やか、信頼感、クリニカルなクリーンさ
おすすめ用途：ヘルスケア予約UI
穏やかで信頼できるトーンは、明るい待合室やストレス軽減のクリアな案内板を思わせる。ナビゲーションや見出しにはブルー、予約確定と空き状態にはグリーン、バリデーションなど重要なメッセージだけに赤を用いる。ソフトなグレー白背景が全体の読みやすさを支え、ディープブルーグレーがフォームラベルやアイコンを補完。使用のコツ：エラー状態は赤を小さなアイコンや平易な言葉とペアにして、大きなブロックではなく控えめに。
media.ioで生成したクリニックカームの画像例
22）マーケットメトリクス
HEX： #0F62FE #24A148 #FA4D56 #EDF5FF #161616
ムード：シャープ、データ重視、コーポレート
おすすめ用途：金融レポートインフォグラフィック
シャープなコーポレートの明快さは、クリーンな資料と決断感のあるチャートの印象。ブルーは主要バーとタイトル担当、グリーンは成長の表現、赤は負の変化やリスク警告用のみ。淡いブルー背景は洗練感を足し、ほぼ黒が注釈の判読性を確保。使用のコツ：チャート凡例は標準化し、色の意味がページをまたいで一貫性を持つように。
media.ioで生成したマーケットメトリクスの画像例
青・緑・赤と相性のよい色は？
ニュートラルカラー（オフホワイト、温かいクリーム、クールなライトグレー、チャコール）を使うことで、この配色はコントロールしやすくなり、意図的かつ読みやすい印象に。UI設計ならまず明るい背景色と暗いテキスト色を決め、三色をその上に重ねると良い。
深みが欲しいときは、ティール（ブルーとグリーンの間）やコーラル（レッドとオレンジの間）など“橋”になる色を足すのがおすすめ。こうした補助色で、グラデーションやイラスト、大判ポスターの形で移り変わりがスムーズに。
メタリックもよく合う。テック感ならシルバー、プレミアムなパッケージなら控えめなゴールドを使っても、コアなブルー/グリーン/レッド対比と競合せず自然に。
青・緑・赤カラーパレットを実際のデザインでどう使うか
配色はパーセンテージではなく役割から始めるのがコツ。一般的な割合は60–30–10：ブルーをベース、グリーンをサポートカラー、赤はCTAやアラート、重要ラベルなどアクセントとして最小。
色の衝突を避けるため、三色の彩度を揃え、赤の使用箇所は必要最小限に。セクションごとにメインボタン一つ、警告スタイル一つ、ポスターのヘッドラインブロック一つといった配置が最適。
アクセシビリティのために、テキストやアイコンのコントラストを確認しましょう。赤と緑の組み合わせは色覚異常のあるユーザーにとって紛らわしい場合があるため、意味を補強するためにアイコンやパターン、ラベルを一緒に使用しましょう。
AIで青・緑・赤パレットのビジュアルを作成
ブランドガイドに本格的に使用する前にパレットを確認したい場合、ランディングページやポスター、パッケージラベル、アプリ画面などの簡単なモックアップを作成しましょう。階層構造をすばやくテストし、赤をどこに使うべきか（または使うべきでないか）を発見するのに有効です。
Media.io のテキストから画像生成ツールを使えば、プロンプトを貼り付け、アスペクト比を指定して、レイアウトスタイル（フラット／リアル／エディトリアル／大胆な幾何学的スタイルなど）を繰り返し調整しながら、ブルー・グリーン・レッドの方向性を維持できます。
ブルー・グリーン・レッドカラーパレット よくある質問
-
ブルー・グリーン・レッドのカラーパレットは何を伝える？
信頼感や構造（ブルー）、新鮮さや進歩（グリーン）、緊急性や強調（レッド）を組み合わせます。この組み合わせにより、UI やポスター、ブランドシステムに最適な強い階層構造が生まれます。 -
ブルー、グリーン、レッドの衝突を防ぐには？
メインカラー（多くはブルー）を決め、グリーンはサポート的なUIステートやセカンダリーブロックに、レッドは重要なアクセントに限定しましょう。オフホワイトやチャコールなどの中立色を使うことで全体のバランスが取れます。 -
ブルー・グリーン・レッドパレットの最適な背景色は？
クリーム色、オフホワイト、淡いグレーなどの明るい中立色が読みやすさや印刷の点で最も安全です。ダークモードもOKですが、その場合、黒に近い背景と柔らかい明るめのテキストを使うと鮮やかな色が目にやさしく保たれます。 -
レッドとグリーンの組み合わせはアクセシビリティの問題になりますか？
色覚に違いがある一部のユーザーには問題となる場合があります。レッドとグリーンだけに依存せず、アイコン、ラベル、パターン、位置の手がかりなどを追加し、テキストや重要なUI要素のコントラスト比を確認しましょう。 -
ブルー・グリーン・レッド配色でレッドはどのくらい使えばいいですか？
通常は5〜10%程度で最も少なく使います。レッドは主要なアクションや注目見出し、エラー表示など、「シグナルカラー」として使うと意味づけが強まります。 -
ブルー・グリーン・レッドパレットはどの業界でよく使われますか？
テックやSaaSのダッシュボード、医療・予約UI、金融レポート、スポーツプロモーション、イベントポスターなどでよく使われます。この3色は明確さや素早い認識、強い注目のコントロールに役立ちます。 -
「原色っぽく」見えないようにこのパレットをブランディングで使えますか？
はい。ややくすんだり深みのある色（ネイビー、ティール、ブリックレッド）を選び、温かみのあるニュートラル色を加え、タイポグラフィを洗練させましょう。これでパレットはベーシックさではなく、モダンで上質な印象に仕上がります。
次へ： レイクカラーパレット
