ビビッドカラー配色は、強い印象・エネルギー・インパクトを与えたいときに使われる配色です。
一方で、派手すぎたり、安っぽくなってしまう…
といった失敗も起こりやすい配色でもあります。
この記事では、
をまとめてご紹介。
広告・Webデザイン・SNS・キャラクターデザインの参考にもおすすめです。
ビビッドカラー配色の特徴とは？
ビビッドカラーとは、彩度が高く、純度の高い鮮やかな色のことを指します。
一方で、色数や組み合わせを間違えると一気にチープに見えるため、ルールを知ることが重要です。
ビビッドカラー配色の基本ルール
ビビッド配色では「引き算」と「逃げ色」が重要です。
すべてを主役にしないのが成功のコツです。
ビビッドカラー配色パターン集
ここからは、ビビッドカラー配色をいくつかご紹介していきます。
【王道】ビビッドレッド×ホワイト配色
情熱的なレッドを使った、最もエネルギッシュで目を引く配色。
| カラー | カラーコード | RGB |
| メイン | # | 230, 0, 35 |
| サブ | # | 255, 255, 255 |
| アクセント | # | 17, 17, 17 |
【爽快】ビビッドブルー×ホワイト配色
爽やかなブルーを使用し、信頼感と鮮やかさを両立。
| カラー | カラーコード | RGB |
| メイン | # | 0, 102, 255 |
| サブ | # | 255, 255, 255 |
| アクセント | # | 230, 230, 230 |
【ポップ】ビビッドイエロー×ブラック配色
注意喚起などでよく使われる、一瞬で視線を集める強配色。
| カラー | カラーコード | RGB |
| メイン | # | 255, 213, 0 |
| サブ | # | 17, 17, 17 |
| アクセント | # | 255, 255, 255 |
【カラフル】三原色配色
あえてカラフルな色で仕上げた、バランスの良い三原色カラー。
| カラー | カラーコード | RGB |
| メイン | #FF1F1F | 255, 31, 31 |
| サブ | #1062DD | 16, 98, 221 |
| アクセント | #FFC824 | 255, 200, 36 |
【元気】ビビッドオレンジ×ホワイト配色
明るくて元気な雰囲気で、親しみやすさと活発さを両立。
| カラー | カラーコード | RGB |
| メイン | # | 255, 122, 0 |
| サブ | # | 255, 255, 255 |
| アクセント | # | 204, 204, 204 |
【クール】ビビッドパープル×ブラック配色
強く印象に残るパープルで、個性と非日常感を演出。
| カラー | カラーコード | RGB |
| メイン | #7B2FFF | 123, 47, 255 |
| サブ | # | 15, 15, 15 |
| アクセント | # | 181, 181, 181 |
【ポップ】ビビッドピンク配色
キュートなピンクが目を惹く、かわいさも感じられる配色。
| カラー | カラーコード | RGB |
| メイン | #FF22B4 | 255, 34, 180 |
| サブ | #202020 | 32, 32, 32 |
| アクセント | #FFFFFF | 255, 255, 255 |
ビビッドカラー配色が失敗しない黄金比
ビビッドカラー配色では「色の割合」がとても重要です。
ビビッドは「少ないほど強い」**と覚えるのがポイントです。
ビビッドカラー配色のNG例
「目立つ」と「見づらい」は違います。
色の調べ方
色を調べるに当たって、Canvaというアプリを利用させていただいています。
フリー画像やデザインはもちろん、画像から色を抽出してくれるのが便利です。
配色におすすめの本
配色に悩んだときにおすすめなのが、こちらの本。
めっちゃオシャレでかわいい配色がたくさん載っているので、お気に入りが見つかること間違いなし！
＼ 中身はこんな感じ ／
まとめ｜ビビッドカラー配色は「一点突破」
ビビッドカラー配色は、
これだけで、強く・洗練された印象になります。
今回紹介した配色パターンは、広告・Webデザイン・SNS・キャラクターデザインまで幅広く使えるので、ぜひ保存して活用してみてくださいね。
他のイメージの色も、調べ次第更新していきたいと思います。
リクエストもお待ちしています！！
コメント