黄色には、「明るい・楽しい・前向き」といったポジティブな印象があります。
一方で使い方を間違えると、目が疲れたり、子どもっぽくみえてしまう…
といった失敗が起こりやすい色でもあります。
この記事では、
をまとめてご紹介いたします。
Webデザイン・PowerPoint資料・バナー・図解などの参考にもおすすめです。
黄色グラデーション配色の基本ルール
黄色グラデーションを考える場合は、以下のルールを押さえておきましょう。
黄色はもともと明度が高いため、白に寄せすぎるとグラデーションの差が見えなくなります。
黄色グラデーションは、どの方向に寄せるかで印象が大きく変わります。
| 白寄り | やさしい・軽い |
| オレンジ寄り | 温かい・親しみ |
| グリーン寄り | 知的・クリーン |
最初に目的を決めてから色を選ぶのがポイントです。
いわゆる「真っ黄色」は扱いづらく、安っぽい印象になる原因に。
赤・緑・黒をを混ぜた黄色の方が、圧倒的に使いやすくなります。
黄色グラデーション配色パターン集
ここからは、黄色グラデーション配色パターン集を６つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①王道｜ペールイエロー→ウォームイエロー
G R A D A T I O N
やさしくて親しみのある、イエローグラデーション。
Webサイト背景・・教育・子育て系コンテンツに向いています。
| カラー | カラーコード | RGB |
| ペールイエロー | #FFF3B0 | 255, 243, 176 |
| ウォームイエロー | #F7C948 | 247, 201, 72 |
②ビタミン系｜ブライトイエロー→ゴールデンイエロー
G R A D A T I O N
元気でポジティブな、イエローの良さが出るグラデーション。
バナー・CTA・イベント告知などにおすすめです。
| カラー | カラーコード | RGB |
| ブライトイエロー | #FFE600 | 255, 230, 0 |
| ゴールデンイエロー | #FFB703 | 255, 183, 3 |
③オレンジ寄り｜クリームイエロー→アプリコット
G R A D A T I O N
温かみのあるオレンジ系は、黄色が浮きすぎない大人寄せの配色。
ライフスタイル・女性向けサービス・ナチュラル系デザインに最適です。
| カラー | カラーコード | RGB |
| クリームイエロー | #FFE08A | 255, 224, 138 |
| アプリコット | #F4A261 | 244, 162, 97 |
④グリーン寄り｜ライトイエロー→イエローグリーン
G R A D A T I O N
清潔感のあるグリーン系は、濃いグレー文字と相性◎。
医療・教育・IT資料などに使いやすいデザインです。
| カラー | カラーコード | RGB |
| ライトイエロー | #F1FA8C | 241, 250, 140 |
| イエローグリーン | #C6FF40 | 198, 255, 64 |
⑤ゴールド寄り｜シャンパンイエロー→ダークゴールド
G R A D A T I O N
高級感のあるゴールド系は、フラットよりも影・写真と合わせると◎。
ブランド紹介・高価格帯サービス・ブライダル系と相性がいいです。
| カラー | カラーコード | RGB |
| シャンパンイエロー | #F5E6A8 | 245, 230, 168 |
| ダークゴールド | #C9A227 | 201, 162, 39 |
⑥くすみ系｜ダスティイエロー→スモークイエロー
G R A D A T I O N
落ち着きのあるくすみ系は、派手さを抑えたいときの救世主。
社内資料・説明スライドなど、実務向けのデザインです。
| カラー | カラーコード | RGB |
| ダスティイエロー | # | 234, 223, 180 |
| スモークイエロー | # | 191, 166, 106 |
黄色グラデーションの黄金比
黄色グラデーションの黄金比は、濃 → 淡 = 65：35。
明るい色は余白専用にし、濃い色を主役にしましょう。
黄色グラデーションのNG例
黄色は主張が強い色なので、設計が重要です。
まとめ｜黄色は「調整力」で差が出る
黄色グラデーションは、明るさだけで作ると失敗しやすい配色。
寄せる方向・明度差・使う面積を意識すれば、非常に使いやすい色になります。
コメント