かっこいい配色は、黒を使えばいい、暗くすればいいと思っていませんか?
実は、それだけでは平凡な配色になりがちなんです。
本当にかっこいいグラデーションは、深み・コントラスト・少しのアクセントで完成します。
この記事では、
をまとめてご紹介いたします。
Web・バナー・資料・サムネなどの参考にもおすすめです。
かっこいいグラデーションの基本ルール

黒+1色の構成を意識すると、一気にプロっぽくなります。
かっこいいグラデーション配色集
ここからは、かっこいいグラデーション配色パターン集をご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①ブラック×ネイビー
C O O L
王道のクールネイビーグラデーション。
ビジネス資料・IT・サムネイルなどにおすすめです。
| カラー | カラーコード | RGB |
| ブラック | #020617 | 2, 6, 23 |
| ミッドナイトブルー | #0F172A | 15, 23, 42 |
| ネイビーブルー | #1E3A8A | 30, 58, 138 |
②ブラック×パープル
C O O L
未来感と高級感も兼ね備えた、パープルグラデーション。
IT・AI・テック系と相性がいいです。
| カラー | カラーコード | RGB |
| ブラック | #160425 | 22, 4, 37 |
| ディープパープル | #312E81 | 49, 46, 129 |
| バイオレット | #7C3AED | 124, 58, 237 |
③チャコール×ブルー
C O O L
知的な雰囲気の、チャコール×グレーグラデーション。
資料・スライド・企業サイトにおすすめです。
| カラー | カラーコード | RGB |
| ブラックグレー | #111827 | 17, 24, 39 |
| チャコール | #374151 | 55, 65, 81 |
| ブルー | # | 59, 130, 246 |
④ブラック×レッド
C O O L
インパクトのある、強めレッドグラデーション。
ゲーム・スポーツ・告知などに向いています。
| カラー | カラーコード | RGB |
| ブラック | #070203 | 7, 2, 3 |
| ボルドー | # | 127, 29, 29 |
| レッド | # | 220, 38, 38 |
⑤ダークグレー×シルバー
C O O L
シンプルかつ高級感のある、グレーグラデーション。
ブランド・LP・バナーなどに最適です。
| カラー | カラーコード | RGB |
| ダークグレー | # | 17, 24, 39 |
| グレー | # | 107, 114, 128 |
| シルバー | # | 229, 231, 235 |
かっこいいグラデーションのNG例
「少ない色」「暗め」が基本です。
まとめ
かっこいいグラデーションは、暗め+アクセント1色で完成します。
黒ベースで深い色を使い、余白を活かすことで、一気にプロっぽいデザインになります。


コメント