朝焼けは、ピンク・オレンジ・紫が混ざるドラマチックな空の色。
エモい・幻想的・感情的なデザインに強く映えるグラデーションです。
この記事では、
をまとめてご紹介いたします。
Webデザイン・バナー・背景・資料などの参考にもおすすめです。
朝焼けグラデーションの基本ルール

朝焼けグラデーションは、ただオレンジとピンクを並べるだけでは再現できません。
朝焼けは、太陽の光が差し込むことで生まれます。
そのため、最も明るい部分に黄色〜白を入れるのが鉄則。
朝焼けの基本の流れは、
黄色・白 → オレンジ → ピンク → 紫・薄い青
この順番にすると、自然な朝焼けになります。
朝焼けは鮮やかですが、ほんの少しグレーや白を混ぜたふんわりとした色を使うのが正解。
朝焼けグラデーション配色パターン集
ここからは、朝焼けグラデーションパターン集を6つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①王道朝焼け
S U N R I S E
幻想的な雰囲気の、王道朝焼けグラデーション。
サムネ・バナー向けです。
| カラー | カラーコード | RGB |
| ナイトパープル | #584270 | 88, 66, 112 |
| ドーンピンク | #FF8BA7 | 255, 139, 167 |
| サンライズオレンジ | #FFC46B | 255, 196, 107 |
| モーニングライト | #FFF1C1 | 255, 241, 193 |
②ピンク朝焼け
S U N R I S E
ロマンチックなかわいい印象の朝焼け空。
女性向け・ブログ・美容系に最適です。
| カラー | カラーコード | RGB |
| ディープドーンパープル | #3A1C71 | 58, 28, 113 |
| サンライズピンク | #FF5F9E | 255, 95, 158 |
| アプリコットライト | #FFB199 | 255, 177, 153 |
| モーニンググロウ | #FFE3B3 | 255, 227, 179 |
③オレンジ朝焼け
S U N R I S E
ドラマチックな元気なオレンジの朝焼け。
LP・広告・サムネなどにも使えます。
| カラー | カラーコード | RGB |
| ディープドーンバイオレット | #2A0A66 | 42, 10, 102 |
| サンライズオレンジ | #FF7B1D | 255, 123, 29 |
| ゴールデンサン | #FFB347 | 255, 179, 71 |
| モーニングサンライト | # | 255, 226, 154 |
④やさしい朝焼け
S U N R I S E
ふんわりとしたやさしいカラーの朝焼けグラデーション。
WEB・背景・SNSなど、使いやすいデザインです。
| カラー | カラーコード | RGB |
| ナイトブルー | #42499F | 66, 73, 159 |
| パープルスカイ | #835395 | 131, 83, 149 |
| サンライズピーチ | #F88E8A | 248, 142, 138 |
| フレッシュオレンジ | #FDC8A2 | 253, 200, 162 |
⑤深い朝焼け
S U N R I S E
エモーショナルな、色の深い朝焼け。
背景・SNS画像などにもおすすめです。
| カラー | カラーコード | RGB |
| ディープナイトブルー | #300D6B | 48, 13, 107 |
| クリムゾンドーン | #AB2E2E | 171, 46, 46 |
| サンライズゴールド | #FDBB2D | 253, 187, 45 |
| モーニンググロウ | #FFF5CC | 255, 245, 204 |
⑥朝日の昇った朝焼け
S U N R I S E
朝日が昇って、空が明るくなった頃の空。
WEB・広告に向いています。
| カラー | カラーコード | RGB |
| ダスティブルー | #73ACD0 | 115, 172, 208 |
| ホリゾンブルー | #A4D6DE | 164, 214, 222 |
| ライトアプリコット | #FFD6AF | 255, 214, 175 |
| サンシャインイエロー | #FFEDB8 | 255, 237, 184 |
朝焼けと夕焼けの違い

朝焼けと夕焼けは似ているようで、実は全く違います。
| 朝焼け | 夕焼け |
|---|---|
| 黄色が強い | 赤・オレンジが濃い |
| 透明感がある | 紫が強い |
| 青が少し残る | 全体的に暗い |
黄色と透明感、これが朝焼け判定の基準です。
朝焼けグラデーションのNG例
赤や紫を入れすぎると、夕焼け・夜空っぽくなるので注意。
白を入れないと、光を感じられない空になってしまいます。
朝焼けは、4〜5色使うと美しく仕上がります。
まとめ
朝焼けは、紫を入れるとリアルな空感が増します。
暗い空から明るい空へ、黄色は最後に少量だけ入れるのがポイントです。


コメント