読者です 読者をやめる 読者になる 読者になる

読むだけでカラーセンスがレベルアップ!色の相性と組み合わせの基礎解説&ツール6選

IT・Webコラム

f:id:asawabe1023:20160621133458j:plain

色には相性があり、補色や純色をどう組み合わせるかで、見る側に与える印象がガラリと変わることを御存知でしたか?

色相・彩度・明度の「色の三属性」がポイントとなっており、これらを学ぶことでサイトデザインのレベルがアップします。

これから、カラーセンスを高めたい方のために、色の相性と組み合わせの基礎を解説していきます。 後半にカラーパターンやカラーパレットを生成できる便利なツールをまとめましたので、そちらもぜひ使ってみてください。

色相

f:id:asawabe1023:20160621132830j:plain 出典:HUE/360

「色相(しきそう)」は赤、黄、緑、青などの色合い・色味を指します。 上記のような色相を円環状に配置したものを「色相環」と呼びます。

三原色

光における三原色は「赤」「青」「緑」、色材(絵の具)における三原色は「赤紫(マゼンタ)」「青緑(シアン)」「黄(イエロー)」の3色を指します。

いずれの場合も、三原色があればほぼ全ての色を作り出すことが可能です。

補色

色相環の反対側にある色を「補色」と呼びます。「赤」の反対は「緑」、「青」の反対は「橙」といったような関係で、色相環を見て補色を判断します。

反対色は、まさに反対というだけあり、その性質から上手に並べると色鮮やな見た目となります。ただし、補色同士は混ぜると灰色になる性質があるため、使い方を誤るとまとまりのないデザインになってしまうので注意しましょう。

彩度

f:id:asawabe1023:20160621132856j:plain 出典:COPASO

「彩度(さいど)」は、"色の鮮やかさ"を指します。 グレーが多いほど彩度が低くなり、グレーが少ないほど彩度が高くなります。 彩度のない白黒灰色を「無彩色」、彩度がある色を「有彩色」と呼びます。 彩度は画像の印象に大きく影響します。

f:id:asawabe1023:20160621132926j:plain 出典:「自然な彩度」の違い - Adobe

明度

f:id:asawabe1023:20160621132938j:plain

「明度(めいど)」は、文字通り"色の明るさ"のことです。 左側にいくほど明るく、右側にいくほど暗くなります。

明度を上げると明るく、下げると暗くなり、明度によって色味が変わってきます。 「色相」で紹介したツール「HUE/360」で明度を調整できるので、明度を上げ下げしてどのように変化するか試してみてください。

f:id:asawabe1023:20160621132955j:plain

色の三属性

ここまで紹介した「色相」「明度」「彩度」は、「色の三属性」と呼ばれており、カラーデザインを学ぶ上で非常に大切な基礎となります。

カラーデザインは難しそうというイメージがあるかもしれませんが、この色の三属性を覚えれば、応用できる範囲が格段に広がります。

センスや感覚だけで色を選ぶのではなく、色相環ツールを使って補色を確認し、最適な組み合わせを選ぶようにしましょう。

カラーデザインツール

色の三属性が理解できたところで、次はカラーデザインに役立つツールを紹介したいと思います。 先に紹介した2つのツールも併せて使ってみてください。

Adobe color CC

f:id:asawabe1023:20160621133014j:plain 出典:Adobe color CC

「類似色」「補色」「モノクロマティック」「トライアド」「コンパウンド」「シェード」の6つのカラールールに基づき、カラーパターンを提案してくれるツールです。 カラーホイールを動かし、さまざまなカラーパターンを作ることができます。

Color Hunt

f:id:asawabe1023:20160621133028j:plain 出典:Color Hunt

毎日、さまざまなカラーパターンが登録されているサイトで、色の組み合わせの参考になります。 人気のカラーパターンに並び替えできるので、どんな組み合わせが人気なのか知るのに大変便利です。

Coolors

f:id:asawabe1023:20160621133045j:plain 出典:Coolors

カラーパレットを自動生成してくれるツールです。 「スペースキー」を押すと新しいカラーパレットが生成されます。 再読み込みなしでサクサクと生成してくれるので、快適に利用することができます。

ColorFavs

f:id:asawabe1023:20160621133100j:plain 出典:ColorFavs

画像から色を抽出し、カラーパレットを生成してくれるツールです。 色が綺麗だなと思う画像をアップロードして、色の組み合わせを分析してみてください。

(C)centsysjp's blog All Rights Reserved.
  • システム開発にお困りの方
  • センティリオンシステムの求人はこちらから