色ってなに?1分で分かる配色の基本

こんにちは。たわらです。
WEBページ制作もがっつりデザインに入ってきて、
なにがなんだか、どうすれば見やすいのか、こんがらがることがあります。笑

なので今回は、よくわからないままほったらかしにしていた
配色の基本について書きたいと思います!笑

 

●色って?

「色」とひとことで言っても、その属性は3つあります。

「色相・明度・彩度」です。

flow01
こんな感じです。
まとめると

>色相・・・色み

赤・青・黄・緑など

 

>明度・・・色の明るさ

色相や彩度が同じでも明度が低いと黒っぽくなります。

 

>彩度・・・色の鮮やかさ

同じ色相であっても、彩度が低いほどグレーに近くなります。

 

●コントラストは重要

みやすい配色にはコントラストがとても重要になります。
明度にコントラストがないと文字が見づらくなります。
下に図を作ってみました。

背景が暗ければ文字はなるべく明るくすると見やすくなります。

 

見にくい例)

flow02

見やすい例)

flow03

●なんか色合いがさみしい…というときは

使うベースの色は3色をベースにし、

70:25:5にするのがよい、といわれています。

flow04

これをもとに色を考えても、なんだかさみしいな、
色を足したいな、と私自身思うことがありました。

むやみに足さずに、色相だけを変えてみる

他の色味を足すよりも簡単なのが、アクセントカラーや
メインカラーの色相だけを変えてみる方法です。

flow05

逆に、色相を変えずに、明度・彩度だけ変える、というのもいいかもしれません。

むやみやたらに色を考えるのではなく、規則的に変えていくと、調和の取れた色合いが生み出せるかもしれません。

 

グレーを足してみる

あんまり色は増やしたくないな…という方は、
グレーを足してみると良いかもしれません。
あまり色が増えた印象がないので、他の色の邪魔にならないです。
たわら