ライトブルーの配色アイデア20選とおすすめHEXコード

ライトブルーは、デザインしやすい色のひとつです：開放感があり、穏やかで現代的ながら、デジタルや印刷でも親しみやすく見えます。

以下に20個のライトブルーの色の組み合わせ（HEXコード付き）と、すぐにクリーンなモックアップを生成できる実用的なヒントやAIプロンプトを紹介します。

ライトブルーパレットがうまく機能する理由

ライトブルーは理想的な位置にあります：伝統的なブルーと同じく清潔感や信頼感がある一方、ダークネイビーよりも柔らかく、より親しみやすい印象です。そのため、ブランドやUI、招待状など穏やかで明瞭な雰囲気を求めるシーンに最適です。

「空や水」の印象を与えるため、ライトブルーの配色は視覚的な空間を広げます。背景やカード、大きなパネルに使うことで、レイアウトに余裕を持たせつつ、空白感を感じさせません。

最後に、ライトブルーは安定したニュートラル（白、ウォームクリーム、クールグレーなど）と組み合わせ、最も濃い色をテキストや主要CTAに使うことで、印刷時も安定した階層構造を保てます。結果、やさしい印象と明確な階層が両立します。

20以上のライトブルーカラーパレットアイデア（HEXコード付き）

1）コースタルグラス

HEX： #b7e3ff #7cc8ff #2f7fc1 #f8fbff #d7e2ea

雰囲気： さわやか、クリーン、海辺

おすすめ用途： 旅行サイトのランディングページヒーロー（2D UIモックアップ）

さわやかで朝日が差したようなライトブルーの組み合わせは、シーグラスや澄んだ空を思わせます。深い海のブルーを見出しやCTAに使い、淡いブルーは広い背景エリア担当でまぶしさを抑えます。白とクールグレーと合わせることでレイアウトがモダンで呼吸しやすくなります。ポイント：最も濃いブルーは主要アクションに限定し、階層の分散を避けましょう。

media.ioによって生成されたコースタルグラスの画像例

Media.io

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

今すぐ無料で試す

2）スカイリネン

HEX： #cfe9ff #9fd3ff #6aaad6 #fff3e6 #d6c7b8

雰囲気：やわらかい、エアリー、暖寒バランス

おすすめ用途：ライフスタイルブログのヘッダーやセクションスタイリング

やわらかくエアリーで、青空と日差しで暖められたリネンのように感じられます。このライトブルーパレットは、編集記事のヘッダーや引用、穏やかな背景パネルに美しく使えます。やさしいハイライトとしてピーチクリームをバッジやカテゴリチップに加え、本文テキストは濃いデニムブルーでコントラストをつけましょう。ポイント：ベージュは余白やサイドバー色として使うことで、白の硬さを軽減できます。

media.ioによって生成されたスカイリネンの画像例

3）アイスミントスプラッシュ

HEX： #bfe9ff #88d8ff #63e6d4 #f3fff9 #2b5d6b

雰囲気：新鮮、スポーティー、活気

おすすめ用途：フィットネスアプリのオンボーディング画面（2D UIモックアップ）

新鮮でスポーティーな組み合わせは、ミントが効いたアイスウォーターのようです。アクアグリーンは進捗や成功色として使い、クールブルーはオンボーディンググラデーション担当です。深いティールと白を組み合わせると、CTAセクションなどのコピーやアイコンが読みやすくなります。ポイント：ミントアクセントは15％未満に抑えることで、インターフェースが穏やかになります。

media.ioによって生成されたアイスミントスプラッシュの画像例

4）パウダーデニム

HEX： #d2e7ff #a7c9e8 #6b8fb6 #2f3f52 #f7f2ea

雰囲気：クラシック、落ち着き、信頼感

おすすめ用途：コンサルティングファームのブランドアイデンティティ

クラシックで落ち着いたブルーは、履き込んだデニムや静かな自信を思わせます。最も濃いスレートはロゴや見出しに使い、ミッドブルーは仕切り線やアイコンなど補助的グラフィックに。暖かいオフホワイトは無機質さや事務的な印象を和らげ、特にステーショナリーやスライドに効果的です。ポイント：十分な余白を作ることで、濃いトーンが企業然としすぎるのを防げます。

media.ioによって生成されたパウダーデニムの画像例

5）アークティックドーン

HEX： #e3f4ff #b6ddff #7fb8e6 #f9fafb #c7d0da

雰囲気：静か、ミニマル、明るい

おすすめ用途：SaaSダッシュボードの背景やデータカード（2D UIモックアップ）

静かで明るく、早朝の雪の光を思わせる色です。ダッシュボードで、チャートに明瞭さを求めるが強いコントラストは避けたい場面に理想的。ほとんどの面はほぼ白や淡いブルーにして、ミッドブルーは選択状態や主要指標に使います。ポイント：冷たいグレーでカードをアウトラインすると、シャドウよりもモダンでクリーンなグリッドになります。

media.ioによって生成されたアークティックドーンの画像例

6）クラウディーハイドランジア

HEX： #c8e6ff #a9c8ff #8e9bff #f1f3ff #3c4a66

雰囲気：ロマンチック、フローラル、やや夢幻的

おすすめ用途：春のイベントポスターのデザイン

ロマンチックでフローラル、曇り空の下の紫陽花の花びらを連想させます。ポスターやSNSグラフィックで、やわらかい印象を与えたい時に最適ですが、可読性も損なわない配色です。ペリウィンクルはタイトルに、ディープスレートは見出しに、ラベンダーホワイトは余白に。ポイント：背景には淡いブルーからペリウィンクルへのグラデーションを入れるとフラットな塗りよりも効果的です。

media.ioによって生成されたクラウディーハイドランジアの画像例

7）グレイシャーピーチ

HEX： #cfeaff #8fcfff #ffb59a #fff2ea #4c6a82

雰囲気：親しみやすい、新鮮、歓迎感

おすすめ用途：カフェメニューフライヤー

親しみやすく、グレイシャーの空気とやわらかいピーチの朝焼けのようなライトブルーの組み合わせです。ピーチは価格や目立たせたい部分に、クールブルーはレイアウトやセクションヘッダーに、スレートブルーはタイポグラフィのキーに。デザインがパステルに傾きすぎないよう、スレートブルーで引き締めましょう。ポイント：ピーチは小さな繰り返しアクセントに使い、視線誘導を。

media.ioによって生成されたグレイシャーピーチの画像例

8）ブルーベリーミルク

HEX： #d9f0ff #b6dcff #6f9bd1 #6a4c93 #fff9f2

雰囲気：遊び心、温かみ、ほのかに幻想的

おすすめ用途：デザートショップのパッケージング

遊び心と温かみがあり、ブルーベリークリームややわらかいベーカリーの照明を思わせるパレットです。バイオレットはロゴやスタンプ、小さなイラストのアクセントとして使えます。温かいクリーム色はパッケージの主役にすることでブルーが食欲を損なわず引き立ちます。ポイント：印刷テストが大切なので、小さなバイオレット文字は濃くしてぼやけた縁を防ぎましょう。

media.ioによって生成されたブルーベリーミルクの画像例

9）シーサイドコーラル

HEX： #bfe7ff #74c6ff #00a6c8 #ff6f7d #fff1f4

雰囲気：鮮やか、夏らしい、元気

おすすめ用途：SNSプロモバナー

鮮やかで元気な組み合わせはプールの水や珊瑚色のリップティントを思わせます。明るいコーラルはプロモメッセージや割引バッジに効果的、他の背景やスカイブルーはやわらかな印象。ティールブルーはアイコンやボーダーに使うとくっきりしたエッジになります。ポイント：コーラルはバナー内の1〜2箇所のアクセントに限定し、スクロール中のユーザーの集中を維持しましょう。

media.io を使用して生成された海辺のサンゴの画像例

10) 雨の日オフィス

HEX： #c9e7ff #8bbfe6 #4e7ea6 #1f2a33 #f2f6f9

雰囲気： 集中、プロフェッショナル、穏やか

おすすめ用途： メールニュースレターテンプレート

集中して穏やかな雰囲気で、窓越しに降る雨のように、生産的な午後を思わせます。この淡いブルーのカラーパレットは、信頼感や明快さを重視しつつ、堅苦しくならないニュースレターに最適です。文字にはほぼ黒を、セクション見出しには中間のブルー、コンテンツブロックには淡いトーンを使用してください。ヒント: リンクは強いブルーで下線を付け、モバイルのアクセシビリティを保ちましょう。

media.io を使用して生成された雨の日オフィスの画像例

11) 綿菓子フェード

HEX： #cfe8ff #a7d0ff #ffb7d5 #ffe8f2 #ffffff

雰囲気： 甘い、若々しい、軽やか

おすすめ用途： 美容製品広告クリエイティブ

甘くて軽やか、柔らかな綿菓子雲と冷たい風が感じられます。見出しや注目商品ラベルには控えめなピンクを、全体の新鮮さにはブルートーンを活用してください。特に化粧品の場合、この空間の白さが清潔感を演出します。ヒント: 微妙なツートングラデーション背景を加え、平坦や過度に可愛くならないようにしましょう。

media.io を使用して生成された綿菓子フェードの画像例

12) 北欧ミニマル

HEX： #d6efff #a8d8ff #7aa7c7 #e9e6df #2a2f36

雰囲気： ミニマル、モダン、デザイン重視

おすすめ用途： ポートフォリオウェブサイトのテーマ（2D UIモックアップ）

ミニマルでデザイン重視、これらの淡いブルーの組み合わせはスカンジナビアのインテリアや淡い冬の光を連想させます。暖色のストーンニュートラルが、広い面でブルーが冷たくなりすぎるのを防ぎます。ナビと本文のテキストにはチャコール、ホバーステートや小さなUIハイライトには中間ブルーを使用してください。ヒント: 一つのブルーを主要色に決めて、ページ全体で一貫性を持たせましょう。

media.io を使用して生成された北欧ミニマルの画像例

13) スパ・セレニティ

HEX： #bfe8ff #7fd3d9 #d9f7f2 #ffffff #6f7c87

雰囲気： 癒やし、フレッシュ、ウェルネス

おすすめ用途： スキンケアパッケージラベルセット

癒やしとフレッシュ感、静かなスパルームに冷たい水と清潔なタオルの印象。ミントアクアは成分アイコンや認証マークなど小さなアクセントに最適です。ラベルのベースは白、パネルには柔らかなブルーを使うことで商品が軽やかで高級感を演出します。ヒント: グレーのテキストは思っているより少し濃く印刷することで、マット用紙でも読みやすさを保ちましょう。

media.io を使用して生成されたスパ・セレニティの画像例

14) ビンテージポストカード

HEX： #cfe6ff #97bce0 #caa47a #f6ecd9 #3d4f5c

雰囲気： ノスタルジック、暖かい、旅気分

おすすめ用途： レトロ旅行ポスター

ノスタルジックで日焼けした雰囲気、古いポストカードを日記に挟んだような印象です。この淡いブルーとサンドタンの組み合わせは、旅行ポスターやメニュー、物語性を求めるブランドにぴったり。クリーム色は紙のベースに、ブルーはブロックやシンプルなイラストに重ねて本格的なビンテージ感を演出します。ヒント: 写真やテクスチャをやや彩度を落とし、柔らかなトーンに合うよう調整しましょう。

media.io を使用して生成されたビンテージポストカードの画像例

15) ネオンブリーズ

HEX： #b8e4ff #4fc3ff #00e6ff #8a5cff #0b1020

雰囲気： エレクトリック、大胆、ナイトライフ

おすすめ用途： 音楽フェスティバルフライヤー

エレクトリックで大胆、夜空を切り裂くネオン看板のイメージ。暗いネイビーをベースに使い、鮮やかなシアンやバイオレットの輝きを引き立てます。明るいブルーはグラデーションや背景シェイプ、大きなエリアを柔らかく演出できます。ヒント: タイポは明るいトーンか暗いトーンどちらかに統一し、鮮やかな背景でコントラスト不足にならないように。

media.io を使用して生成されたネオンブリーズの画像例

16) ウィンターワエディング

HEX： #dbefff #b2d7ff #f6f2ff #ffffff #9aa3b2

雰囲気： エレガント、氷のよう、ロマンティック

おすすめ用途： ウェディング招待状セット

エレガントで氷のような印象、凍った窓やシルクリボンを思い起こさせます。淡いラベンダーホワイトがロマンティックさを加えつつ、クールでフォーマルな雰囲気を保ちます。グレーは細かい文字や封筒のディテールに、ブルーは枠線やモノグラム、水彩ウォッシュに使いましょう。ヒント: グレー要素にエンボス加工や箔押しを加えることで、新しい色を追加せずに高級感を演出できます。

media.io を使用して生成されたウィンターワエディングの画像例

17) スクールノートブック

HEX： #c9e7ff #8fd0ff #ffd56a #ffffff #2b3a4a

雰囲気： 明るく、学問的、親しみやすい

おすすめ用途： オンラインコースサムネイルセット

明るく親しみやすい雰囲気、清潔なノート用紙とハイライトマーカーのイメージ。イエローはレッスン番号やトピックバッジなど一貫したタグ色に、ダークブルーはサムネイルサイズでもタイトルの読みやすさを確保します。ヒント: 背景は主に白を保ち、青と黄色のアクセントがグリッド上で鮮明になるように。

media.io を使用して生成されたスクールノートブックの画像例

18) テックグラデーション

HEX： #bfe8ff #7fb9ff #3a7cff #1f2a75 #0a0f1f

雰囲気： ハイテク、洗練、自信

おすすめ用途： アプリスプラッシュ画面＆ログイン（2D UIモックアップ）

洗練されたハイテク感、深い海のグラデーションが冷たいスポットライトで照らされたような表現。ネイビーから明るいブルーへの強い縦グラデーションを作りましょう。UI要素はミニマルに配置し、背景で雰囲気を表現。淡いブルーはアイコンやサブボタンに使い、明快さを維持します。ヒント: グラデーションに微細なノイズテクスチャを加え、広い画面で色ムラを防ぎましょう。

media.io を使用して生成されたテックグラデーションの画像例

19) サマープールパーティ

HEX： #bde8ff #6dd6ff #2ee6c8 #ffea7a #ff6fb1

雰囲気： 楽しい、明るい、遊び心

おすすめ用途： バースデーパーティ招待フライヤー

楽しく爽やか、タイルで跳ねる陽射しとキャンディカラーのアクセント。淡いブルーカラーは、エネルギッシュだがネオン過ぎず、誕生日招待状に最適。アクアとスカイは背景の主要形状、黄色は要点、ピンクは名前や年齢に。ヒント: タイポは濃いニュートラルか深いティールで、明るいアクセントの上でも読みやすく。

media.io を使用して生成されたサマープールパーティの画像例

20) オーシャンフォグ

HEX： #d7f1ff #a8d9ff #6da6c7 #d9d5cf #4a5a66

雰囲気： 落ち着いた、成熟、海岸の静けさ

おすすめ用途： インテリアデザインムードボード

落ち着きと成熟、流木や石の上にかかる海の霧を思わせます。暖かいグレーベージュを基準色とし、ブルーが氷のようになりすぎず生活感を出します。深いスチールトーンはキャプションや素材ラベル、ムードボード内の小さなラインに最適。ヒント: マットなテクスチャと一つだけ光沢アクセントを組み合わせ、柔らかなコントラストを表現してください。

media.io を使用して生成されたオーシャンフォグの画像例

ライトブルーに合う色は？

淡いブルーは白やクールグレー、チャコールなどのクリアなニュートラルカラーと自然に組み合わさり、UIや印刷物の読みやすさを高めます。より暖かく柔らかい雰囲気が欲しい場合は、純白の代わりにクリームやサンドトーンに置き換えてください。

アクセントには、珊瑚やピーチなどのカラーが親しみやすいコントラストを生み、プロモーションや招待状、モダンブランドに最適です。ミントやアクアはフレッシュでスポーティさを強調、バイオレットやペリウィンクルは遊び心を加えても違和感がありません。

よりプレミアムや高コントラストを求める場合、淡いブルーにネイビーやほぼ黒を組み合わせましょう。パレットを穏やかに保ちながら、見出しやCTAの階層を強く表現できます。

ライトブルーカラーパレットを実際のデザインで活用する方法

カラーごとに役割を決めることが重要です: メイン背景（最も淡いブルーか白系）、カードの表面色、テキスト色（チャコールやネイビー）、CTAやハイライト用アクセント。これで「全てパステル」な平坦なデザインを避けられます。

UIでは淡いブルーを広い面（ヒーローグラデーション、パネル、空の状態）に活用し、強いブルーをボタンやリンクなどインタラクティブ要素に限定してください。印刷の場合は淡いブルーの彩度をやや落とし、必ず試し刷りで予期しない色変化を防ぎましょう。

ブランドで使う場合、アクセントカラーを大きなブロックより小さな部分（バッジ、アイコン、区切り線など）に繰り返し使うことで、認知性を高めつつ淡く空気感あるベースを壊しません。

AIでライトブルーパレットのビジュアルを作成する

淡いブルーパレットがリアルなレイアウトでどう振る舞うかを確認したい場合は、AIで素早くモックアップを生成しましょう。コントラストや階層、雰囲気をすぐ検証できます。

上記のいずれかのパレットをベースに、プロンプトを流用しつつ商品タイプ（アプリログイン、ポスター、パッケージなど）やHEXコードを差し替えてもOK。隣り合わせで比較できる一貫したバリエーションが得られます。

次へ： バースデーカラーパレット