緑は失敗しにくい反面、「無難・地味」に見えやすい色でもあります。
この記事では、
をまとめてご紹介いたします。
PowerPoint、Webデザイン、バナー、SNS、UIの参考にもおすすめです。
緑グラデーションの基本ルール

緑グラデーションを考える場合は、以下のルールを押さえておきましょう。
緑は混ぜすぎが一番のNGです。
緑グラデーション配色パターン集
ここからは、緑グラデーション配色を7つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①堅実|フォレストグリーン → スレートグリーン
G R A D A T I O N
信頼感も感じられる、王道グリーングラデーションです。
企業資料・IR・報告書など、どんな用途でも使いやすいデザイン。
| カラー | カラーコード | RGB |
| フォレストグリーン | # | 6, 78, 59 |
| スレートグリーン | # | 60, 113, 112 |
②大人|モスグリーン → オリーブグレー
G R A D A T I O N
品の良さが感じられる、大人な配色です。
講座資料・女性向けビジネス・ライフスタイル系におすすめ。
| カラー | カラーコード | RGB |
| モスグリーン | # | 63, 98, 18 |
| オリーブグレー | # | 107, 114, 128 |
③都会的|ディープティール → グレイッシュティール
G R A D A T I O N
知的で、洗練された雰囲気の落ち着きのあるグリーングラデーション。
IT・Web・UI背景などに使いやすい組み合わせです。
| カラー | カラーコード | RGB |
| ディープティール | # | 19, 78, 74 |
| グレイッシュティール | # | 95, 127, 122 |
④やさしい|セージグリーン → クレイグリーン
G R A D A T I O N
やわらかなグリーンが、安心感をもたらしてくれるカラー。
教育・医療系など、圧をかけたくない資料向きです。
| カラー | カラーコード | RGB |
| セージグリーン | # | 132, 169, 140 |
| クレイグリーン | # | 202, 210, 197 |
⑤清潔感|ユーカリグリーン → ペールグリーン
G R A D A T I O N
ナチュラルなイメージのグリーンの良さが引き立つ配色。
ヘルスケア・福祉系資料に最適です。
| カラー | カラーコード | RGB |
| ユーカリグリーン | #61A48A | 97, 164, 138 |
| ペールグリーン | # | 230, 244, 234 |
⑥渋め|ダークオリーブ → アッシュグリーン
G R A D A T I O N
渋めなグリーンが、「和」っぽい印象のデザイン。
金融・行政関連や、中高年向けの資料におすすめです。
| カラー | カラーコード | RGB |
| ダークオリーブ | # | 47, 62, 46 |
| アッシュグリーン | #A3B18A | 163, 177, 138 |
⑦高級|ブラックグリーン → スモークグリーン
G R A D A T I O N
静けさが感じられる、大人のグリーングラデーション。
ブランディング・高価格帯サービスに向いています。
| カラー | カラーコード | RGB |
| ブラックグリーン | # | 2, 6, 23 |
| スモークグリーン | #4B6F5E | 75, 111, 94 |
緑グラデーションの黄金比

緑グラデーションの黄金比は、濃:淡=65:35。
淡色を増やしすぎると「ぼやけた資料」になります。
緑グラデーションのNG例
緑は同じような色を使うとぼやけた印象になるので注意。
文字は白が基本です。
まとめ|緑は「ズラし」が効く
緑は王道だからこそ、色名ではなく“質感”で選ぶのがポイント。


コメント