空の色パレット22選｜組み合わせ・HEXコード・AIデザイン参考例

空色パレットは、デザインを穏やかで開放的、かつ瞬時に読みやすく感じさせる最も簡単な方法のひとつです。パステル調の朝の青から深い「ブルーアワー」のネイビーまで、空の色合いは自然に視線を導き、視覚的なストレスを加えません。

以下に、HEXコード付きの20以上の空色パレットアイデアと、UIやブランディング、ポスター、イラストで使うための実践的なヒントをまとめました。あなたの気分やメッセージに合った空色スキームを選ぶ参考にしてください。

空色パレットがなぜこんなに効果的なのか

空色パレットが親しみやすく感じられるのは、毎日目にしているからです。そのため自然で信頼でき、目に優しいと認識されます。こうした馴染みやすさは、背景やレイアウト、ブランドシステムなど、明瞭さが求められる場面のデフォルトカラーとして強みになります。

多くの空色組み合わせは、明るい色調（ティント）に基づき、1つ深いアンカーシェードを加えています。これにより、強いコントラストなしに階層を作ることができます。UIでは、穏やかな面に、押しやすいボタンやリンクが共存する形が一般的です。

空色トーンは、暖かいコーラルや砂色のニュートラルなど様々なアクセントとも相性がよく、全体のパレットを組み直すことなく、雰囲気をクールから温かみあるものまで自在にシフトできます。

20以上の空色パレットアイデア（HEXコード付き）

1）クラウドラインパステル

HEX： #EAF4FF #CFE7FF #A9D2FF #7FB7E6 #FFF3E6

ムード： 軽やか、優しい、楽観的

おすすめ用途： ウェルネス向けランディングページUI

朝の柔らかな雲のように軽やかで重さのないトーンは、清潔感がありつつ無機質にはなりません。ウェルネスやスキンケアなど、落ち着いて読みやすいページに最適です。温かみのあるオフホワイトやミニマルなラインアイコンと組み合わせてレイアウトを軽く保ちましょう。使い方のコツ：深いブルーはボタンやリンク部分に限定して、静かでありつつ操作性の高いUIを実現します。

media.ioで生成されたクラウドラインパステルの画像例

Media.io

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

無料で今すぐ試す

2）クリアヌーンブルー

HEX： #E3F2FF #9ED3FF #4AA7FF #1D6FD6 #0B2D5C

ムード：自信、鮮明、モダン

おすすめ用途：テックブランドのヒーローバナー

昼の陽射しのようにすっきりと自信を感じさせるブルーは、画面上で大胆かつ現代的な印象を与えます。明るいアズールを見出しや重要な形状に使い、ネイビーをアンカーとしてコントラストとアクセシビリティを維持しましょう。クールなグレーや細身のジオメトリックなフォントと組み合わせるのもおすすめ。使い方のコツ：グラデーションは淡いブルーから中くらいのブルーへ緩やかに移行させ、スポーティな印象を避けましょう。

media.ioで生成されたクリアヌーンブルーの画像例

3）ホライゾンヘイズ

HEX： #F4F7FB #D7E2EE #A8B8CC #6C84A1 #3C4E63

ムード：静か、霞んだ、洗練された

おすすめ用途：編集系ウェブサイトレイアウト

遠い地平線のように静かで霞んだ雰囲気のミックスは、編集系で品の良い印象を演出します。グレーブルーが長文ページでも目に優しく洗練された印象を保ちます。温かみのある紙色の背景と抑えめなセリフ書体で見出しをつけると良いです。使い方のコツ：最も暗いトーンはナビゲーションやキャプションにのみ使い、ページ全体を軽やかに保ちましょう。

media.ioで生成されたホライゾンヘイズの画像例

4）グレイシャーエア

HEX： #F7FBFF #DDF1FF #B7DBF5 #9CB2FF #3E5B8A

ムード：新鮮、氷のよう、静寂

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

氷河の上の空気のように新鮮で澄んだクールブルーが、信頼とシンプルさ、穏やかな誘導感を与えてくれます。オンボーディングフローなどで使うのに適しています。柔らかな丸みのある形と十分なホワイトスペースを組み合わせて、呼吸しやすい印象を維持。使い方のコツ：ラベンダー系ブルーはハイライトだけに使い、パレットがシャープになり過ぎないようにしましょう。

media.ioで生成されたグレイシャーエアの画像例

5）コースタルミスト

HEX： #F2FCFF #BFEFFF #79D4E6 #2FA6B4 #1E4D57

ムード：涼風、清潔、沿岸

おすすめ用途：トラベルブログのヘッダー・カード

海岸から流れ込む霧のように涼やかで爽やかなアクア系トーン。トラベルブログのヘッダーやカテゴリータグ、情報カードなどにぴったりです。砂色ニュートラルや明るい写真と組み合わせてナチュラルな雰囲気に。使い方のコツ：深いティールをテキストオーバーレイに使って、淡い色の上でも読みやすくしましょう。

media.ioで生成されたコースタルミストの画像例

6）サンライズオーバールック

HEX： #EAF6FF #B8E0FF #6FB7FF #FFB38A #8A4B3A

ムード：温かみ、希望、映画的

おすすめ用途：ブランドキャンペーンのSNS投稿

夜明けの青に差し込む光のように、落ち着きと親しみやすさを両立したセット。コーラル系ピーチのアクセントが、空色パレットに人間味と親しみやすさを加え、キャンペーン向けグラフィックに最適です。クリーム色の背景やシンプルなシルエットと組みあわせると、視覚的な雑多さを避けられます。使い方のコツ：温かいアクセントはCTAや小さな形にのみ使い、ブルーが主役になるよう意識しましょう。

media.ioで生成されたサンライズオーバールックの画像例

7）カイトデイライト

HEX： #F0FBFF #A7DFFF #4BA4FF #FFD45A #FF6F61

ムード：遊び心、明るい、エネルギー

おすすめ用途：子供向け教育アプリのイラスト

凧が舞う開放的な空のように明るく活気のあるカラーは、ネオンになりすぎず、元気で親しみやすい学習用グラフィックやバッジ、キャラクターイラストに最適です。十分な白を使い、アウトラインは柔らかくして、明るく cheerful な雰囲気を保ちましょう。使い方のコツ：黄色はメインのハイライトに、コーラルは小さな強調部分だけに使い、視覚的ノイズを避けましょう。

media.ioで生成されたカイトデイライトの画像例

8）シーラスミニマル

HEX： #FFFFFF #E8F3FF #BFD9F2 #6F95C6 #2A3E57

ムード：ミニマル、洗練、プロフェッショナル

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

薄いシーラス雲のようにミニマルで洗練されたミックスは、インターフェースを端正でプロフェッショナルに保ちます。淡いブルーが広い白領域を柔らかくし、ネイビーがデータやナビの明快な階層を作ります。シンプルなチャートや細めの区切りで重いブロック感を避けましょう。使い方のコツ：ミッドブルーは選択状態のみ利用し、内容が多くてもダッシュボードが穏やかな印象になるように。

media.ioで生成されたシーラスミニマルの画像例

9）ブルーアワーインク

HEX： #0B1020 #1B2A4A #2E4E7E #7EA6D9 #E9F1FF

ムード：ムーディー、エレガント、映画的

おすすめ用途： マガジンカバーのレイアウト

夜の直前の最後の光のように、ムーディーでエレガント。このインクのようなブルーは映画のワンシーンや高級感を感じさせます。一番濃い色をベースにし、明るいブルーをタイポグラフィやアクセントに重ねましょう。可読性を高めるには明るいオフホワイトと組み合わせて、本文は短めに。使用のコツ：マストヘッドの背面に柔らかなグラデーションを一つだけ加え、テクスチャーは控えめにして奥行きを出しましょう。

media.ioで生成したブルーアワーインクの画像例

10）雨上がりのストリート

HEX： #F6FAFF #D4E2F1 #9BB4CE #5C7B98 #2B3B4A

ムード：クール、落ち着き、都会的

おすすめ用途：コンサートポスターグラフィック

雨上がりの舗道のようにクールで落ち着きのある、都会的な大人のブルー。大胆なタイポグラフィが際立つレイアウトや控えめな質感が映えます。オフホワイトのペーパー調や、ワンポイントでメタリックインクを加えると高級感も演出。使用のコツ：一番濃い色を主見出しに使い、遠くからも読みやすく。

media.ioで生成した雨上がりのストリートの画像例

11）北極の窓

HEX： #FAFDFF #E1F4FF #BDE8FF #5FB3E6 #124B6B

ムード：クリーン、冷たさ、信頼感

おすすめ用途：コスメパッケージのコンセプト

北極の窓から差し込む光のようにクリーンで涼しげ、信頼と清潔感が伝わるトーン。ピュアさや潤い・透明感が欲しいスキンケアパッケージに最適です。マットホワイト素材とミニマルなサンセリフのラベルでモダンに。使用のコツ：一番濃い色は小さな文字だけに使い、パッケージ全体は明るく清潔感を保ちましょう。

media.ioで生成した北極の窓の画像例

12）プールサイドグラス

HEX： #E9FFFF #B9F6FF #66D9F0 #2AA7C7 #0E3E52

ムード：フレッシュ、光沢感、夏らしさ

おすすめ用途：飲料製品の広告

プールの反射のように新鮮でツヤのあるブルーは、一瞬で夏を感じさせます。飲料広告にぴったりで、涼しげでクリーンな印象を与えたい時に最適。空色のトーンは、一番明るい色をディープティールの影や余白と組み合わせてバランス良く。使用のコツ：製品の背後に一番明るい色をハローとして使い、冷たく爽やかな雰囲気を演出。

media.ioで生成したプールサイドグラスの画像例

13）デニムスカイライン

HEX： #F1F6FF #C8D7F0 #8AA7D6 #4B6FA8 #22334F

ムード：安定感、クラシック、信頼感

おすすめ用途：コーポレートブランディングキット

着古したデニムが自然光に照らされているような安定感とクラシックでタイムレスなブルー。会社のブランドシステム全体、文具からスライド資料・SNSヘッダーに最適。暖かみのあるグレーやアクセントには抑えたゴールドなどを。使用のコツ：ネイビーの使い所を一貫させ、ブランドシステム全体で統一感を維持しましょう。

media.ioで生成したデニムスカイラインの画像例

14）アイシーラベンダードリフト

HEX： #F6F4FF #E0E7FF #B9C7FF #7FA2FF #334C7A

ムード：夢のよう、柔らか、モダン

おすすめ用途：結婚式招待状セット

黄昏時のラベンダーの霞のように夢見心地で柔らかな色合い。甘すぎないロマンチックさが特徴。真っ白な紙や繊細なタイポグラフィと組み合わせればモダンな空模様パレットに。最も濃い青で控えめなラインフラワーを添えるとエレガントさアップ。使用のコツ：中間のペリウィンクルは縁取りや小さな装飾だけにし、全面背景には使わない。

media.ioで生成したアイシーラベンダードリフトの画像例

15）サンドバー・ブリーズ

HEX： #F8FBFF #D6ECFF #9CCEFF #EEDBC8 #6D7F8D

ムード：リラックス、海辺、ウェルカム感

おすすめ用途：ビーチハウスのインテリアムードボード

淡い砂の上を吹き抜けるそよ風のようにリラックス＆ウェルカム。サンディニュートラルがブルーの冷たさを和らげ、ムードボードやインテリア選びに最適。明るい木やリネン素材、温かみのある白色ペイントと好相性。使用のコツ：サンドカラーは広い面に使い、ブルーはアートやテキスタイルのアクセントに。

media.ioで生成したサンドバーブリーズの画像例

16）スターリットアズール

HEX： #060B1A #12234B #224C8F #3F8CFF #D9ECFF

ムード：ドラマチック、未来的、集中

おすすめ用途：音楽ストリーミングアプリUI

夜空に輝く星のようにドラマチックで集中力のある、未来的なブルー。コントラストや明快さが重要なダークモードのアプリにおすすめ。アクティブな部分はエレクトリックブルーで、アートワークやハイライトには明るい色を。使用のコツ：一番明るいブルーは、大きなパネルでは使わずポイント使いに留めましょう。

media.ioで生成したスターリットアズールの画像例

17）ペーパープレーン・スライド

HEX： #F9FCFF #D9EEFF #A6D3FF #5A98D6 #2C3F55

ムード：明快、親しみやすい、整理された

おすすめ用途：スタートアップ向けピッチデックテンプレート

紙飛行機が空を滑空するように明るく親しみやすいブルー。プレゼン資料にシャープさと親近感を両立できます。サポート用のテキストは暖かみのあるグレー、主要な数値などはシンプルアイコンで。使用のコツ：中間色のブルーをセクション見出しの色に統一しデッキ全体の一体感を。

media.ioで生成したペーパープレーンスライドの画像例

18）シーグラスモーニング

HEX： #F2FFFF #CFF8FF #9DE8F2 #6DB6C2 #3C6A74

ムード：やさしさ、ナチュラル、ポジティブ

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

引き潮で見つけたシーグラスのような柔らかなトーンは、手作り感や爽やかさを演出。水彩の植物画や軽いパッケージ、落ち着いたSNSグラフィックに最適。クリーム色の紙や細い鉛筆ラインを合わせて繊細に。使用のコツ：一番明るい2色を重ねて奥行きを作り、急に濃いティールにはしないように。

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

19）スカイライン・ネオンポップ

HEX： #07142B #123A8A #2EC5FF #B6F2FF #FF4D8D

ムード：ボールド、夜遊び、高エネルギー

おすすめ用途：クラブイベントフライヤー

都市のネオンが濃紺の夜空を切り裂くようなアテンション重視配色。シアンとピンクはインパクト十分ですが、他のダークブルーと一体感あり。タイポグラフィは太く、十分な余白で明るい色が混乱せず意図的に見えるように。使用のコツ：ピンクは一つのフォーカル要素（例：日付や一本のストライプなど）に限定しましょう。

media.ioで生成したスカイラインネオンポップの画像例

20）ストームブレイク・コントラスト

HEX： #F5FAFF #B7D6F2 #6A93C5 #2F4B6B #F26B4F

ムード：ドラマチック、大胆、ダイナミック

おすすめ用途：スポーツプロモポスター

嵐が割れて光が差し込むようなドラマチックでダイナミックな配色、瞬時にコントラストを演出。暖色アクセントがクールなブルーに緊迫感を加え、プロモやカウントダウングラフィックに最適。質感は控えめに使用、背景は読みやすさ重視で基本は淡色に。使用のコツ：暖色はキーナンバーやCTAのみに使い、ベースのブルーを活かす。

media.ioで生成したストームブレイクコントラストの画像例

21）フェザーライト・グラデーション

HEX： #FFF7FB #E6F1FF #BFD8FF #8CB6FF #5B6B8C

ムード：柔らか、夢見心地、空気感

おすすめ用途：ビューティーブランドのメールヘッダー

フェザーのようなグラデーションが地平線を漂うように、パステルトーンでやさしさ・高級感。第一印象を落ち着かせ、商品フォーカスが欲しい美容系メールに最適。見出しはミニマルなセリフ体＆たっぷりの白でエレガントに。使用のコツ：ヘッダーはごく薄いグラデに、本文は単色で明確にメリハリを。

media.ioで生成したフェザーライトグラデーションの画像例

22）オープンエアニュートラル

HEX： #FAFBFC #E8EEF5 #C7D6E8 #7FA3C7 #2A4E75

ムード：穏やか、バランス、汎用性

おすすめ用途：ポートフォリオWebテーマ

静かな都市に広がる空気のように穏やかでバランスがよく、クリエイティブな作品を引き立てます。やさしいグレーとブルーの組み合わせは写真やケーススタディ、長めのキャプションにもぴったり。ブランド色から1色だけ暖色を抜粋して加えるのもおすすめ。使用のコツ：リンクやホバーには中間のブルーを使い、うるさくならず注目を誘導。

media.ioで生成したオープンエアニュートラルの画像例

空色に合う色は？

空色は、コーラル、ピーチ、やわらかなオレンジなど温かみのあるアクセントと合わせると相性抜群です。全体の雰囲気を親しみやすく保ちながら、エネルギーをプラスできます。より穏やかな組み合わせが良ければ、サンディベージュやウォームクリーム、ペーパーホワイトを加えて海辺の陽だまりのような印象にも。

モダンなUIやテック系ブランディングには、クールグレー、チャコール、ディープネイビーと合わせて構造やアクセシビリティを持たせましょう。夢見心地なムードを目指すなら、ラベンダーやペリウィンクルが空色とぴったり組み合わさります。

アクセントを加える際は、一色の暖色に絞るのがポイント。主張しすぎず、必要な箇所にだけ視線を集められます。

実際のデザインで空色パレットを使う方法

まずは役割ごとに色を割り当て：一番明るい空色は背景、ミッドブルーはコンポーネント（カード、チップ、セクション）、一番濃いネイビー／ティールはテキストやナビゲーション、コントラスト用に。これで空気感を保ちつつ可読性もキープできます。

ブランディング用途では、代表的なブルー1色とサポートとなるニュートラル1色（クリームやクールグレー）を定めて。暖色アクセント（例：コーラル）はCTAやバッジ、重要なタイミングだけで使い、落ち着きを保ちつつコンバージョンも意識した配色にしましょう。

イラストやソーシャルコンテンツでは、淡い色から濃い色に一気に切り替えるのではなく、近い色調を重ねて奥行きを演出します。微妙なグラデーションや柔らかな影を使うことで、重いテクスチャを使わずに空のような雰囲気を生み出せます。

AIで空色パレットのビジュアルを作成

空のカラースキームを実際に確認したい場合は、AIを使ってUI画面、ポスター、パッケージ、ソーシャルテンプレートの高速モックアップを生成しましょう。これにより、全体的なデザインシステムを作り込む前に、コントラストや雰囲気、階層構造を簡単に検証できます。

Media.ioでは、プロンプトを貼り付けて、スタイル（ミニマルUI、水彩画、ポスター、パッケージ）を指定し、パレットがしっくりくるまで素早く繰り返し作成可能です。最良の結果をブランドキットやクライアント向けの参考資料として保存しましょう。

次へ： コーラルレッド・カラーパレット