【保存版】色で選ぶグラデ背景・シーン別早見表12色
2026.08.12
はじめに
グラデーション背景を選ぶとき、いちばん時間がかかるのは色選びではないでしょうか。
デザインの良し悪しの前に、色は見た人の気分を決めてしまいます。同じ「50%OFF」の文字でも、赤いグラデの上に載せるのと、水色のグラデの上に載せるのとでは、伝わり方がまるで違います。
この記事では、よく使う12色について、どんな印象を与えるか・どんな場面に合うか・相方にどの色を選ぶときれいかをまとめました。迷ったときの早見表としてお使いください。
まずは大きく3つに分かれます
細かい話に入る前に、大枠だけつかんでおくと選びやすくなります。
| グループ | 色 | 与える印象 |
|---|---|---|
| 暖色 | 赤・オレンジ・黄 | 元気・急ぎ・食欲・親しみ |
| 寒色 | 水色・青・紺 | 誠実・清潔・冷静・涼しい |
| 中間色 | 緑・紫・ピンク | 安心・上品・やさしさ |
「買ってほしい」なら暖色、「信頼してほしい」なら寒色、「くつろいでほしい」なら中間色。ここだけ押さえておけば、大きく外すことはありません。
12色の早見表
1. 赤
印象 … 情熱・緊急・食欲・強さ 合う場面 … セール告知、飲食店、期間限定、スポーツ 相方におすすめ … オレンジ（王道）、濃いピンク（今っぽい）、黒（引き締まる） 注意 … 強い色なので、面積が大きいと疲れます。文字は白がほぼ一択です。医療や金融には向きません。
2. オレンジ
印象 … 元気・親しみ・カジュアル・あたたかい 合う場面 … イベント、キャンペーン、子ども向け、秋 相方におすすめ … 黄（明るく）、赤（力強く）、ピンク（やわらかく） 注意 … 高級感は出ません。上品にしたいときは避けてください。
3. 黄
印象 … 明るい・楽しい・注目・注意 合う場面 … セール、レジャー、注意喚起、夏 相方におすすめ … オレンジ（自然）、黄緑（さわやか）、白（軽やか） 注意 … 白文字は読みにくいです。黒文字にするとくっきり見えます。
4. 黄緑
印象 … 若々しい・新鮮・成長 合う場面 … 春、新生活、健康食品、教育 相方におすすめ … 緑（落ち着く）、黄（元気）、水色（さわやか） 注意 … 高級路線とは相性がよくありません。
5. 緑
印象 … 安心・自然・健康・エコ 合う場面 … カフェ、オーガニック、医療、園芸、リラックス 相方におすすめ … 黄緑（自然）、ターコイズ（清潔）、ベージュ（ナチュラル） 注意 … 濃すぎると重たくなります。淡めがおすすめです。
6. ターコイズ（青緑）
印象 … 清涼・清潔・洗練 合う場面 … 夏、水まわり、美容、クリニック、リゾート 相方におすすめ … 水色（王道）、緑（自然）、白（清潔） 注意 … 個性が強めなので、使いすぎると全体が同じ印象になります。
7. 水色
印象 … さわやか・自由・軽やか・涼しい 合う場面 … 夏、IT・テック、告知、スポーツ 相方におすすめ … 白（定番）、青（自然）、ピンク（今っぽい） 注意 … 淡いので白文字が飛びます。黒文字にしてください。
8. 青
印象 … 信頼・誠実・知的・クール 合う場面 … ビジネス、金融、教育、ITサービス、告知全般 相方におすすめ … 水色（王道）、紺（重厚）、紫（今っぽい） 注意 … 食欲を落とす色なので、飲食には向きません。迷ったらこれというくらい万能です。
9. 紺（ネイビー）
印象 … 高級・落ち着き・重厚・格式 合う場面 … 士業、フォーマル、高級商材、夜のイベント 相方におすすめ … 青（自然）、紫（深み）、金色系（高級感） 注意 … 暗いぶん縞（バンディング）が出やすい色です。書き出しの品質にご注意ください。
10. 紫
印象 … 神秘・上品・個性・非日常 合う場面 … 占い、コスメ、推し活、夜、アート 相方におすすめ … ピンク（王道）、青（クール）、紺（深み） 注意 … 好き嫌いが分かれる色です。淡くすると受け入れられやすくなります。
11. ピンク
印象 … かわいい・やさしい・恋・女性的 合う場面 … 美容、ハンドメイド、推し活、バレンタイン、春 相方におすすめ … 紫（王道）、オレンジ（元気）、白（清楚） 注意 … 濃いピンクと淡いピンクでは印象がまったく違います。濃い＝元気、淡い＝やさしいと覚えてください。
12. モノトーン（黒〜グレー）
印象 … 洗練・モダン・都会的・静か 合う場面 … アパレル、写真、高級商材、テック 相方におすすめ … 濃紺（深み）、白（コントラスト）、1色だけ差し色 注意 … いちばん縞が出やすい組み合わせです。暗い部分の書き出しは慎重に。
シーン別・逆引き
「色から選ぶ」のではなく「場面から選ぶ」ときは、こちらをどうぞ。
| 場面 | 第一候補 | 第二候補 |
|---|---|---|
| セール・値引き告知 | 赤 | オレンジ |
| 新商品のお知らせ | 青 | ターコイズ |
| ハンドメイド作品の紹介 | ピンク | ベージュ寄りの黄緑 |
| 推し活・ファン向け | 紫 | 濃いピンク |
| カフェ・飲食 | 緑 | オレンジ |
| 美容・コスメ | ピンク | 紫 |
| ビジネス・お仕事 | 青 | 紺 |
| 夏のイベント | 水色 | ターコイズ |
| 秋・冬のイベント | オレンジ | 紺 |
| 高級・特別感 | 紺 | モノトーン |
色を選ぶときの3つのルール
1. 迷ったら「同系色2色」
青→水色、ピンク→紫のように、近い色同士をつなぐのがいちばん失敗しません。移り変わりが自然で、どんな内容にもなじみます。
2. 色数は2色まで
3色以上つなぐと、まとまりが急激に失われます。どうしても3色にしたいときは、両端の色を近づけて、真ん中に1色はさむ構成にすると破綻しにくくなります。
3. 「読む人にどう感じてほしいか」で選ぶ
内容そのものより、受け取ってほしい気持ちで選んでください。同じお知らせでも、「急いで！」なら赤、「安心して」なら青です。それでも迷ったら、自分のブランドカラーに近い同系色を選べば外れません。
色を決めたあとにやること
色を決めたら、次は文字が読めるかどうかです。グラデーション背景は場所によって明るさが変わるので、文字の置き方にコツがあります。くわしくは別の記事にまとめてあります。
もうひとつ、暗い色を使うときは縞（バンディング）にご注意ください。紺やモノトーンのグラデーションは、書き出し方によって帯状の縞が出ることがあります。
CanvasRootでグラデーション素材をさがす
CanvasRootでは、この記事で紹介した色のグラデーション背景素材を無料で配布しています。
よくある質問
色の意味は、国によって違いませんか？
違います。たとえば白は日本では清潔さを表しますが、弔事の色とされる国もあります。この記事は日本国内での一般的な受け取られ方を基準にまとめています。海外向けの発信では、その地域での意味をお調べください。
ブランドカラーが決まっている場合は？
ブランドカラー＋その同系色でグラデーションを作るのがいちばんです。ブランドの印象を保ったまま、単色よりリッチに見せられます。
12色以外の色を使いたいです
もちろん大丈夫です。表にある中でいちばん近い色を探して、その説明を参考にしてください。たとえばベージュなら「オレンジ」と「緑」の中間として読むと、だいたい合います。
まとめ
- 大枠は暖色＝行動を促す／寒色＝信頼を得る／中間色＝安心させる
- 迷ったら青。いちばん万能です
- 色は2色まで、同系色が失敗しない
- 黄色の上に白文字は読めません。必ず黒文字に
- 紺・モノトーンは縞に注意
- 選ぶ基準は「内容」より「読む人にどう感じてほしいか」
色が決まると、デザインは半分終わったようなものです。この表を、迷ったときの出発点にしてください！
関連ページ
→ Tips&使い方
