2色グラデーションは定番ですが、3色になると「世界観」「奥行き」「感情表現」までコントロールできます。
ただし、やり方を間違えると一気にチープになるのも事実。
この記事では、
をまとめてご紹介いたします。
背景・KV・アイキャッチ・SNS画像などにおすすめです。
3色グラデーションの基本ルール

カラフルな3色グラデーションを考える場合、以下のルールを押さえておきましょう。
真ん中の色を軽視すると、汚く見えてしまうので注意。
カラフルな3色グラデーションでは、色の強さを楽しみましょう。
カラフル3色グラデーション配色
ここからは、カラフル3色グラデーション配色を6つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①トレンド|ピンク → パープル → ブルー
G R A D A T I O N
SNS向けの、トレンドカラフルグラデーション。
バナー・アイキャッチ画像などにも使いやすい色使いです。
| カラー | カラーコード | RGB |
| ピンク | # | 244, 63, 94 |
| パープル | # | 139, 92, 246 |
| ブルー | # | 59, 130, 246 |
②華やか|オレンジ → ピンク → パープル
G R A D A T I O N
やさしさも感じられる、あたたかいデザイン。
共感を得たい場面に最適です。
| カラー | カラーコード | RGB |
| オレンジ | #FB923C | 251, 146, 60 |
| ピンク | #F472B6 | 244, 114, 182 |
| パープル | #A855F7 | 168, 85, 247 |
③クール|シアン → パープル → ピンク
G R A D A T I O N
クールだけど、フェミニンな印象も持ち合わせたグラデーション。
アプリ・SNS広告・WebサービスKVなど、甘さを控えたい場面でも活躍。
| カラー | カラーコード | RGB |
| シアン | # | 6, 182, 212 |
| パープル | # | 124, 58, 237 |
| ピンク | # | 244, 114, 182 |
④さわやか|ライム → シアン → ブルー
G R A D A T I O N
スピード感やテック感のある軽快なカラー。
IT系・スタートアップはもちろん若年層向けにぴったりです。
| カラー | カラーコード | RGB |
| ライム | # | 163, 230, 53 |
| シアン | # | 34, 211, 238, |
| ブルー | # | 37, 99, 235 |
⑤エネルギッシュ|ピンク → レッド → オレンジ
G R A D A T I O N
勢いのある暖色系グラデーションは、斜めグラデーションが鉄板。
キャンペーン・イベント告知・エンタメ系と相性が良いです。
| カラー | カラーコード | RGB |
| ピンク | #FE007B | 254, 0, 123 |
| レッド | #FF1B00 | 255, 27, 0 |
| オレンジ | #FF9500 | 255, 149, 0 |
⑥テクノロジー|→ インディゴ → エレクトリックブルー
G R A D A T I O N
未来感のあるカラーリングは、斜めグラデーションが映えます。
IT・AI・映像系におすすめ。
| カラー | カラーコード | RGB |
| パープル | #B300B3 | 179, 0, 179 |
| インディゴ | #1E40AF | 30, 64, 175 |
| ライム | #5BFF68 | 91, 255, 104 |
3色グラデーションの黄金比

おすすめ配分は、濃:中:淡=50:30:20の比率。
中央色は、一番面積を取りすぎないのがコツです。
まとめ|3色は「設計」で差が出る
3色グラデーションは、色選びより「順番」と「役割」が重要です。


コメント