空色グラデーションは、見ているだけでさわやかで安心する気持ちになれる配色です。
難しい配色理論を考えなくても、「明るい青から少しずつ深い青へ」という流れを作るだけで、自然にまとまります。
この記事では、
をまとめてご紹介いたします。
背景・イラスト・SNS画像・装飾などの参考にもおすすめです。
空色グラデーションのシンプルな考え方

空色グラデーションを作るポイントは3つ。
これだけでOKです。
空色グラデーション配色パターン集
ここからは、空色グラデーション配色パターン集を5つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①王道|快晴の空
B L U E S K Y
お天気の良い、さわやかな晴れ空グラデーション。
背景・Webトップ・イラストなどの参考に。
| カラー | カラーコード | RGB |
| スカイブルー | # | 126, 200, 227 |
| ライトスカイ | # | 214, 236, 250 |
| スカイホワイト | # | 247, 251, 255 |
②やさしい|朝焼け前の空
B L U E S K Y
静かな朝の、落ち着いた印象の空色グラデーション。
ヒーリング系・子ども向け・ナチュラルデザインにおすすめです。
| カラー | カラーコード | RGB |
| ソフトブルー | # | 138, 182, 214 |
| ペールブルー | # | 201, 230, 245 |
| ミルキーブルー | # | 238, 245, 255 |
③くっきり|昼空
B L U E S K Y
明るくて開放感のある、昼空グラデーション。
バナー・イベント・夏向けデザインなどに最適です。
| カラー | カラーコード | RGB |
| ディープスカイ | # | 41, 182, 246 |
| シアンブルー | # | 129, 212, 250 |
| ライトシアン | # | 224, 247, 250 |
④深め|夕方の空
B L U E S K Y
やさしい印象の、夕方の空のグラデーション。
読み物系・背景・イラストなどに使いやすいデザインです。
| カラー | カラーコード | RGB |
| スモークブルー | # | 92, 142, 220 |
| ダスクブルー | # | 144, 202, 249 |
| ペールブルー | # | 220, 239, 255 |
⑤ふんわり|雲のある空
B L U E S K Y
軽やかな雰囲気の、雲がふわふわ浮いている空のグラデーションです。
装飾・背景・SNS画像などに。
| カラー | カラーコード | RGB |
| ライトブルー | # | 187, 222, 251 |
| クラウドブルー | # | 227, 242, 253 |
| クラウドホワイト | | 255, 255, 255 |
空色グラデーションで気にしなくていいこと
空色グラデーションでは、難しいことは考える必要はありません。
「空っぽいかどうか」だけ意識すれば十分です。
まとめ
空色グラデーションは、作り込まなくても自然にきれいに見える万能配色です。
明るめの空と、白をうまく混ぜることで、誰でも心地いい空色が作れます。


コメント