おすすめパステルブルー＆イエロー配色20選｜色コードと活用ポイント

パステルブルーとイエローのカラーパレットは、涼やかな落ち着きと晴れやかな暖かさを融合させ、軽やかで親しみやすく、見やすい印象を作ります。現代的なUIや春のブランディング、柔らかさと明確さを両立したい印刷デザインに特に人気です。

以下では、使いやすいパステルブルーとパステルイエローの配色例とHEXコード、さらに実践的なコツやAIプロンプトもご紹介しています。コピーしてマッチするビジュアルの生成にご活用ください。

なぜパステルブルー×イエローパレットが優れているのか

パステルブルーは穏やかさと広がりを感じさせ、パステルイエローは優しい楽観性でデザインが冷たくなりすぎるのを防ぎます。合わせることで「空＋陽光」のバランスが生まれ、見た人に瞬時に親しみを与えます。

どちらも明るいトーンのため、余白を活かした軽やかなレイアウトに重ねやすく、現代的なブランディングや誌面的なウェブデザイン、清潔感と親しみやすさが必要なパッケージに理想的なカラースキームです。

重要なのはコントラスト管理です。文字やアウトラインには深いスレートやネイビーを使い、読みやすさを保ちましょう。イエローはハイライトやアクション、ラベルなどの主要部分に限定して使うと、パレットが計算された印象となり、ぼやけません。

20種類以上のパステルブルー×イエローカラーパレット（HEXコード付き）

1）陽だまりの空のピクニック

HEX： #A7D8FF #FFE38A #FFF7E6 #B9E7D0 #6B7A8F

雰囲気： 明るく、軽やか、親しみやすい

おすすめ用途： カフェブランディングや夏のメニューデザイン

淡い空の下のピクニックのように cheerful で breezy な配色は、ぼやけず軽やかさをキープします。ソフトブルーをベースに、暖かなイエローを価格やボタン、特別項目のハイライトに。クリーム色で余白をつくり、スレート色でテキストやアウトラインを読みやすく。コツ：グリーンミントのアクセントは小さなアイコンだけに使い、レイアウトを落ち着かせましょう。

media.ioで生成した「陽だまりの空のピクニック」画像例

Media.io

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

無料で今すぐ試す

2）レモン雲のナーサリー

HEX： #B7E1FF #FFF2A6 #FFD1DC #F7F7FF #7D8EA3

雰囲気： やさしく、心地よく、遊び心がある

おすすめ用途： ナーサリーのインテリアやベビーシャワーのテーマ

窓辺で光を浴びてのお昼寝のように穏やかな配色。パウダーブルーは広い面に、レモントーンは暖かさを加える小さなアクセントに。ブラッシュピンクは星やハート、枠線など細部に。グレーブルーは文字とアウトライン用。コツ：パネルごとにアクセントは一つに絞り、キャンディストアのような印象を避けましょう。

media.ioで生成した「レモン雲のナーサリー」画像例

3）海辺のバタークリーム

HEX： #9FD3FF #FFE6A1 #FFF1D6 #C7D8FF #5C6B73

雰囲気： リラックス、海辺、クリーン

おすすめ用途： ライフスタイルブログヘッダーやトラベル投稿

波と暖かい砂が出会うようなリラックス配色。ブルーを主役にバタークリームイエローを柔らかな注目ポイントに。暖かいアイボリー背景、深いグレーブルーはナビやリンクに。コツ：2種類のブルーの間に微妙なグラデーションを入れると、新たな色を加えず奥行きが生まれます。

media.ioで生成した「海辺のバタークリーム」画像例

4）朝市のテント

HEX： #8CCBFF #FFE08C #FFFDF4 #D8F3DC #3D4A5A

雰囲気： フレッシュ、明るい、整然

おすすめ用途： マルシェポスターや出店サイン

朝の市場の縞テントのように明るさと親しみやすさがあり、遠くからも見やすい配色。イエローはヘッダーや値札に使い、重要情報が目立ちます。ニアホワイトはレイアウトを軽やかに、ダークブルーグレーはタイポグラフィやアイコンのアンカー。コツ：グリーンはオーガニックや季節のハイライトにサポートとして。

media.ioで生成した「朝市のテント」画像例

5）やわらかなレトロダイナー

HEX： #B0D9FF #FFEB99 #FFC9B9 #F2F2F2 #4E5D6C

雰囲気： ノスタルジック、陽気、ウェルカム

おすすめ用途： レトロインスパイアのブランドやソーシャルプロモ

クラシックダイナーのボックス席のようにノスタルジックかつ陽気。ブルーで背景や形をつくり、イエローはバッジや期間限定。ピーチアクセントは親しみやすいハイライトになり、特にSNSグラフィックにおすすめ。コツ：タイポグラフィは太くシンプルに、遊び心を引き立てましょう。

media.ioで生成した「やわらかなレトロダイナー」画像例

6）スプリングフィールドステーショナリー

HEX： #A9D6FF #FFE58F #FCEFE3 #D4E5FF #7A869A

雰囲気： 軽やか、整然、楽観的

おすすめ用途： 招待状やRSVPカード

新しい紙と朝日を思わせる軽やかな配色は、フォーマルなレイアウトにも楽観的な雰囲気を与えます。エレガントさを保つにはクリーム色をメインキャンバスにし、イエローは細い罫線やモノグラム、小さな装飾に。2つのブルーで見出しやサブテキストの階層を作り、グレーブルーで本文の読みやすさを。コツ：イエローは少し控えめな色にプリントし、テクスチャ紙の過飽和を防ぎましょう。

media.ioで生成した「スプリングフィールドステーショナリー」画像例

7）海辺のジェラート

HEX： #9ED7FF #FFE78A #FFF5CF #CFF3E6 #2F3A4A

雰囲気： 爽やか、スイート、夏らしい

おすすめ用途： アイスクリームショップのパッケージやラベル

海辺のジェラートのように爽やかでスイートなカラーは軽やかですが、棚でも印象的。淡いイエローはラベル部分に、ブルーはブランドブロックやパターンに。ミントグリーンはフレーバーインジケータに、深いネイビーは原材料テキスト用。コツ：波やスプリンクル模様は2色だけで描いて、明瞭さを保ちましょう。

media.ioで生成した「海辺のジェラート」画像例

8）天窓のワークスペースUI

HEX： #B8E4FF #FFEEA8 #E9F5FF #DDE3EA #556070

雰囲気： 穏やか、集中、モダン

おすすめ用途： ダッシュボードUIやデータパネル

机に差し込む daylight のように穏やかで集中できる配色。ペールブルーは主要画面、イエローはアラートや切り替え、アクティブ状態など重要箇所だけ。クールなニュートラルはカードや区切りの鮮明さに、スチールテキストカラーはコントラストを保ちます。コツ：イエローはスクリーン毎に一つのアクションに制限し、階層を整理しましょう。

media.ioで生成した「天窓のワークスペースUI」画像例

9）バターデニムブランド

HEX： #A2D4FF #FFE07A #FFEFE0 #BFD7EA #2D3748

雰囲気： 自信、暖かみ、現代的

おすすめ用途： スタートアップブランドやロゴシステム

デニムにバターのハイライトが加わったような自信と暖かさ。パステルブルー×イエローの配色はブルーを主ブランドに、イエローはアイコンやタグのシグネチャーマークで輝きます。暖かみのあるオフホワイトで親しみやすさを保ち、深いスレートは強いロゴタイプを支えます。コツ：イエローをダーク背景でアクセシビリティテストしてから採用しましょう。

media.ioで生成された、バターデニムブランディングの画像例

10）爽やかなオンボーディング画面

HEX： #BDE7FF #FFF0A3 #F6FAFF #D7F0E8 #6A7B8C

雰囲気： 歓迎的、明快、支援的

おすすめ用途： アプリのオンボーディングやチュートリアルスライド

明るい朝のウォークスルーのように歓迎的で明快なパレットは、説明を親しみやすく感じさせます。最も明るい色調を広い背景に使い、イエローは進捗ドットやステップ番号、重要なボタンのみに取っておきましょう。ミントのアクセントは成功状態の強調に最適です。イラストはシンプルで線画にし、パステルが主役となるようにしましょう。

media.ioで生成された、爽やかなオンボーディング画面の画像例

11）ラッパスイセンの植物画ウォッシュ

HEX： #A6DBFF #FFED8B #FFF9E8 #BEEBD5 #6E7C87

雰囲気： 春らしい、繊細、芸術的

おすすめ用途： 植物イラストやグリーティングカード

手作り紙に水彩のラッパスイセンのように春らしく繊細な色調が、自然な明るさを感じさせます。ブルーは空のウォッシュ部分に、イエローは花びらや花粉や小さなスタンプ形に。クリーミーな背景でソフトに保ち、くすんだグレーブルーはキャプションや細かい文字に最適。重ねたウォッシュでテクスチャを作り、色数を増やし過ぎないのがコツです。

media.ioで生成された、ラッパスイセンの植物画ウォッシュの画像例

12）落ち着いた教室スライド

HEX： #B2E0FF #FFEAA0 #FFFFFF #D9E2EC #394B59

雰囲気： 明快、忍耐強い、親しみやすい

おすすめ用途： 教室のプレゼンテーションや学習用デッキ

よく照らされた教室のように明快で忍耐強いパレットは、あらゆる年代に内容を親しみやすくします。白と淡いブルーを主なスライド面に使い、イエローはセクションヘッダーや重要ポイント用に。クールグレーは区切りやチャート用、深いブルーでタイトルの読みやすさを保ちます。イエローを文字背景に使う場合は最小限にし、コントラストを確保しましょう。

media.ioで生成された、落ち着いた教室スライドの画像例

13）アーティザンソープラップ

HEX： #A0D7FF #FFE59A #FFF3E8 #E2F0FF #566573

雰囲気： 手作り、清潔、穏やか

おすすめ用途： スキンケア包装や商品ラベル

新鮮に包まれた石鹸のように手作りで清潔な色調は、やさしさとケアを伝えます。温かいクリーム色をラベルのベースにし、ブルーはブランドパネルや成分表示に。イエローは小さなシールや香り表示用として使うことで、高級感が出ます。パステルの雰囲気を保つため、マット紙やミニマルな箔を選びましょう。

media.ioで生成された、アーティザンソープラップの画像例

14）ブルーバードブランチメニュー

HEX： #93D0FF #FFE17E #FFF7EA #CDECCF #34495E

雰囲気： 晴れやか、社交的、招待的

おすすめ用途： ブランチメニューやレストランテーブルカード

週末のブランチのテラスのように晴れやかで社交的な色調は、新鮮で歓迎的な雰囲気です。パステルブルーとイエローの彩色パレットは、明るい背景と明確なカテゴリ構造が必要なメニューにぴったり。クリーミーなトーンと深いネイビーを文字に組み合わせ、イエローは特別メニューや追加項目のハイライトに。アイコンはシンプルで、イエローは各ページの2～3箇所だけに繰り返しましょう。

media.ioで生成された、ブルーバードブランチメニューの画像例

15）ミニマルECヒーロー

HEX： #B6E3FF #FFECA3 #F8FAFC #E6F2FF #475569

雰囲気： 清潔、モダン、信頼感

おすすめ用途： ECランディングページやヒーローセクション

整然とした店舗のように清潔でモダンなパレットは、信頼感と操作のしやすさを感じさせます。レイアウト構造や商品カードに淡いブルー系を使い、イエローは主要なアクションに引き付ける役割。ほぼ白の背景で商品写真が閉塞感を感じにくく、スレート色で文字の読みやすさをサポート。ボタンはイエローで塗りつぶし、二次アクションはブルー枠のみにしましょう。

media.ioで生成された、ミニマルECヒーローの画像例

16）サンセットボードウォークポスター

HEX： #8FD0FF #FFD86B #FFF1C1 #A7E6D7 #22303C

雰囲気： エネルギッシュ、空気感、懐かしい

おすすめ用途： 旅行ポスターやイベントプロモ

黄金の時間帯のボードウォークのようにエネルギッシュで空気感のある色合いですが、派手になりすぎません。ブルーを主面に、濃いイエローオレンジをヘッドラインのハイライトでインパクトを出します。やわらかなクリームとアクアでシンプルなイラストやバッジに深みを。ダークインク色は文字と主要アウトライン専用にし、パステル感を保ちましょう。

media.ioで生成された、サンセットボードウォークポスターの画像例

17）データビズパステル

HEX： #AEE0FF #FFEE9A #EAF2FF #D0E8FF #334155

雰囲気： プロフェッショナル、穏やか、読みやすい

おすすめ用途： レポート、チャート、アナリティクスデッキ

よく設計されたレポートのようにプロフェッショナルで穏やかな色調は、データへの集中を保ちます。濃いスレートを軸やラベルに使い、ブルーとイエローを主要系列に割り当てて瞬時に明瞭さを。超淡いブルーは繊細なグリッドラインや背景帯に使え、視覚ノイズがありません。イエローは1系列限定で使い、意味性を保ちましょう。

media.ioで生成された、データビズパステルの画像例

18）遊び心のあるソーシャルタイル

HEX： #A8DEFF #FFE87D #FFF2D5 #C9F2E7 #1F2937

雰囲気： 明るい、弾む、若々しい

おすすめ用途： インスタ投稿やストーリーテンプレート

日差しの中の紙吹雪のように明るく弾む色調は、スクロールの瞬間用にぴったり。パステルブルーとイエローの組み合わせは、各タイルごとに主色を決めアクセントを残す方法が特に効果的です。濃インク色はパンチ効いた見出し用に、クリームはステッカーやアイコン周りの余白に。イエローはシリーズ全体で同じ角に繰り返し、統一感を出しましょう。

media.ioで生成された、遊び心のあるソーシャルタイルの画像例

19）アイスクリームカート包装

HEX： #9AD6FF #FFE48A #FFF6E1 #FFD0E8 #4B5563

雰囲気： 甘い、懐かしい、遊び心

おすすめ用途： デザート包装や季節プロモ

アイスクリームカートのベルのように甘く懐かしいパレットは、遊び心はあるが清潔感も保ちます。ブルーを主包装色にし、イエローはフレーバー名やプロモーションへのハイライト。ブラッシュピンクは限定版の親しみやすさ、グレーで成分やバーコードの読みやすさを。パターンは小さくシンプルにし、パステルが印刷で濁らないように。

media.ioで生成された、アイスクリームカート包装の画像例

20）フレッシュ旅行ブログヘッダー

HEX： #B3E6FF #FFED94 #FDF6E3 #C6F1DF #0F172A

雰囲気： フレッシュ、楽観的、クリア

おすすめ用途： ブログヘッダーやニュースレターバナー

新しい旅程ページのようにフレッシュで楽観的な色調は、クリアで読みやすい印象。鮮やかなネイビーで見出しとナビゲーションを際立たせ、背景のやわらかい色で空気感を保ちます。イエローはキーワード背面や小さなボタンに、ミントは軽やかなアクセントに。背景形状は大きく低コントラストにし、メールレイアウトで雑然としないように。

media.ioで生成された、フレッシュ旅行ブログヘッダーの画像例

パステルブルー×イエローと相性の良い色は？

ニュートラルカラーは最も合わせやすいです：温かみのあるクリーム、やわらかなアイボリー、冷たいライトグレーはパステルブルーとパステルイエローを「意図的」「デザインされた」印象にします。タイポグラフィやUIアイコンには、深いスレートやネイビーを選びましょう。

さらなるフレッシュさが欲しいなら、ミントやシーフォームグリーンを少しだけ加えてみてください。特にライフスタイル、フード、ウェルネス系のビジュアルで効果的です。甘い印象（ナーサリー、デザート、遊び心あるソーシャル）なら、ブラッシュやピーチのアクセントもブルー・イエローと相性抜群です。

より高級感や成熟した印象が欲しい場合、彩度を落とし、くすんだ金属（ブラスなど）をラインやバッジ、ロゴマーク部分に少しだけ加えましょう。

実際のデザインでパステルブルー×イエローのパレットを使う方法

明快な階層から始めましょう：パステルブルーを主面色（背景、大きな形、カード）にし、パステルイエローを注目色（CTA、価格タグ、ラベル、ハイライトキーワード）に。パレットがバランス良く、「全部淡い」ビジュアルになるのを防げます。

印刷の場合、イエローの試作は早めに行いましょう—淡いイエローは用紙やインク密度により変化しやすいです。スクリーンではイエローと濃い文字色（スレートやネイビー）を組み合わせて、白文字は避けアクセシビリティを確保しましょう。

新しい色を増やさず深みを出したい場合、ブルー内でのティントや繊細なグラデーション、紙の質感や水彩のウォッシュ、ソフトノイズを加え、同じHEX系統のまま仕上げましょう。

AIでパステルブルー×イエローパレットのビジュアルを作成する

HEXコードはあるけどリアルなモックアップ（メニュー、パッケージ、ポスター、UI画面）が必要な場合は、AIを使うと一貫したビジュアル作成が速く進みます。上記プロンプトはパステルブルー・イエローの雰囲気を保ちつつ、清潔で読みやすい画像のため設計されています。

より良い結果を得たい場合、まずシーンを明確に記述しましょう（例：ダッシュボードUIモックアップや結婚式招待セット）、次に「主色：パステルブルーとやわらかなイエロー」と記載し、「ミニマルタイポグラフィ」や「クリーンな背景」など詳細で締めくくると効果的です。

次へ： ブラスカラーパレット