青は「信頼・知性・清潔感」を表す万能カラー。
ベタ塗りの青よりも、グラデーションの青の方が伝わりやすいこともあります。
この記事では、
をまとめてご紹介いたします。
PowerPoint、Webデザイン、バナー、SNS、UIなどの配色におすすめです。
青グラデーションの基本ルール
青のグラデーションを作る場合は、以下のルールを押さえておきましょう。
この3点を守ると、失敗しません。
青グラデーション配色パターン集
ここからは、青グラデーション配色パターン集を7つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
①知的｜インディゴ × スチールブルー
G R A D A T I O N
落ち着いた硬派なイメージのブルーグラデーション。
ビジネス資料など、信頼感を最優先したい場面で使いたい組み合わせです。
| カラー | カラーコード | RGB |
| インディゴ | # | 30, 64, 175 |
| スチールブルー | # | 100, 116, 139 |
②先進的｜ディープブルー × シアン
G R A D A T I O N
クールな印象で、テクノロジー感のある青グラデーションです。
背景グラデーションにすると一気にプロ感がアップ！！
| カラー | カラーコード | RGB |
| ディープブルー | # | 15, 23, 42 |
| シアンブルー | # | 8, 145, 178 |
③上品｜ロイヤルブルー × グレイッシュブルー
G R A D A T I O N
品の良いブルーは、大人向けの青グラデーション。
コーポレートサイトやセミナー資料など、派手さを抑えたい場面に最適です。
| カラー | カラーコード | RGB |
| ロイヤルブルー | # | 29, 78, 216 |
| グレイッシュブルー | # | 148, 163, 184 |
④ミニマル｜ブルーグレー × ネイビーブラック
G R A D A T I O N
洗練された都会的な印象の、黒に近い青グラデーション。
UIデザイン・図表背景など、青の主張を控えめにしたい時におすすめです。
| カラー | カラーコード | RGB |
| ブルーグレー | # | 71, 85, 105 |
| ネイビーブラック | # | 2, 6, 23 |
⑤さわやか｜ターコイズ × ライトブルー
G R A D A T I O N
明るい印象で、すっきりとした清涼感のある青グラデーション。
医療・ヘルスケアなどの資料でも使いやすいデザインです。
| カラー | カラーコード | RGB |
| ターコイズブルー | # | 14, 165, 164 |
| ライトブルー | # | 176, 236, 255 |
⑥やさしい｜アッシュブルー × ペールブルー
G R A D A T I O N
軽やかなブルーは、圧を出したくない時にぴったりの青グラデーション。
初心者向け資料・社内マニュアルなどで使いやすい組み合わせです。
| カラー | カラーコード | RGB |
| アッシュブルー | # | 107, 124, 147 |
| ペールブルー | # | 224, 242, 254 |
⑦未来感｜ナイトブルー × エレクトリックブルー
G R A D A T I O N
非日常感のある、SF系青グラデーションです。
映像・エンタメ系のLPなどにおすすめ。
| カラー | カラーコード | RGB |
| ナイトブルー | # | 2, 6, 23 |
| エレクトリックブルー | # | 56, 189, 248 |
青グラデーションの黄金比
おすすめは、濃：淡＝70：30
淡色を広く使うとぼやけやすいので、濃い青を主役にするのがコツです。
青グラデーションのNG例
青は「似すぎ」が一番危険なので、コントラストを意識しましょう。
まとめ｜青は「差をつけてこそ映える」
青は万能だからこそ、少しズラした組み合わせが差別化になります。
コメント