グリーン、ブルー、イエローは現代デザインにおいて最も多用途なトライアドのひとつです。彩度やコントラスト次第で、海辺の爽やかさ、スポーティーな力強さ、テック感のある清潔さを感じさせます。
以下では、HEXコード付きですぐに使える20以上のグリーン・ブルー・イエローカラーパレットと、ブランド、UI、ポスター、パッケージの実用的な組み合わせヒントを紹介します。
この記事で解説する内容
グリーン・ブルー・イエローパレットがなぜ相性抜群なのか
グリーンとブルーは自然に安定感や明快さを伝え、イエローは瞬時にエネルギーを加えます。組み合わせることで、信頼感と楽観的なムードのバランスが生まれます。
使いやすさの観点からも、この3色は階層構造を組みやすいです：ブルーは主要UI、グリーンは成功やエコの印象強化、イエローは最初に注目させたいアクションやディテールのハイライトに最適です。
この組み合わせはスタイルを問わず対応できます。落ち着いたトーンならモダンで上質、鮮やかなトーンならポスターやパッケージ、SNSキャンペーンにぴったりの遊び心とインパクトを演出できます。
20以上のグリーン・ブルー・イエローカラーパレット案（HEXコード付き）
1）ラグーンシトラス
HEX： #0b6e4f #0b84f3 #ffd23f #e9f5ff #0f172a
雰囲気： フレッシュ、明るい、海岸的
おすすめ用途： 旅行ランディングページUI
透明な水面に差し込む日差しのようなフレッシュなラグーンブルーとジューシーなイエロー。明快さと楽観性が大切な旅行やホスピタリティUIに理想的のパレットです。白の余白と深いインク色を組み合わせてコントラストを強調しましょう。使用ポイント：イエローは主要CTAに限定すると即座に認識されます。
media.ioで生成したラグーンシトラスの画像例
Media.ioはブラウザ上で動画・画像・音声を制作編集できるオンラインAIスタジオです。
2）サンリットサーフ
HEX： #005f73 #1d4ed8 #fbbf24 #94d2bd #f8fafc
雰囲気： 明るく、爽やか、スポーティ
おすすめ用途： 夏イベントポスター
爽やかなサーフブルーに温かいサンバーストアクセントで瞬時に夏のエネルギーを感じさせます。大胆な見出しや日付ブロック、シンプルなアイコンがポスターで際立ちます。オフホワイト基調にするとグリーンとブルーが爽やかさを保ちます。使用ポイント：深いブルーの見出しと、イエローは印象に残したい詳細だけに使いましょう。
media.ioで生成したサンリットサーフの画像例
3）レインフォレストポップ
HEX： #14532d #0ea5e9 #fde047 #22c55e #111827
雰囲気： 力強い、遊び心、エネルギッシュ
おすすめ用途： ストリートウェア商品広告
濃いレインフォレストグリーンに鮮やかな空色とパンチが効いたイエローで、生き生きと都会的な印象。高コントラストや素早い視認性が欲しいストリートウェア広告におすすめです。文字はほぼブラック、ブルーはサブブロックやタグに活用。使用ポイント：背景はダークにしてイエローが映えてもネオンぽさが出にくく。
media.ioで生成したレインフォレストポップの画像例
4）ノルディックマリーナ
HEX： #134e4a #1e3a8a #facc15 #cbd5e1 #0b1320
雰囲気： クール、クリーン、現代的
おすすめ用途： SaaSダッシュボードUI
クールなマリーナトーンは現代の港のようにシャープで自信を感じさせます。視覚的なノイズなしに階層を構築したいSaaSダッシュボードにおすすめ。パネルはソフトなスレートグレーと組み合わせ、イエローはアラートやアクティブ状態のハイライトだけに。使用ポイント：イエロー占有率は10%未満に抑えると高級感を保てます。
media.ioで生成したノルディックマリーナの画像例
5）ガーデンカイト
HEX： #2f855a #2563eb #f59e0b #ecfccb #1f2937
雰囲気： 陽気、アウトドア感、親しみやすい
おすすめ用途： 子ども向けフェスチラシ
陽気なガーデングリーンと明るい空色は公園に浮かぶ凧のよう。子ども向けチラシのシンプルな形やマスコット、太文字にぴったり。淡いリーフ調の背景で広い面を柔らかく。使用ポイント：主要テキストはダークチャコールでアウトラインにして明るいブロック上でも読みやすくしましょう。
media.ioで生成したガーデンカイトの画像例
6）アクアリウムメドウ
HEX： #0f766e #38bdf8 #fde68a #a7f3d0 #f1f5f9
雰囲気： ソフト、穏やか、楽観的
おすすめ用途： ウェルネスブランドパッケージ
穏やかな水色にマイルドなイエローを合わせて、落ち着きや清潔感、親しみやすさを演出します。心地よい信頼感を求めるウェルネスパッケージに最適。白やライトミント色と組み合わせてラベルやパターンを広く。使用ポイント：ブランドマークにはブルー、イエローは小さな認証印などの差し色に。
media.ioで生成したアクアリウムメドウの画像例
7）レトロプライマリープレイ
HEX： #16a34a #2563eb #fcd34d #fff7ed #1e293b
雰囲気： ノスタルジック、鮮烈、楽しい
おすすめ用途： ブランドアイデンティティムードボード
クリーミーなベースにノスタルジックな原色が、ヴィンテージの玩具や大胆なプリントグラフィックを連想させます。遊び心と認識のしやすさを狙うブランドにぴったり。温かみのあるオフホワイトと組み合わせると調和が取れます。使用ポイント：まず平面的に色を配置し、レトロ感を出すテクスチャは控えめに。
media.ioで生成したレトロプライマリープレイの画像例
8）コースタルマーケット
HEX： #065f46 #0ea5e9 #fbbf24 #fef3c7 #082f49
雰囲気： 温かみ、歓迎、職人感
おすすめ用途： ファーマーズマーケットポスター
温かな海沿いのグリーンとブルー、はちみつ色のイエローは海辺の新鮮な野菜市を思わせます。看板の親しみやすさと道案内の分かりやすさを両立。バタークリーム調の背景や深いネイビーの本文と組み合わせて。使用ポイント：イラストは2色でまとめ、イエローは価格タグの差し色に。
media.ioで生成したコースタルマーケットの画像例
9）ミンティモザイク
HEX： #10b981 #1e40af #fde047 #dbeafe #0f172a
雰囲気： シャープ、幾何学的、現代的
おすすめ用途： アプリのオンボーディング画面
クリスプなミントと深いブルーに明るいイエローのアクセントが加わることで、現代的で整然とした印象になります。これらのトーンは、明確なステップと親しみやすいサポートが必要なオンボーディングに最適です。淡いブルーの背景と組み合わせることで、各セクションの間に落ち着いた空間が生まれます。使用のコツ：ステップごとにミントとブルーで色分けし、イエローは最後の成功状態のみに使用しましょう。
media.io で生成されたミンティーモザイクの画像例
10）スクールヤード・ブライト
HEX： #15803d #3b82f6 #facc15 #ffffff #1f2937
雰囲気： クリア、明るい、教育的
おすすめ用途： 教室ワークシートテンプレート
明るいスクールヤードの色合いは、クリアで親しみやすく、スキャンしやすい印象です。ワークシートや教室教材で使えば、整理されつつも煩雑になりません。白色とダークニュートラルを指示や解答欄に多用すると良いです。使用のコツ：イエローは見出しや目立たせたい場所だけに使い、生徒が素早くセクションを見つけやすくしましょう。
media.io で生成されたスクールヤード・ブライトの画像例
11）トロピカル・アトラス
HEX： #166534 #0284c7 #f59e0b #86efac #0c4a6e
雰囲気： 冒険的、晴れやか、活気ある
おすすめ用途： 旅行雑誌スプレッド
冒険心をくすぐるトロピカルグリーンにオーシャンブルーとマンゴーイエローが加わり、アイランドホッピングの地図のような雰囲気になります。フォトが主役のエディトリアルなレイアウトに、ほどよいアクセントとして最適です。控えめなタイポグラフィと合わせ、ブルーで引用やセクションタイトルを際立たせるのがポイント。使用のコツ：小さなナビマークはグリーンにし、画像と重なっても読みやすさを確保しましょう。
media.io で生成されたトロピカル・アトラスの画像例
12）アーバン・トランジット
HEX： #0f766e #1d4ed8 #fcd34d #e5e7eb #111827
雰囲気： 自信、実用的、都市的
おすすめ用途： 案内サインシステム
自信のある都会的な色調は、清潔な交通マップや信頼できるナビゲーションのような印象を与えます。グリーン・ブルー・イエローのカラーパレットは、遠くからでもしっかりとしたコントラストで道案内に最適です。背景パネルにはクールグレーを使い、文字や矢印にはほぼブラックを使うのがポイント。使用法としては、路線ごとに色を決め、警告やサービスアップデートにイエローを割り当てましょう。
media.io で生成されたアーバン・トランジットの画像例
13）リーフィー・ラグーン
HEX： #2e7d32 #0ea5e9 #fde68a #f0fdf4 #0b3a53
雰囲気： ナチュラル、明るい、リフレッシュ感
おすすめ用途： 環境NPOニュースレター
自然なリーフグリーンにエアリーなブルーと柔らかなイエローが加わり、希望とコミュニティ意識が感じられます。各セクションをフレンドリーかつ読みやすくつなげたいニュースレターに最適です。背景にはごく淡いグリーン、見出しには深いブルーがおすすめ。使用のコツ：グラフは2色に絞り、イエローは重要な数字のハイライトとしてだけ使いましょう。
media.io で生成されたリーフィー・ラグーンの画像例
14）サマー・レガッタ
HEX： #047857 #2563eb #fbbf24 #e0f2fe #0f172a
雰囲気： スポーティー、さわやか、競争的
おすすめ用途： スポーツクラブブランディング
さわやかなレガッタカラーは、スポーティーで自信に満ちた印象で、明るい空を背景に帆がなびく様子を思わせます。クラブのブランドアイデンティティを強調したいウェアやSNS、バナーに最適。背景には淡いスカイカラーを使い、もっとも濃いトーンは文字に使いましょう。使用のコツ：イエローは小さなバッジやストライプにだけ使い、エネルギー感を生みつつ目立ちすぎないように。
media.io で生成されたサマー・レガッタの画像例
15）ピクニック・パターン
HEX： #16a34a #0284c7 #fcd34d #fff7ed #334155
雰囲気： ほっこり、親しみやすい、手作り感
おすすめ用途： パッケージラベルデザイン
暖かなクリームベースと明るいアクセントで、くつろぎのピクニックムードが表現されます。グリーン・ブルー・イエローのコンビは、パターンや文字をはっきり見せたいラベルに最適です。オフホワイトのソフトな背景と合わせ、アウトラインはスレート色で優しさを出します。使用のコツ：ブルーは商品名、グリーンは補足情報に使い、イエローは小さな品質シールのみに抑えましょう。
media.io で生成されたピクニック・パターンの画像例
16）エコテック・ダッシュボード
HEX： #0f9d58 #1e3a8a #f2c94c #d1fae5 #0b1220
雰囲気： スマート、サステナブル、プロフェッショナル
おすすめ用途： エネルギーモニタリングUI
スマートなエコテックトーンは効率的かつ信頼感があり、クリーンなエネルギーデータの可視化に最適です。ダッシュボードモニタリングで、異なる指標や状態・アラートを識別しやすくします。背景パネルには淡いミント、文字や軸には濃い色を合わせましょう。使用のコツ：イエローはアラートやしきい値の色として統一し、注意を引きましょう。
media.io で生成されたエコテック・ダッシュボードの画像例
17）ミュージアム・モダン
HEX： #115e59 #1e40af #eab308 #f3f4f6 #111827
雰囲気： 洗練、キュレーション、現代的
おすすめ用途： 展覧会招待カード
宝石のような洗練トーンにゴールデンイエローを添えて、現代美術館のポスターウォールのような雰囲気です。グリーン・ブルー・イエロー配色は、タイポグラフィ主導でカラーがサポート役となる招待状にぴったり。グレーの柔らかい紙色と十分な余白で上質感を出しましょう。使用のコツ：イエロー要素はエンボス加工やスポットカラーで仕上げ、リッチなフォーカルポイントに。
media.io で生成されたミュージアム・モダンの画像例
18）スプリング・ボタニック・ウォッシュ
HEX： #22c55e #38bdf8 #fde047 #dcfce7 #14532d
雰囲気： 軽やか、花柄、楽観的
おすすめ用途： ボタニカル水彩イラスト
軽やかなボタニカルウォッシュは、新緑・広い空・優しい朝日に包まれた印象です。春のイラストやグリーティングカード、やわらかな背景アートにおすすめ。ページが重くならないよう淡いグリーンウォッシュがおすすめ。使用のコツ：イエローは小さな花粉のドットのように活用し、繊細さを保ちましょう。
media.io で生成されたスプリング・ボタニック・ウォッシュの画像例
19）ブライト・ラボノート
HEX： #059669 #0ea5e9 #facc15 #f8fafc #0f172a
雰囲気： 好奇心、クリア、前向き
おすすめ用途： サイエンスワークショップポスター
クリアなブルーと鮮やかなイエローが、好奇心旺盛なラボノートのエネルギーを感じさせます。アイコンやステップ、重要時刻を素早く伝えるワークショップポスターに最適。余白と濃いインク色でコントラストをはっきり。使用のコツ：イラストは線画中心にし、最重要の形だけに色をのせましょう。
media.io で生成されたブライト・ラボノートの画像例
20）シティパーク・ピクニック
HEX： #2d6a4f #1e90ff #ffd166 #e9ecef #212529
雰囲気： リラックス、社交的、晴れやか
おすすめ用途： コミュニティイベントバナー
リラックスした公園の色調は、芝生で週末を過ごす社交的で明るい雰囲気です。遠くからもしっかり見える親しみやすいバナーデザインにどうぞ。背景には明るいグレーを使い、現代的でクリーンな印象に。使用のコツ：見出しはブルーにして明瞭さを出し、イエローは日付バッジに使いましょう。
media.io で生成されたシティパーク・ピクニックの画像例
21）オーシャン・オーチャード
HEX： #0a7c5a #0b84f3 #f6c445 #f0fdfa #083344
雰囲気： フレッシュ、みずみずしい、現代的
おすすめ用途： ジュースボトルパッケージ
オーシャン×オーチャードの新鮮な色調は、みずみずしくクリーンな印象。自然さとクリスプな清涼感を両立させたい飲料パッケージに最適です。非常に明るいアクア背景、原材料表記にディープティールを合わせましょう。使用のコツ：イエローはフレーバーリングやキャップのアクセントにし、店頭での認知を促進します。
media.io で生成されたオーシャン・オーチャードの画像例
グリーン・ブルー・イエローと相性の良い色は？
ニュートラルカラーを使うと強度のコントロールが簡単です：クリスプな白やオフホワイトは配色を軽やかに保ち、チャコールやほぼブラックは明るいブルーやイエローに対しタイポグラフィをシャープに保ちます。
よりプレミアム感やエディトリアル感が欲しい場合は、クールグレー（スレート、ストーン）を追加して、構造的なUIパネルや落ち着いた余白をつくりましょう。暖かみを出したい場合は、クリーミーベージュを加えブルーの鮮やかさを損なわずにソフトな雰囲気に。
よく合うアクセントは、コーラルやオレンジでアクセント、ディープネイビーで見出しなどを引き締めること。ほとんどのレイアウトでイエローは最小面積に留めることで、明確なハイライトとして機能します。
グリーン・ブルー・イエローのカラーパレットを実際のデザインで使う方法
均等配分より役割を意識してスタートしましょう：ブルーはメインのブランド／UIカラー、グリーンは補助状態（成功、エコ指標、サブブロック）、イエローは強調点（CTA、バッジ、アラートなど）に限定します。
コントラストと視認性をとくに優先しましょう（特にUIや案内サインの場合）。本文は白・オフホワイトまたは濃い背景の上に。イエロー文字は明るい背景では輪郭を追加するかイエローを十分暗くしない限り避けましょう。
モダンな仕上げには、フラットなカラーブロックと均一なスペースを徹底。深みは新しい彩度の強い色を増やすのではなく、淡いアクア・ライトミント・ソフトグレーなどを加えて。
AIでグリーン・ブルー・イエローパレットのビジュアルを作成する方法
これらの色を実際の文脈で確認したい場合は、ポスター、パッケージ、ダッシュボード、オンボーディング画面、ブランドムードボードなどの簡単なモックアップを生成しましょう。ビジュアルで確認することで、イエローが「サニー」か「警告」か、グリーンが「ナチュラル」か「テック」寄りか見分けやすくなります。
Media.io を使えば、短いプロンプトからいくつものバリエーションを生成でき、主役色を入れ替えてイエローを一貫したアクセントにキープする反復も簡単です。
同じデザインで2バージョン作成もぜひ：明るい背景で軽やかに、濃い背景ならイエローがよりドラマチックに映えます。
グリーン・ブルー・イエロー配色パレット よくある質問
-
グリーン・ブルー・イエローの配色は、どんなメッセージ性がありますか？
一般的には、信頼感（ブルー）、成長や新鮮さ（グリーン）、楽観や注意喚起（イエロー）の組み合わせを伝えます。彩度次第で、コースタルで親しみやすく、スポーティーでエネルギッシュ、あるいはクリーンでテクノロジー感のある印象に仕上がります。 -
イエローがデザインを支配しすぎないようにするには？
黄色はアクセントカラーとして使い（カバレッジは10～15%程度が多い）、CTAやバッジ、ハイライトに使います。広い面積にはブルーやグリーン、または淡いニュートラルカラーを使い、黄色は一番目立たせたい要素用にとっておきましょう。 -
グリーン・ブルー・イエロー系の色調にはどんな背景色が最適ですか？
明るくモダンな印象にする場合は、ホワイト、オフホワイト、淡いアクア、ソフトグレーがおすすめです。インパクト重視（特にポスターや広告）なら、ディープネイビーやほぼブラックの背景にするとイエローや鮮やかなブルーが高いコントラストで映えます。 -
このパレットはUIやダッシュボードに向いていますか？
はい。ブルーは基本のナビゲーションや各コンポーネントに、グリーンはポジティブな状態の表現に、イエローは警告や重要な更新情報の表示に使えます。テキストやアイコンのコントラスト比が十分確保できているか確認してください。 -
グリーン・ブルー・イエローのパレットに合うニュートラルカラーは？
チャコール、インクネイビー、スレートグレー、暖かみのあるクリーム、クリーンなホワイトがおすすめです。視覚的ノイズを抑え、3つの主色のヒエラルキーを明確にできます。 -
グリーンとブルーは同じくらい使ってもいい？それともどちらかを主役にした方がいいですか？
同じ比率でも使えますが、ほとんどのデザインでは（多くはブルーを）主役、グリーンをサポート、イエローをハイライトにする方がクリーンな印象になります。同じ比率は遊び心のあるブランディングには合いますが、余白やタイポグラフィの工夫が必要です。 -
このパレットを実際のデザインですばやくプレビューするには？
同じレイアウト（ポスター、ランディングページ、ラベルなど）でいくつかモックアップを作り、主役色を入れ替えてみましょう：ブルー主役・グリーン主役・ダーク背景バージョンなど。Media.ioのテキストから画像生成ワークフローなら、素早くバリエーションを比較できます。
次に進む: ゴールドベージュカラーパレット
