雨空のグラデーションは、静けさ・透明感・エモさを表現できる人気の空配色です。
青空より落ち着きがあり、曇り空よりもドラマチック。
この記事では、
をまとめてご紹介いたします。
Webデザイン・背景・資料などの参考にもおすすめです。
雨空グラデーションの基本ルール

雨空は「くすみ青+グレー+白」このバランスがすべてです。
雨空は、少しグレーが混ざったグレイッシュブルーが基本。
雨=雲なので、グレーが少ないと曇り空にも雨空にも見えません。
雨空は上が重く、暗いだけではなく下の方はふわっとした光を含ませるのがコツです。
雨空グラデーション配色パターン集
ここからは、雨空グラデーション配色パターン集を6つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
① 王道リアル雨空
R A I N Y S K Y
リアルで実写寄りな、王道の雨空グラデーション。
実写系・背景に◎。
| カラー | カラーコード | RGB |
| レイングレー | #4B5868 | 75, 88, 104 |
| ウェットブルーグレー | #6A7A8E | 106, 122, 142 |
| レインミストグレー | #97A6B8 | 151, 166, 184 |
| レインクラウドホワイト | #D8E0EA | 216, 224, 234 |
② しとしと静かな雨
R A I N Y S K Y
しとしと降る、やさしい雨空グラデーション。
美容系・女性向けにも使いやすいデザインです。
| カラー | カラーコード | RGB |
| ソフトレインブルー | #5F6D80 | 95, 109, 128 |
| ミスティグレー | #8393A6 | 131, 147, 166 |
| ペールレイングレー | #B3C0CF | 179, 192, 207 |
| ライトレインホワイト | #EEF3F8 | 238, 243, 248 |
③ 雨上がり直前の空
R A I N Y S K Y
少し明るめの、。希望感ある雨上がり直前の空。
Web背景・スライド背景・梅雨デザインなどにおすすめです。
| カラー | カラーコード | RGB |
| レインネイビー | #2B4675 | 43, 70, 117 |
| レインスカイブルー | #496C94 | 73, 108, 148 |
| クラウディブルー | #93AABC | 147, 170, 188 |
| スモークグレー | #CBD0D1 | 203, 208, 209 |
④ エモい雨空
R A I N Y S K Y
緑寄りのブルーを使った、アニメちっくな雨空グラデーション。
バナー・ポエム系世界観・動画サムネなどに。
| カラー | カラーコード | RGB |
| ダークティール | #104C60 | 16, 76, 96 |
| ティール | #368692 | 54, 134, 146 |
| ライトティール | #65B2BE | 101, 178, 190 |
| ミストグリーン | #C6E0CE | 198, 224, 206 |
⑤ 豪雨の空
R A I N Y S K Y
闇深い、ダークな印象の豪雨の空。
背景・Web背景・梅雨デザインにも向いています。
| カラー | カラーコード | RGB |
| ブラックネイビー | #051E34 | 5, 30, 52 |
| ストームネイビー | #264C65 | 38, 76, 101 |
| レイニーブルー | #688EB0 | 104, 142, 176 |
| ブルーグレー | #ABBFD2 | 171, 191, 210 |
⑥どんより 暗い雨空
R A I N Y S K Y
どんよりとしたくらい雨空のグラデーション。
スタイリッシュな雰囲気も併せ持つので、IT・資料背景にも使えます。
| カラー | カラーコード | RGB |
| クラウドブラック | #2D3641 | 45, 54, 65 |
| シャドウグレー | #46576A | 70, 87, 106 |
| パープルグレー | #777D90 | 119, 125, 144 |
| ダスティパープル | #AFAFC3 | 175, 175, 195 |
雨空をおしゃれにするコツ
アクセントに、くすみピンク・ネイビー・シルバーを少し入れると一気にプロ感がアップ。
逆に、原色赤・黄を入れると世界観が崩れてしまいます。
まとめ
雨空グラデーションは、静けさ・エモさ・透明感を出せる大人向け万能配色。
ポイントは、くすんだ青・グレーを使う、上を暗く、下は白で透明感。
これで一気に、「雰囲気ある雨空」になります。


コメント