イエローとブルーのカラーパレットは、フレンドリーな印象を保ちながら瞬時にコントラストを生み出す最も簡単な方法の一つです。イエローは温かみと注目を引き、ブルーは落ち着きと信頼感を与えます。
下記は、ブランディング、UI、ポスター、パッケージ、印刷物で使える20個の新鮮なイエローとブルーのパレットアイデア（HEXコード付き）です。加えて見やすさとアクセシビリティ向上のためのコツも紹介します。
この記事の内容
- なぜイエローとブルーのパレットはこんなにうまく機能するのか
-
- Sunlit Harbor（陽光の港）
- Lemon Denim（レモンデニム）
- Riviera Postcard（リヴィエラポストカード）
- Golden Hour Sky（ゴールデンアワースカイ）
- Citrus Nautical（シトラスノーティカル）
- Buttercup Blueprint（バターカップブループリント）
- Saffron Surf（サフランサーフ）
- Canary Ink（カナリーインク）
- Daffodil Slate（ダッフォディルスレート）
- Mango Cobalt Pop（マンゴーコバルトポップ）
- Warm Sand ＆ Sea（暖かい砂と海）
- School Bus ＆ Oxford（スクールバスとオックスフォード）
- Honeyed Cerulean（ハニードセルリアン）
- Pastel Picnic（パステルピクニック）
- Solar Tech（ソーラーテック）
- Sunflower Porcelain（ひまわりポーセリン）
- Misty Marina（ミスティマリーナ）
- Retro Primary Punch（レトロプライマリーパンチ）
- Blue Hour Sunbeam（ブルーアワーサンビーム）
- Coastal Minimal（コースタルミニマル）
- イエローとブルーに合う色は？
- イエローとブルーのカラーパレットを実際のデザインで使う方法
- AIでイエローとブルーのパレットビジュアルを作成
なぜイエローとブルーのパレットはこんなにうまく機能するのか
イエローとブルーは自然にバランスを取ります：イエローはエネルギッシュで楽観的な印象、ブルーは安定感と信頼性を感じさせます。組み合わせると明確な視覚的階層が生まれ、フレンドリーさと構造が必要なデザインに最適です。
使いやすさの観点から、多くのイエローとブルーの組み合わせはアクセントと基盤の間に鮮明な区分をもたらします。これによりアクションの強調、ラベル、重要なUI状態を目立たせつつページ全体が圧迫されません。
印刷やブランディングでもこのデュオは柔軟性があります：色合いやニュートラルの選び方次第で、海辺のカジュアルやプレミアム、ノーティカル、現代的・テック志向など幅広い雰囲気を演出できます。
20以上のイエローとブルーのカラーパレットアイデア（HEXコード付き）
1）Sunlit Harbor（陽光の港）
HEX： #FFD166 #0B4F6C #1B98E0 #F6F7EB #2E2D4D
雰囲気： 海辺、楽観的、クリーン
おすすめ用途： 旅行サイトのヒーローバナー
海辺で楽観的な雰囲気、遠くに深い水面が見える桟橋の陽射しのよう。明るいイエローはアクションの強調に、濃いネイビーは見出しに使うことで読みやすさを確保。ホワイトスペースや淡いニュートラルを十分に合わせて視覚ノイズを防ぎましょう。ポイント：鮮やかなブルーはホバー状態に限定すればインターフェースの落ち着きが保てます。
media.ioで生成したSunlit Harbor（陽光の港）の画像例
Media.ioは、ブラウザ上で動画、画像、音声を作成・編集できるオンラインAIスタジオです。
2）Lemon Denim（レモンデニム）
HEX： #FFE66D #2B59C3 #1E2A78 #F7F3E3 #3A3A3A
雰囲気：カジュアル、若々しい、自信
おすすめ用途：ストリートウェアブランドルックブック
カジュアルで若々しい雰囲気、色褪せたTシャツや濃いデニム、清潔なステッチを思い出させます。これらのイエローとブルーの組み合わせは、大胆な文字やバッジ、価格の強調に最適ですが、騒々しく感じさせません。オフホワイト背景とチャコールテキストでコントラストをバランスすればよりエディトリアルな仕上がりに。ポイント：イエローは小さな要素に使い、濃いブルーを主役に。
media.ioで生成したLemon Denim（レモンデニム）の画像例
3）Riviera Postcard（リヴィエラポストカード）
HEX： #FFC857 #3A86FF #023047 #E5F4FF #FFFAE1
雰囲気：晴れやか、レトロ、そよ風
おすすめ用途：夏のイベントフライヤー
晴れやかで少しレトロ、ポストカードの空やビーチパラソル、大胆な旅行スタンプを連想させます。淡いブルーは軽やかな背景に、ネイビーはタイポグラフィの自信を支えます。シンプルな幾何学形状と単一のディスプレイフォントを合わせて遊び心を保ちましょう。ポイント：フライヤーの縁に薄いネイビー枠を追加し、視認性を向上。
media.ioで生成したRiviera Postcard（リヴィエラポストカード）の画像例
4）Golden Hour Sky（ゴールデンアワースカイ）
HEX： #FFB703 #219EBC #8ECAE6 #FBF8CC #2B2D42
雰囲気：暖かい、軽やか、前向き
おすすめ用途：ウェルネスアプリUI
暖かく軽やかな雰囲気、夕方の柔らかな光が澄んだ空に溶け込むような印象。淡いブルーはパネルやカードへ、ゴールドは進捗リングや主要アクションに。シンプルなラインアイコンと潤沢な余白で穏やかな体験へ。ポイント：チャコール色をボディテキストに使い、明るいブルー背景でもコントラストを保ちましょう。
media.ioで生成したGolden Hour Sky（ゴールデンアワースカイ）の画像例
5）Citrus Nautical（シトラスノーティカル）
HEX： #F9C74F #003049 #669BBC #FDF0D5 #2F3E46
雰囲気：クラシック、海事、安定感
おすすめ用途：レストランメニューデザイン
クラシックで海事的、真鍮のディテールやネイビーのエプロン、バーのシトラスガーニッシュを思い起こさせます。クリーミーなニュートラルで高級感を演出し、イエローでスペシャルやセクションタイトルを強調。セリフ見出しやミニマルな仕切り線を組み合わせて上品なメニューに。ポイント：ミッドブルーは小さなアイコンや箇条書きに留め、ネイビーが主役になるように。
media.ioで生成したCitrus Nautical（シトラスノーティカル）の画像例
6）Buttercup Blueprint（バターカップブループリント）
HEX： #FDE74C #1D4E89 #0B132B #EAF2FF #5BC0BE
雰囲気：エネルギッシュ、テクニカル、モダン
おすすめ用途：SaaSランディングページ
エネルギッシュでテクニカル、明るい付箋がブループリントのグリッドを覆うような印象です。このイエローとブルーのパレットは、機能の強調やアイコン、信頼バッジなど速やかな明快さが欲しい場面に最適。クールなホワイトと控えめなシャドウで製品主導な雰囲気に。ポイント：ティールは控えめなアクセントに使い、主たるコントラストが一貫するよう調整。
media.ioで生成したButtercup Blueprint（バターカップブループリント）の画像例
7）Saffron Surf（サフランサーフ）
HEX： #F6BD60 #2D6CDF #00A6FB #F7EDE2 #1B1B3A
雰囲気：スポーティー、明るい、ポジティブ
おすすめ用途：スポーツポスター
スポーティーでポジティブ、サーフボードやユニフォーム、陽射しを浴びた砂のエネルギーを感じさせます。エレクトリックブルーで動きとインパクトを、暖かいサフラン色は親しみやすさを演出。大きく詰まった文字や高コントラストの形状を組み合わせれば遠くからでも瞬時に読みやすい。ポイント：背景をオフホワイトにし、濃いインディゴが小さいテキスト全てを担うよう設定。
media.ioで生成したSaffron Surf（サフランサーフ）の画像例
8）Canary Ink（カナリーインク）
HEX： #FFEA00 #1F2A44 #3E5C76 #F8F9FA #0D1321
雰囲気：高コントラスト、エディトリアル、洗練
おすすめ用途：ニュースニュースレターテンプレート
高コントラストでエディトリアル、明るいハイライターが濃いインクのページに映えるイメージです。カナリーイエローはタグや速報ラベル、重要リンクに使えばスキャンしやすさを保てます。クリーンなサンセリフ体と厳格なスペース配分でレイアウトをシャープに。ポイント：大きなイエロー領域は避け、アクセント程度で十分注意を引けます。
media.ioで生成したCanary Ink（カナリーインク）の画像例
9）Daffodil Slate（ダッフォディルスレート）
HEX： #FFD500 #4A6FA5 #166088 #E8EDF2 #3A3F44
雰囲気：実用的、落ち着き、信頼感
おすすめ用途：企業向けプレゼンテーションデッキ
実用的で落ち着きのある雰囲気は、自信のある職場と楽観的なアクセントを示します。スレートトーンはチャートや表の読みやすさを高め、ダッフォディルのアクセントは要点を強調。シンプルなデータビジュアライゼーションと控えめなアイコンで洗練されたデッキに。ポイント：最も濃いグレーは本文用、ブルーは見出しやチャートシリーズ用に。
media.ioで生成されたラッパスイセンスレートの画像例
10) マンゴーコバルトポップ
HEX： #FFBE0B #3F37C9 #4361EE #F3F0FF #1B263B
雰囲気： 太く、遊び心があり、インパクト大
おすすめ用途： 商品発売広告
力強く遊び心があり、夜空のネオンサインのような印象です。このような黄色×青の組み合わせは、即座にコントラストと現代感が求められるローンチ広告に最適です。大きなフォント、シンプルな形、十分な余白と合わせることで、色が主役になります。コツ：影は控えめにし、濃紺を構造のために使いましょう。
media.ioで生成されたマンゴーコバルトポップの画像例
11) ウォームサンド＆シー
HEX： #F4D35E #2E86AB #0A2342 #FFFBEA #7A7A7A
雰囲気： リラックス、自然、親しみやすい
おすすめ用途： ブティックホテルブランディング
落ち着きと親しみやすさがあり、日の差す砂やシーグラス、深い夜の水辺を思い起こさせます。暖かい黄色はホスピタリティと歓迎の印象、ネイビーはロゴやステーショナリーに高級感を加えます。テクスチャペーパーや繊細なグレインと併せてブティック感を演出。コツ：グレーをサブコピーに使うことでパレットが柔らかくバランスよく保たれます。
media.ioで生成されたウォームサンド＆シーの画像例
12) スクールバス＆オックスフォード
HEX： #FFD60A #001D3D #003566 #E9ECEF #212529
雰囲気： 権威的、スポーティー、タイムレス
おすすめ用途： 大学クラブポスター
権威と永続性を感じさせ、バルシティのバナーやキャンパスのクリアなサインを思い起こさせます。強いネイビーは見出しに公式感を与え、明るい黄色は日付や場所の視認性を高めます。無骨なサンセリフフォントやシンプルなグリッド配置と合わせて自信あるレイアウトに。コツ：黄色の細い線は避け、太い線を使って遠くからも読みやすくしましょう。
media.ioで生成されたスクールバス＆オックスフォードの画像例
13) ハニードセルリアン
HEX： #FFC145 #2D9CDB #1B4F72 #FDF6E3 #2C3E50
雰囲気： 親しみやすく、明るく、洗練された
おすすめ用途： ECカテゴリーページ
親しみやすく洗練され、ハチミツが陶器にかかり、空色が鮮やかに弾ける印象です。セルリアンブルーはリンク、フィルター、ナビゲーションに最適で、ハニー色はセールへの注目を集めます。暖かいオフホワイトの背景と合わせることで商品写真が自然に見えます。コツ：深い青を価格テキストに用いることで淡い部分もコントラストが保てます。
media.ioで生成されたハニードセルリアンの画像例
14) パステルピクニック
HEX： #FFF3B0 #A9D6E5 #2C7DA0 #FAFAFA #6C757D
雰囲気： 柔らかく、軽やかで、親しみやすい
おすすめ用途： ベビーシャワー招待状
柔らかく軽やかで、ピクニックブランケットや明るい空、穏やかな午後の日差しを感じさせます。パステルイエローは縁取りや小さなモチーフに使い、ミッドブルーは名前や重要事項に。繊細なラインアートや丸みのあるタイポグラフィと合わせて温かく歓迎的な雰囲気に。コツ：メインテキストの鮮明さを保つためグレーはサブ情報用に。
media.ioで生成されたパステルピクニックの画像例
15) ソーラーテック
HEX： #FFE45E #00509D #003F88 #F5F7FF #2D3142
雰囲気： クリーン、未来的、自信ある
おすすめ用途： フィンテックモバイルアプリUI
クリーンで未来的、明るいステータスランプと深い制御パネルを連想させます。この黄色と青の配色は、明瞭さと信頼感が重要なフィンテックスクリーンに最適です。クールホワイトや細い分割線、一貫したアイコン太さと合わせて整然としたシステムに。コツ：黄色は成功状態と主要アクションのみに限定してUIを引き締めましょう。
media.ioで生成されたソーラーテックの画像例
16) サンフラワーポーセリン
HEX： #FFDD57 #4D96FF #1E3A8A #FFFDF7 #374151
雰囲気： 新鮮、整頓、モダンクラシック
おすすめ用途： キッチンウェアパッケージ
新鮮で整然と、明るいヒマワリと艶やかな陶器が並ぶ印象です。クリーンなパッケージスペースにはホワイトと柔らかなイエローを、ラベルや商品名には濃いブルーを。ミニマルなパターンや明確な階層構造と合わせることで高級感が伝わります。コツ：バーコードや法的表記はダークグレーでコントラストブロックを避けましょう。
media.ioで生成されたサンフラワーポーセリンの画像例
17) ミスティマリーナ
HEX： #FEEA5A #5BC0EB #145DA0 #E6F6FF #22333B
雰囲気： クール、爽やか、リフレッシュ
おすすめ用途： セーリングクラブパンフレット
涼しく爽やかで、朝霧がドックを覆い澄んだ水辺が広がる情景を示唆します。淡いブルーは広いパンフレット面に理想的、深いブルーは見出しやキャプションの可読性維持に。十分な余白やシンプルな航海アイコンと合わせて読みやすさを確保。コツ：黄色はセクションやページナンバーのナビゲーション指示として。
media.ioで生成されたミスティマリーナの画像例
18) レトロプライマリーパンチ
HEX： #FFD23F #2E55FF #0A1F44 #FFFCF2 #E76F51
雰囲気： レトロ、パンチ、遊び心
おすすめ用途： 音楽フェスティバルポスター
レトロで力強く、スクリーン印刷のポスターや深夜のネオンを思わせます。黄色×青の組み合わせは、階層構造が明確でステージや時間の案内が必要な場合に輝きます。太いフォント、ハーフトーンテクスチャ、限定した形と合わせて一体感を保ちます。コツ：オレンジはヘッドライナー限定のアクセントとして特別感を維持しましょう。
media.ioで生成されたレトロプライマリーパンチの画像例
19) ブルーアワーサンビーム
HEX： #FFCC33 #1D3557 #457B9D #A8DADC #F1FAEE
雰囲気： シネマティック、穏やか、思慮深い
おすすめ用途： 書籍カバーデザイン
映画的で穏やか、日没直後の最後の暖かな光が冷たい空気を切り取る瞬間を感じさせます。深い青はタイトルや著者名に、黄色は小さな注目ポイントやエンブレムに。柔らかいグラデーションや控えめなイラストと併せて文学的な雰囲気に。コツ：淡いミントは背景に残し、表紙が重くならないように。
media.ioで生成されたブルーアワーサンビームの画像例
20) コースタルミニマル
HEX： #F7D154 #0F4C81 #3B82F6 #FFFFFF #111827
雰囲気： ミニマル、モダン、明るい
おすすめ用途： スタートアップロゴ＆ブランドキット
ミニマルでモダン、白くクリーンなスタジオに日差しと海の鮮やかさが際立つ印象です。ネイビーや黒に近い色はロゴの基盤となり、明るい青はリンクやSNSにも映えます。幾何学的なマークや十分な余白と合わせて自信と拡張性あるアイデンティティに。コツ：黄色は小さいサイズでテストし、白との区別が保てるようにしましょう。
media.ioで生成されたコースタルミニマルの画像例
イエローとブルーに合う色は？
ニュートラルは最も扱いやすい第3色です：白、クリーム、明るいグレーは黄色と青をクリーンに保ち、チャコールや黒に近い色は淡い青や暖かい黄色のテキストコントラスト向上に役立ちます。
より豊かな印象を求めるなら、深いネイビーやインディゴを「構造色」として加え、黄色をアクセントにします。このアプローチはUIデザインでよく使われ、CTAを明るく保ちつつインターフェース全体がうるさくならないようにできます。
より個性を求める場合は、コーラル／オレンジ、ティール、ミントの小さなアクセントも効果的―ただし限定的に使い、黄色と青の関係が主役になるように。
イエローとブルーのカラーパレットを実際のデザインで使う方法
まず役割分担から始めましょう：青を主要ベース（ヘッダー、ナビ、本文）に、黄色は注目ポイント（ボタン、バッジ、重要な数字）用に限定します。これで黄色がレイアウトを圧倒するのを防げます。
アクセシビリティの観点では、白や明るい背景で黄色テキストを使うのは避けましょう。代わりに黄色は背景やハイライトとして使い、その上に暗いテキストで表現し、小さなテキストがコントラスト基準を満たすかテストしましょう。
印刷の場合、彩度に注意：明るい黄色は用紙やインクで変化します。タイプにはやや深いネイビーを選び、暖かいオフホワイトを使うとパレットが冷たく感じません。
AIでイエローとブルーのパレットビジュアルを作成
ブランドコンセプトのプレゼンやムードボード作成時には、素早くビジュアルを生成すれば、フルデザインシステムに移る前にパレットを検証できます。黄色が小さいサイズでも読めるか、青が背景でどう見えるかも簡単にテストできます。
Media.ioなら、ポスター、UIモックアップ、パッケージ、ヒローバナーなどを数分でパレットアイディアから生成できます―色の方向性を保ったままスタイルや照明・レイアウトを繰り返し検証可能です。
イエロー×ブルーカラーパレット よくある質問
-
黄色と青のカラーパレットはどんな印象を与えますか？
ほとんどの黄色×青パレットは、楽観（黄色）と信頼・落ち着き（青）のバランスで、ブランディングやUI、サインなど注目を集めつつ明瞭さも損なわない用途で人気です。 -
黄色と青は補色関係ですか？
正確には違います。黄色の補色は紫、青の補色はオレンジです。しかし多くの黄色×青ペアも輝度や温度差が大きいため、強いコントラストに感じます。 -
黄色と青のデザインに最適な背景色は？
白・オフホワイト・非常に淡い青はクリーンな印象で安全な背景です。ダークテーマにはネイビー／インディゴ背景を使い、黄色は小さなアクセントに限定すると視覚的疲労を防げます。 -
黄色テキストを読みやすくするには？
黄色を小さな本文テキストに使うのは避けましょう。どうしても使う場合は、濃い青／ネイビー背景に黄色を置き、フォントの太さやサイズを上げること。もしくは黄色背景に暗いテキストを使いましょう。 -
「ゴールド」や「マスタード」イエローに合う青の色調は？
深いネイビー、スレートブルー、インディゴはゴールド／マスタードと特に相性が良く、高級感を感じさせつつヘッダーやロゴのコントラストも強めます。 -
黄色×青のUIがうるさく感じないようにするには？
青（もしくは黒に近い色）を構造やタイポグラフィの大部分に使い、十分な余白を確保、黄色は主要アクションやハイライト、重要なステータスだけに限定しましょう。 -
黄色と青のパレットに第三のアクセントカラーを追加できますか？
はい—ティール、コーラル／オレンジ、またはミントがよく合います。3色目は最小限に（レイアウト全体の10〜15％以下に）抑えることで、デザインが雑然とならないようにしましょう。
次へ： パープルグリーンカラーパレット
