ブルーパステルイエローのカラーパレットは、穏やかで空気感のある青色と、暖かく優しい黄色を組み合わせることで、親しみやすく、現代的で、目に優しい印象を与えます。鮮やかすぎず、強いコントラストを避けて明るさを出したいUI、ブランディング、招待状などの定番コンビです。
以下は、すぐに使える20種のブルー＆パステルイエローパレット（HEXコード付き）と、バランス・可読性・雰囲気を損なわないアクセント追加のコツをご紹介します。
この記事の内容
ブルーとパステルイエローの組み合わせが優れている理由
パステルブルーは明快さや信頼感を、パステルイエローは暖かさと楽観的な雰囲気をもたらします。一緒に使うことで、過度に甘すぎたり子供っぽくならず、心地よく招き入れるようなバランスの取れた配色になります。
両方とも明度が高いため、全体として“呼吸する”ような軽やかさとUI親和性があり、クリーンなレイアウトやソフトなブランディング、優しいエディトリアルデザインに最適です。ポイントは、読みやすさや階層を確保するために濃い青（またはダーク系ニュートラル）をテキストに使うことです。
この組み合わせはアクセントも自由度が高く、ミントやアクアでフレッシュ感、ライラックやモーブでロマンチックさ、ネイビーで強めのコントラストを加えることができます。つまり、ブルーパステルイエローの配色はデザインシステム全体に簡単に展開できます。
20以上のブルーパステルイエローカラーパレット事例（HEXコード付き）
1) バタークリームスカイ
HEX： #A7C7FF #FFE8A3 #F7F9FF #9BD7D5 #7A8FBF
雰囲気： 軽やか、明るい、やさしい
最適用途： 子供向けブランドのランディングページUI
バタークリームのようなハイライトで澄んだ朝のような軽やかさ・親しみやすさ・前向きさを感じられる配色。ブルーパステルイエローパレットは、子供・家族・学びの場で、柔らかなのに退屈にならない演出が得意。余白やラウンドしたUIパーツと組み合わせて開放感を保ちましょう。ポイント：最も濃い青はCTA、イエローは小さなハイライトだけに留めるとまぶしさを防げます。
バタークリームスカイのイメージ例（media.ioによる生成）
Media.ioは、ブラウザ上で動画・画像・音声の作成＆編集ができるオンラインAIスタジオです。
2) サンリットデニム
HEX： #7FB2FF #FFE27A #F4F1EA #2F5EA8 #B6C2D9
雰囲気： 明るい、モダン、自信
最適用途： ストリートウェア商品の広告ポスター
明るいデニムブルーと日差しを浴びたイエローで、ハッキリしたスポーティさと親しみを両立。濃いネイビーが構造を作り、素朴なオフホワイトがレイアウトをクリーン＆高級感に保ちます。遠目にも目立つ鮮やかな広告やポスターに好適。ポイント：本文はネイビー、小さなバッジや価格・期間限定ラベルにイエローを。
サンリットデニムのイメージ例（media.ioによる生成）
3) レモンミストスタジオ
HEX： #B8D8FF #FFF1B6 #E9ECF3 #8AA0C8 #C7E7D7
雰囲気： 穏やか、整理された、パステル
最適用途： ウェルネスアプリのオンボーディング画面
落ち着いて少し霞んだトーンは、柔らかな日差しの静かなスタジオ風。淡いブルーとミルキーなレモンが画面上で安心感を与え、スレートブルーが見出しの序列作りに効きます。オンボードやリマインダー、進捗表示などに最適。ポイント：グレイッシュブルーでアイコン線を描くとシャープだけど優しいUIに。
レモンミストスタジオのイメージ例（media.ioによる生成）
4) シーグラスピクニック
HEX： #8FD0FF #FFEE93 #C8F1E8 #F8FBFF #4E7DB6
雰囲気： さわやか、夏らしい、軽快
最適用途： 春のピクニック招待フライヤー
海辺のガラスやレモネードのように新鮮で、遊び心はあるけど騒がしくはない配色。ティールミントがクールな青とバターイエローの間を自然に繋ぎます。インビテーションやカジュアルなイベントに即季節感を出したいときに。ポイント：見出しは濃い青、ミントは細枠やパターン使いで上品に。
シーグラスピクニックのイメージ例（media.ioによる生成）
5) パウダーブルーダッフォディル
HEX： #9EC5FF #FFE58B #FFF9E8 #6A87B8 #D6E2FF
雰囲気： 柔らかい、晴れやか、上品
最適用途： スキンケアブランドのアイデンティティ
やわらかなパウダーブルーと水仙色の暖かさで、エレガントで爽やかな印象を演出。コントラストも刺激が弱く、ブルーパステルイエロー配色はスキンケア・美容・敏感肌向けポジショニングに理想的。ミニマルなセリフ見出しやクリーム背景と併せて上品に仕上げましょう。ポイント：黄色はラベルのワンポイント印刷、青系はブランドの基盤に。
パウダーブルーダッフォディルのイメージ例（media.ioによる生成）
6) クラウディレモネード
HEX： #BFD9FF #FFF0A8 #DDE4F2 #A6E3D7 #5C79A9
雰囲気： ほっとする、やさしい、リラックス
最適用途： メールニュースレターテンプレート
曇り空のレモネードのように居心地が良く、読みやすいパレット。中間ブルーがテキストの基盤になり、薄いイエローがセクションごとの温かみや親しみを添えます。はっきりとした伝達が必要なニュースレターにも最適ですが、個性も演出。ポイント：背景は淡いブルーグレー、イエローは見出しや小さなコールアウトに。
クラウディレモネードのイメージ例（media.ioによる生成）
7) ヴィンテージポストカード
HEX： #90B3E7 #F8E39A #F3EFE6 #C89CB2 #446A9F
雰囲気： ノスタルジック、ロマンチック、やわらかい
最適用途： 旅行ブログのヘッダー＆ヒーロービジュアル
色あせたポストカードのようなノスタルジックさ。淡い青とまろやかな黄色、少量のダスティモーブをミックス。旅の語りやライフスタイルブログ、エディトリアルなヒーロー画像に感情をのせたいときに。粒状テクスチャやエレガントなセリフ見出しで“昔ながら”の雰囲気を演出。ポイント：モーブは最小限に、区切り線やリンクのみに使用すれば統一感UP。
ヴィンテージポストカードのイメージ例（media.ioによる生成）
8) プレイルームポップ
HEX： #6FB2FF #FFE16A #FFFFFF #FFB6C8 #2E62B8
雰囲気： ポップ、元気、インパクト
最適用途： おもちゃ屋のプロモポスター
元気な青と明るい黄色で、ブロックやステッカーのような楽しさ。ピンクを少し加えてよりポップに（でも主張しすぎない）。おもちゃの販促・キッズイベント・季節のセールに。ポイント：大きな数字や短い言葉の背景にイエローを置けば認識しやすく、高いアクセシビリティもキープ。
プレイルームポップのイメージ例（media.ioによる生成）
9) カームクリニック
HEX： #A6D2FF #FFF2C2 #E6F1FF #B9E6D3 #5A7FAF
雰囲気： 安心感、清潔、プロフェッショナル
最適用途： 医療予約管理UI
明るい待合室にやわらかい光が差し込むようなパステル配色。濃いブルーが信頼感を担い、薄いイエローがインターフェイスの冷たさを和らげます。予約やフォーム、患者用ポータルなど、穏やかな明瞭さが重要な用途に最適。ポイント：濃い青のテキストは最も明るい背景上に、イエローはステータス表示等の小要素のみに。
media.ioによって生成された落ち着いたクリニックのイメージ例
10) ブランチメニュー
HEX： #84B8F4 #FFE8A8 #FFFDF6 #E6C7A6 #3F6FA8
雰囲気： 暖かく、居心地が良く、カジュアルシック
最適用途： カフェメニューのデザイン
週末のブランチのように暖かくて落ち着く配色で、クリーミーなベースと柔らかな黄色がフレッシュな青と並んで心地よい雰囲気です。タンのアクセントは食欲を引き立てる要素で、パレットをより安定感のある印象にしています。メニューやテーブルテント、カフェのポスターなど、可読性が重要な場所に最適です。使用のコツ：価格やセクションタイトルにはダークブルーを使用し、黄色はスペシャルの裏をハイライトバーにしてください。
media.ioによって生成されたブランチメニューのイメージ例
11) スプリング・ボタニカ・ウォッシュ
HEX： #A3CEFF #FFED9E #D3F3E3 #F6FAFF #6589B8
雰囲気： 春らしく、繊細で自然にインスパイア
最適用途： 水彩ボタニカルポスター
春らしく繊細なこれらのトーンは、雨上がりの水彩の花びらや新鮮な茎のようです。ミントグリーンがボタニカルな印象を与え、ブルーとイエローの組み合わせが軽快さと前向きな雰囲気を演出します。季節のウォールアートやガーデンイベントのポスター、優しいパッケージインサートに最適。コツ：白と淡いブルーをメインに使い、黄色はバランスのために数輪の花にプラスしてください。
media.ioによって生成されたスプリング・ボタニカ・ウォッシュのイメージ例
12) ギャラリー・ミニマル
HEX： #9BBEFF #FFEAA0 #F2F4F7 #2D4D7A #B7C7E6
雰囲気： ミニマル、キュレーション、モダン
最適用途： アートギャラリーイベントフライヤー
ミニマルで洗練されたこのセットは、静かなギャラリーの壁にスポットライトが当たっているよう。ネイビーはタイポグラフィの強いコントラストを演出し、ソフトな黄色は主張しすぎないハイライターのような役割に。イベントフライヤー、展示プログラム、クリーンなプロモグラフィックにおすすめ。コツ：全体はニュートラルに、黄色は日付や場所、または1つの重要な作品タイトルにのみ使用します。
media.ioによって生成されたギャラリーミニマルのイメージ例
13) パステル・テック・グラデーション
HEX： #74B7FF #FFF0B2 #CFE1FF #9DE1F0 #3E6CB3
雰囲気： フレッシュ、テック、前向き
最適用途： SaaSウェブサイトのヒーローセクション
フレッシュでテックな印象のこれらの色は、澄んだ空にかかった優しいグラデーションのようです。明るいブルーが現代的な勢いを持ち、淡い黄色がヒーローセクションをコーポレート感が強くなりすぎないように保ちます。SaaSのLPやフィーチャーハイライト、サインアッププロンプトに最適。コツ：ヒーロー背景にはブルーからアクアのグラデーションを使い、黄色はプライマリーボタンや小さなアイコンだけに配置します。
media.ioによって生成されたパステル・テック・グラデーションのイメージ例
14) ソフト・スポーツウェア
HEX： #5EA8FF #FFE374 #F1F6FF #97D6C9 #243E6B
雰囲気： アクティブ、クリーン、アップビート
最適用途： フィットネスアプリダッシュボードUI
アクティブでクリーンな印象を与えつつ、明るいブルーがエネルギーを、暖かい黄色が親しみやすさをプラス。深いインディゴは、メトリクスやテキストのベースとしてしっかりと読めるUIにします。フィットネストラッキングや習慣化アプリ、軽いゲーミフィケーション要素におすすめ。コツ：黄色は連続記録、バッジ、進捗インジケーターなど、モチベーションにつながる部分だけに適用し、気が散らないようにしてください。
media.ioによって生成されたソフト・スポーツウェアのイメージ例
15) ウェディングステーショナリー
HEX： #B0D0FF #FFF4C8 #FAFAF7 #D7C2E9 #6E87B8
雰囲気： ロマンチック、エアリー、繊細
最適用途： 結婚式招待状セット
ロマンチックでエアリーな印象の淡いブルーとバターのようなクリームは、軽いシルクや春の花のような雰囲気。優しいライラックのアクセントが、甘すぎない控えめなお祝い感を加えます。招待状セット、RSVPカード、パステル調のウェディングサイトに最適。コツ：テキストはダークブルーでくっきり印刷し、ライラックはモノグラムや縁取りなど小さい部分だけに使いましょう。
media.ioによって生成されたウェディングステーショナリーのイメージ例
16) サニー・ワークスペース
HEX： #8AC0FF #FFE77F #F5F2E8 #B0E9D6 #335F9F
雰囲気： 明るく、整理されて、親しみやすい
最適用途： プレゼンテーションスライドデッキテーマ
明るく整理されたこの配色は、デスクに差し込む太陽のようなワークスペースの印象。クリームのベースでスライドを落ち着かせ、黄色で強調しつつも強すぎる印象にはなりません。フレンドリーかつ信頼感を持たせたい資料、レポート、ワークショップに理想的。コツ：黄色はキーテイクアウトに使い、チャートはブルー系で一貫性を持たせましょう。
media.ioによって生成されたサニーワークスペースのイメージ例
17) アイスクリームトラック
HEX： #63B8FF #FFE45E #FFF7D6 #FF9FB8 #2756A4
雰囲気： 楽しい、懐かしい、明るい
最適用途： サマーフェスティバルポスター
楽しく懐かしい色合いは、晴れた空の下のアイスクリームトラックのサインのよう。ブルーとパステルイエローの中でも、この組み合わせはバブルガムピンクで遊び心がより強調されます。フェスやポップアップ、夏のプロモで、即座に楽しい印象と高い視認性を出したい場合に最適。コツ：ピンクは小さなアクセントにとどめ、ブルーと黄色で主な階層が整理されるようにしましょう。
media.ioによって生成されたアイスクリームトラックのイメージ例
18) クワイエット・ライブラリー
HEX： #A9C8F2 #F6E8A7 #EFE8DD #6B7F99 #C2D6F2
雰囲気： 柔らかく、思慮深く、アカデミック
最適用途： ブックカバーデザイン
柔らかく思慮深いパレットは、静かな読書室の古びたページに差し込む日差しのよう。暖かいベージュで安定感、控えめなブルーで学びの落ち着いた雰囲気を出します。読書向けカバー、ジャーナルや教育素材で、無機質にならないように温かみを持たせたいときに。コツ：タイトルには濃いグレーブルー、黄色はサブタイトルやバッジのやさしいハイライトに使いましょう。
media.ioによって生成されたクワイエット・ライブラリーのイメージ例
19) イブニング・ボードウォーク
HEX： #7EAEE8 #FFE082 #1F3F6B #F7F4EC #78D8C6
雰囲気： コースタル、バランス、少しムーディー
最適用途： 旅行アプリのフィーチャーバナー
コースタルでわずかにムーディーなこの組み合わせは、ディープブルーが夕刻の水辺、黄色がボードウォークの灯りの輝きを感じさせます。アクアのアクセントが爽やかなコントラストを加え、デザインが暗くなりすぎません。旅行バナーや目的地カード、ドラマをプラスしたいフィーチャーコールアウトにおすすめ。コツ：ダークブルーを背景に、黄色はキーアイコンや短いラベルだけに使いましょう。
media.ioによって生成されたイブニング・ボードウォークのイメージ例
20) モダンクラスルーム
HEX： #92C7FF #FFEEA6 #F3F7FF #8AB0D6 #4C6FA8
雰囲気： フレッシュ、親しみやすく、集中
最適用途： eラーニングコースカバー
新鮮で親しみのあるトーンは、太陽の入る現代的な教室やきれいなノートのよう。いちばん明るいブルーがレイアウトをクリーンに保ち、柔らかな黄色が強調や案内の役割を担います。ブルーとパステルイエローのパレットとして、コースカバー、レッスンサムネ、教員向けリソースなど、明快さを重視する用途に適しています。コツ：ミッドブルーをタイトルに、黄色はレッスン番号やプログレスタグなど小さなマーカーだけに利用します。
media.ioによって生成されたモダンクラスルームのイメージ例
ブルーパステルイエローと相性の良い色は？
ウォームホワイトやクリーム、淡いグレーブルーなどのソフトなニュートラルは、ブルーとパステルイエローの配色が「可愛すぎる」印象にならず、意図を持たせます。また、タイポグラフィや商品イメージ用のスペースを作ってくれます。
アクセントにフレッシュさを加えるなら、ミントやアクア、シーフォームがおすすめ――これらはブルーとイエローの間に位置し、配色を軽やかに仕上げます。よりロマンチックまたは編集的に仕上げたい場合は、ダスティライラックや控えめなモーブを加えると個性が出しやすくなります。
アクセシビリティ向上のためにコントラストを強める場合、ネイビーやディープスレート、インディゴをテキストやチャート、CTAに取り入れてください。ダークカラーがパステル背景をクリーンかつプレミアムに仕上げます。
ブルーパステルイエローパレットを実際のデザインで活用する方法
まず役割から決めましょう。パステルブルーはメインの背景に、深めのブルーはテキストやボタン用に、パステルイエローはハイライトカラーとして扱います。こうすることで可読性が保たれ、黄色の面積が大きくなりすぎて眩しくなるのを防げます。
UIでは、黄色は小さなインタラクティブ状態（バッジ、タグ、進捗、選択状態など）に使い、長文には明るいニュートラルをベースにしてください。印刷物では、黄色が光の当たり方で色味が変わりやすいので、用紙に試し刷りをしましょう。
配色をシステムとして完成させたい場合は、「橋渡し」役のアクセント（ミント/アクア）とニュートラル（クリーム/オフホワイト）を追加しましょう。これでスプリングのような雰囲気を損なわずに、レイアウトの自由度が上がります。
AIでブルーパステルイエローパレットのビジュアルを作成する
ランディングページやポスター、招待状、商品モックアップでブルー×パステルイエローの配色がどんな印象になるかをプレビューしたい場合、素早くコンセプト画像を作るのがおすすめ。コントラストや階層を、本格的なデザイン前にテストできます。
Media.ioのテキストtoイメージ機能を使えば、プロンプトを貼り付け、アスペクト比を指定し、ブランドやプロジェクトに合うまでパレットを何度でも調整できます。デザインの種類（UI、フライヤー、パッケージなど）やキーカラーも説明すると良いでしょう。
ブルー×パステルイエロー配色に関するよくある質問（FAQs）
-
パステルブルーと黄色の組み合わせはウェブサイトに向いていますか？
はい。パステルブルーは落ち着きと信頼感を、パステルイエローは暖かさを演出します。コントラストと可読性を高めるため、テキストやCTAにはダークブルー（ネイビーやインディゴ）を使いましょう。 -
パステルブルーとイエローの配色に最も合う背景色は？
ウォームホワイト、クリーム、ごく淡いブルーグレーの背景が最適です。レイアウトを軽やかに保ち、黄色の領域が広くなりすぎて眩しくなるのを防ぎます。 -
ブルー×パステルイエロー配色と相性の良いアクセントカラーは？
ミント、アクア、シーフォームはフレッシュさを、ライラックや控えめなモーブはロマンチックなニュアンスを、ネイビーやディープスレートはタイポグラフィやアイコンの強固な軸となります。 -
パステルイエローがスクリーン上できつく見えないようにするには？
黄色はバッジやハイライト、小さな形に限定して使い、長文の背景にはしないでください。迷ったら明るいニュートラルの上に黄色を配置し、テキストはダークブルーで。 -
どの業界でパステルブルーとイエローのブランドカラーがよく使われますか？
教育、子ども・家族向けブランド、ウェルネス、スキンケア、親しみやすいSaaSプロダクトなどで、この組み合わせは親しみやすさ、前向きさ、クリーンな印象からよく使われています。 -
ブルー×パステルイエローのパレットで高級感は出せますか？
はい。十分な余白と控えめな黄色のアクセント、タイポグラフィには濃いネイビーを合わせると上質な雰囲気に。ミニマルなレイアウトや高品質なフォント選びで、パステルも遊び心ではなくキュレーションされた印象に仕上げます。 -
自分のパレットに合ったモックアップを素早く作成するにはどうすればいいですか？
Media.ioのテキストから画像生成ツールを使い、レイアウト（例：「SaaSのヒーロー」「結婚式招待状」「商品ラベル」など）を説明し、さらにパステルブルーとバターイエローのアクセント、ニュートラルな背景を指定することで、パレットを正確にコントロールできます。
次へ： ブルーラズベリーカラーパレット
