ブルー・グリーン・イエロー・オレンジ配色20選とHEXコード

ブルー、グリーン、イエロー、オレンジは、高エネルギーながらもバランスの取れた配色ファミリーです。クールな色調を基盤に、暖色の注目色がうまく調和しています。

新鮮な印象（ブルー／グリーン）と即時の目立ち度（イエロー／オレンジ）の両方が欲しい時、UI、ブランディング、ポスター、パッケージ、季節のグラフィックなどでこれらの組み合わせを使いましょう。

ブルー×グリーン×イエロー×オレンジ配色がうまくいく理由

ブルーとグリーンは「信頼」と「明瞭さ」の役割の大部分を担います。これらは安定・クリーン・読みやすいイメージとなり、紙でもデジタルでも背景やナビゲーション、長めのテキストエリアに最適です。

イエローとオレンジが華やかさをプラス。視線を強く引き付けるため（特に画面上で）、コールトゥアクションや重要なラベル、プライスタグ、日付、小さいブランドアクセントなどに最適です。

組み合わせ次第で、海岸風、トロピカル、ポップ、モダンなど様々な雰囲気を演出できます。一番簡単なコツは、寒色をメイン、暖色をアクセントに絞ることです。

20種以上のブルー×グリーン×イエロー×オレンジ配色アイデア（HEXコード付き）

1）日の差すハーバー

HEX： #0B3C5D #1FBFB8 #3CB371 #FFD166 #FF7A18

印象： シャープ、海辺、明るい

おすすめ用途： ブランドスタイルガイド・ヒーローバナー

海の青、海水のティール、鮮やかなシトラスのアクセントが、シャープで明るい海岸の光と温もりを表現。旅行ブランドやビーチカフェ、アウトドアサービスなど、元気さは欲しいが騒がしく見せたくない時におすすめ。余白＋抑えめなサンセリフと組み合わせると、鮮やかさをコントロールできます。使い方のコツ：ネイビーを見出しに使い、イエローとオレンジはボタンや強調に取っておきましょう。

media.ioで生成した日の差すハーバーの画像例

Media.io

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

今すぐ無料で試す

2）トロピカル遊歩道

HEX： #146EB4 #00A6A6 #2ECC71 #FFE66D #FF9F1C

印象： 明るい、楽しい、南国風

おすすめ用途： 夏イベントのフライヤー

日差しの下、水辺のカラフルな屋台やフルーツスタンドを思わせる、楽しくて親しみやすい印象。ビビッドなブルーとアクアが新鮮さを演出し、イエローとオレンジがコールトゥアクションに温かさをプラス。夏のコンサートやフードイベント、視認性重視のコミュニティ型イベントに最適。使い方のコツ：背景に淡いイエロー、日付やチケットバッジだけにオレンジを使いましょう。

media.ioで生成したトロピカル遊歩道の画像例

3）シトラスラグーン

HEX： #2D5BFF #00C2C7 #5AD45A #FFF3A3 #FF7F50

印象： 新鮮、ジューシー、ハイコントラスト

おすすめ用途： アプリのオンボーディング画面

新鮮なラグーンの水とみずみずしいシトラスの輪切りで、清潔感と前向きなトーンを生み出します。この配色は、明瞭さと親しみやすさが必要なアプリのオンボーディングに最適。イラストはシンプル＆フラットにし、白やごく薄いクリーム色の余白を十分に取るのがコツ。使い方のコツ：メインボタンにはコーラルオレンジ、セカンダリUIにはティールを使いましょう。

media.ioで生成したシトラスラグーンの画像例

4）デザートオアシス

HEX： #1B4F72 #148F77 #58D68D #F7DC6F #E67E22

印象： 落ち着き、日差し、癒し・リセット

おすすめ用途： ウェルネス商品のパッケージ

日差しと涼しい木陰が、砂漠の石に囲まれた小さなオアシスのように出会う配色。深みのあるブルーが全体を引き締め、グリーンとイエローはオレンジの暖かみの中でオーガニックさとリフレッシュ感を添えます。子どもっぽくならず、健康・ライフスタイルブランドやスパメニューにもピッタリ。使い方のコツ：オレンジは小さな封印ラベルやコーナータブなどワンポイントに使うと高級感を維持できます。

media.ioで生成したデザートオアシスの画像例

5）カーニバルの朝

HEX： #274C77 #2A9D8F #8AC926 #FFCA3A #FF7A00

印象： 鮮やか、祝祭感、若々しい

おすすめ用途： キッズバースデー招待状

鮮やかで祭りのようなエネルギーは、朝の遊具や紙吹雪、雲一つない青空を思わせます。どっしりとしたブルーが基礎、元気なグリーン、イエローとパンチのあるオレンジでワクワク感UP。キッズパーティー招待状や学校クラブ、家族向けのプロモにおすすめ。使い方のコツ：本文はブルーで読みやすく、オレンジは名前やRSVPラインにだけ使いましょう。

media.ioで生成したカーニバルの朝の画像例

6）海辺のマーケット

HEX： #003F88 #0EAD69 #7AE582 #FFDD4A #FF8C42

印象： 活気、親しみやすさ、新鮮市場

おすすめ用途： ファーマーズマーケットのポスター

活気あふれる市場や新鮮な野菜が、力強いブルーと鮮烈なグリーンで際立ちます。イエローとオレンジは手書きのプライスタグや日差しを浴びた果実のようなイメージで、強力に注目を集めます。コミュニティのポスターやローカルニュースレター、店頭サインで瞬時に伝えたい場合に最適。使い方のコツ：ポスターの背景は白、時間や場所など大事な情報にはイエローブロックを。

media.ioで生成した海辺のマーケットの画像例

7）レトロサーフショップ

HEX： #1D3557 #06D6A0 #80ED99 #FFD60A #F77F00

印象： レトロ、スポーティ、エネルギッシュ

おすすめ用途： Tシャツグラフィック＆グッズタグ

レトロなサーフの勢いは、ワックスを塗ったボードや桟橋に並ぶ鮮やかな看板のよう。太いアウトラインや大胆な形状と合わせると、スポーティでグラフィカルな印象が強まります。マーチやクラブTシャツ、ステッカー、インパクト大なアイコンにおすすめ。使い方のコツ：ネイビーを主なインクに、イエローは小さめのポイント使いに留めてデザイン性を保ちましょう。

media.ioで生成したレトロサーフショップの画像例

8）フレッシュピクニック

HEX： #2B50AA #4DD4AC #6DDF6D #FFF07C #FF9B54

印象： 軽やか、親しみやすい、カジュアル

おすすめ用途： レシピブログのグラフィック

ピクニックの魅力は、ギンガムブランケットやレモネード、太陽の下のハーブそのもの。柔らかいイエローとオレンジで親しみやすさを持たせ、ブルーとグリーンが清潔感と食欲をそそる新鮮さをプラス。レシピカードやミールプランのテンプレ、写真を邪魔しないフードブロックにも最適。使い方のコツ：ミントティールはラベルに、オレンジは評価や保存数、小さいバッジ専用にしましょう。

media.ioで生成したフレッシュピクニックの画像例

9）ボタニカルブリーズ

HEX： #1C7ED6 #2EC4B6 #2F9E44 #FFE8A1 #FF922B

印象： 風通し、ナチュラル、楽観的

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

風を受ける葉や明るい空色で、全体的に穏やかでありながら明るい雰囲気。グリーンは自然で健康的な印象、イエローとオレンジは木洩れ日のような輝きを添えます。ボタニカルプリントや春のSNS投稿、ナチュラル感重視のパッケージなどに。使い方のコツ：輪郭線は淡く、影部分はティールで奥行きを。

media.ioを使用して生成された植物のそよ風の画像例

10) モダンなプレイルーム

HEX： #3A86FF #00B4D8 #38B000 #FFBE0B #FB5607

印象： 太く、現代的、遊び心

おすすめ用途： 教育アプリUI

太く鮮やかなエネルギーは、ビルディングブロックや明るい教室ポスターの雰囲気に現れますが、現代的な洗練も加わっています。涼しいブルーが画面をクリーンに保ち、グリーン、イエロー、オレンジが親しみやすい報酬や進捗の合図になります。教育アプリ、親向けダッシュボード、ゲーム化された学習プロセスに特におすすめです。使用アドバイス：イエローは成功状態用に、オレンジは緊急の通知にのみ使い、疲労を避けましょう。

media.ioを使用して生成されたモダンプレイルームの画像例

11) サンセットカヤック

HEX： #005F73 #0A9396 #94D2BD #EE9B00 #CA6702

印象： 冒険的、穏やか、ゴールデンアワー

おすすめ用途： アウトドアツアーのランディングページ

冒険的な落ち着きは、夕暮れ時のティール色の水面と柔らかな金色の地平線のよう。深いティールとブルーが信頼感を、ゴールドと焦げたオレンジが温かみを与えます。アウトドアツアー、エコ旅行、アクティビティ予約など、興奮と安全感の両方が必要な場面におすすめ。使用アドバイス：CTAはゴールドで、オレンジはホバーステートに使い、明確なインタラクションを示す。

media.ioを使用して生成されたサンセットカヤックの画像例

12) シティパーク壁画

HEX： #22577A #38A3A5 #57CC99 #F4D35E #EE964B

印象： コミュニティ、楽しい、芸術的

おすすめ用途： コミュニティニュースレターのレイアウト

コミュニティの温かさは、明るい公園の道沿いに描かれた壁画のよう。ブルーとティールがレイアウトに構造を与え、グリーン、イエロー、オレンジが発表や日付の強調を加えます。ニュースレター、市のチラシ、非営利団体のアップデートなど、読みやすく楽観的であるべき場面に適しています。使用アドバイス：ブルーは見出し、ティールは区切り、オレンジは重要なリマインダーというシンプルなカラーヒエラルキーを作る。

media.ioを使用して生成されたシティパーク壁画の画像例

13) ミニマルテックポップ

HEX： #0F172A #14B8A6 #22C55E #FDE047 #F97316

印象： スマート、現代的、高い明瞭性

おすすめ用途： SaaSダッシュボードUI

クリーンなコンソールと鮮やかなステータスライトのような、洗練されたダークモードの明瞭さ。ほぼ黒のブルーが構造を与え、ティールとグリーンがアクティブ状態と成功を示します。イエローとオレンジは、通知やタグ、重要な指標のための控えめなハイライトとして最適です。使用アドバイス：イエローは警告といったひとつのコンポーネントタイプのみに限定し、ダッシュボードの一貫性を保つ。

media.ioを使用して生成されたミニマルテックポップの画像例

14) アルチザンキッチン

HEX： #1E40AF #059669 #86EFAC #FDE68A #FB923C

印象： 手作り、温かい、親しみやすい

おすすめ用途： カフェメニューデザイン

手作りの温かさは、つややかなタイル、新鮮なハーブ、日差しの差し込むカウンターのように感じられます。濃いブルーが見出しをくっきりさせ、グリーンが自然な印象を与え、イエローオレンジのアクセントが焼き菓子やスパイスを連想させます。カフェメニュー、小規模のラベル、デリのサインなど、親しみやすく高級感のある見た目が必要な場面におすすめです。使用アドバイス：淡いグリーンを商品カテゴリの背景ブロックとして使用すると、スキャンが簡単になります。

media.ioを使用して生成されたアルチザンキッチンの画像例

15) キッズサイエンスフェア

HEX： #2563EB #06B6D4 #4ADE80 #FEF08A #F59E0B

印象： 好奇心旺盛、明るい、楽観的

おすすめ用途： 学校ポスターとバッジセット

好奇心と明るいエネルギーは、ラボのステッカー、紙製ロケット、教室壁の整然としたチャートのよう。ブルーは賢さと信頼を感じさせ、グリーン、イエロー、アンバーオレンジが賞やハイライトに興奮を加えます。学校ポスター、印刷用バッジ、STEMワークシートなど、楽しく組織された印象が必要な場面に最適です。使用アドバイス：アイコンのアウトラインはブルー、バッジの主要要素はイエローやオレンジで塗り分けましょう。

media.ioを使用して生成されたキッズサイエンスフェアの画像例

16) サマーポスタープリント

HEX： #0A4D68 #00D1B2 #7CFC00 #FFE45E #FF6B35

印象： 太く、晴れやか、高エネルギー

おすすめ用途： スクリーンプリントスタイルのポスター

鮮やかな夏の熱気は、日差しに色褪せた壁のスクリーンプリントのライブポスターのよう。深いブルーグリーンが強いコントラストを保ち、ネオン寄りのグリーンと明るいイエローがレイアウトをエレクトリックにします。オレンジはタイトル、スタンプ、限定版マークにぴったりのアクセントです。使用アドバイス：主要な２色インクを使い、他は小さなオーバーレイに留めることでプリントをクリーンに保ちます。

media.ioを使用して生成されたサマーポスター プリントの画像例

17) フェスティバルのサイン誘導

HEX： #004E98 #00A896 #2ECF8F #F9C74F #F9844A

印象： 太く、方向性、エネルギッシュ

おすすめ用途： イベントサインシステム

太く方向性のあるカラーは、クリーンな矢印と高視認性なサインが広い空の下に現れるような印象。このブルー・グリーン・イエロー・オレンジの組み合わせは誘導に最適で、即時認識が重視されます。厚い形、たっぷりの余白、高コントラストのテキストで遠くからも読みやすく。使用アドバイス：各エリアに主要な色を割り当て、オレンジは緊急情報（出口や救護など）のみに使う。

media.ioを使用して生成されたフェスティバルサイン誘導の画像例

18) クリーンECアクセント

HEX： #1E3A8A #0F766E #34D399 #FDE047 #FB923C

印象： クリーン、信頼感、CV重視

おすすめ用途： ECホームページUI

明るいアクセント付きのクリーンな信頼感は、整然とした店舗と目を引くカラフルなタグから連想されます。強いブルーが信頼の基盤を作り、ティールとグリーンがナビゲーションや成功状態をサポートします。このブルー・グリーン・イエロー・オレンジのパレットは、ECサイトで明確なCTAと見やすいプロモに最も効果的です。使用アドバイス：商品カードはニュートラルに、イエローやオレンジは期間限定バッジのみに使う。

media.ioを使用して生成されたクリーンECアクセントの画像例

19) トラベルブログヘッダー

HEX： #0B5FA5 #00BFA6 #52B788 #FFD166 #F77F00

印象： 明るい、軽やか、旅心

おすすめ用途： ブログヘッダー＋サムネイルシステム

明るい旅心は、クリーンな地図、海辺の水、日差しのハイライトのイメージ。ブルーとティールがヘッダーを開放的に、デジタルフレンドリーに保ち、グリーン、イエロー、オレンジがカテゴリやタグに温かみを加えます。ブログサムネイル、旅行ガイド、ソーシャルカバーにぴったりの一貫したシステム。使用アドバイス：オレンジはカテゴリのマーカー、メインタイトルはブルーでコントラストを。

media.ioを使用して生成されたトラベルブログヘッダー画像例

20) イブニングストリートフード

HEX： #14213D #1B998B #55A630 #FFD166 #F77F00

印象： 太く、風味豊か、ナイトマーケット

おすすめ用途： フードトラックのロゴ＆メニューストリップ

夜市の大胆な風味は、涼しい街灯の下の焼き立てのフライパンと、暖かな看板が輝く様子を思わせます。濃いブルーが力強さとコントラストを加え、ティールとグリーンが重くならず新鮮な印象を与えます。イエローとオレンジは、価格や特別メニュー、ロゴマークの見やすさに最適です。使用アドバイス：メニューストリップテキストの背景にイエローを置き、オレンジは看板メニューの強調に限定して控えめに。

media.ioを使用して生成されたイブニングストリートフード画像例

ブルー・グリーン・イエロー・オレンジに合う色は？

ニュートラルカラーは最も合わせやすい：ホワイト、温かいアイボリー、明るいグレー、チャコール、深いネイビーはパレットにゆとりを生み、イエローやオレンジがデザインを圧倒するのを防ぎます。

より高級感やアウトドア風を求めるなら、サンド、粘土、テラコッタ、くすんだオリーブなどアース系カラーがおすすめ―これらは明るさを抑えつつ晴れやかな雰囲気を保ちます。

UIでよりコントラストが欲しい場合は、ほぼ黒（テキスト用）と淡いクリーム（面用）を使い、状態色はティール/グリーン、イエロー/オレンジは警告や主要アクションに限定しましょう。

ブルー・グリーン・イエロー・オレンジ配色を実際のデザインで使う方法

まず明確な階層を作りましょう：ブルー（または深いティール）を見出しやコアUI構造に、グリーンを成功や確認、補助的なハイライトとして。

イエローとオレンジは意図的に使いましょう。イエローはハイライトやバッジ向き、オレンジはCTAや価格、"急ぎだけど親しみやすい"通知に―小面積でも十分効果的です。

可読性を高く保つには、イエロー文字をホワイト背景に置かず、グリーン＋イエローの組み合わせも注意しましょう。迷ったら濃いブルー文字を明るいイエロー背景に使うとクリーンなコントラストに。

AIでブルー・グリーン・イエロー・オレンジ配色のビジュアルを作成

すでにHEXコードがある場合、レイアウトと各色の配置を説明すれば、ポスターやUIモックアップ、パッケージ案、ブランドスタイルタイルなどをすばやくビジュアル化できます。

プロンプトにはスタイル（フラットベクター、水彩画、スクリーンプリント、ダークモードUI）、構図（グリッド、ヒーローバナー、カードレイアウト）、アスペクト比を指定するとシリーズで一貫した結果が得られます。

Media.ioで複数パターンをすばやく生成し、最良構造を残してアクセント（イエローvsオレンジ）だけ替えて、どのバージョンがより見やすいかテストしましょう。

次へ： トパーズカラーパレット