4色グラデーションは、「世界観が作れる」「差別化ができる」という強みがあります。
一方で、順番と役割を間違えると一気に失敗してしまいがち…。
この記事では、
をまとめてご紹介いたします。
4色グラデーションの基本ルール

カラフルな4色グラデーションを考える場合、以下のルールを押さえておきましょう。
カラフルグラデーションでは、色相環をなぞる順番が基本です。
中間色は、彩度を下げたり、ぼかしすぎないようにしましょう。
カラフル4色グラデーション配色パターン集
ここからは、4色グラデーション配色を5つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①映え
G R A D A T I O N
王道のインスタグラム系グラデーション。
LPキービジュアル・サムネイルなどにおすすめです。
| カラー | カラーコード | RGB |
| オレンジ | #FFAE00 | 255, 174, 0 |
| ピンク | #EC4899 | 236, 72, 153 |
| パープル | #8C5BFF | 140, 91, 255 |
| ブルー | #00B1FF | 0, 177, 255 |
②ポップ
G R A D A T I O N
楽しくて元気なイメージのカラーグラデーションです。
イベント告知・SNSなどに最適。
| カラー | カラーコード | RGB |
| イエロー | #FFE252 | 0, 177, 255 |
| オレンジ | #FB923C | 251, 146, 60 |
| ピンク | #FF53AC | 255, 83, 172 |
| パープル | #9F3FFE | 159, 63, 254 |
③クール
G R A D A T I O N
ちょっと近未来感もある、デジタル系グラデーション。
ITサービス・UI背景向けです。
| カラー | カラーコード | RGB |
| グリーン | # | 34, 197, 94 |
| シアン | # | 6, 182, 212 |
| ブルー | # | 59, 130, 246 |
| パープル | #8B5CF6 | 139, 92, 246 |
④フレッシュ
G R A D A T I O N
さわやかでクリーンなイメージのグラデーション。
ヘルスケア・教育など、清潔感のある場面で使いやすいデザインです。
| カラー | カラーコード | RGB |
| イエロー | #FDE047 | 253, 224, 71 |
| ライム | # | 163, 230, 53 |
| グリーン | # | 34, 197, 94 |
| シアン | # | 34, 211, 238 |
⑤ゆめかわ
G R A D A T I O N
軽やかで、かわいらしい印象のグラデーション。
女性向けSNS・バナー・サムネイルなどで使用するのがおすすめです。
| カラー | カラーコード | RGB |
| ピンク | # | 249, 168, 212 |
| パープル | # | 192, 132, 252 |
| ブルー | # | 96, 165, 250 |
| シアン | # | 103, 232, 249 |
カラフルグラデーションのNG例
色相環の流れを無視してしまうと、一気に「事故感」が出ます。
隣り合う色でつなぐのが鉄則。
おしゃれにしようとくすませすぎてしまうと、汚れっぽく感じてしまいます。
カラフルなグラデーションでは、鮮やかさが命。
のっぺり感を避けるため、色には明度に必ず差をつけましょう。
まとめ|4色は“世界観設計”
4色カラフルグラデーションは、感覚だけで作ると失敗してしまいがち。
しかし、色相順・明度を押さえれば、一気にプロのグラデーションになります。


コメント