いまさら聞けない！カラーホイールの使い方と色の基本原則

色は、私たちの生活に大切な要素です。

海や川、森、山やジャングルなどにはそれぞれ自然の色合いがあり、私たちの目を楽しませてくれます。

この記事では、「カラーホイール」「類似色」「補色」の使い方についてご紹介します。

カラーホイールとは

さまざまな色を色相環に沿って並べたものが「カラーホイール」です。色の組み合わせを考えるときに役に立ちます。

世界で初めての色相ダイアグラムは、1666年にアイザック・ニュートンによって開発されました。このダイアグラムを使用することで、相性の良い色の組み合わせが一目でわかるようになっています。

▲カラーホイール

カラーホイールには、3つの「三原色（赤、青、黄色）」、3つの「第二色（緑、紫、オレンジ）」、6つの「第三色」が存在します。第二色は2つの原色を組み合わせたもので、第三色は赤と紫の中間など、原色と第二色を組み合わせた中間色になります。

▲暖色と寒色

全ての色は「暖色」と「寒色」に対分できます。暖色は炎や太陽などを、寒色は水や植物などを彷彿とさせます。また暖色は怒りや喜び、興奮を表すのに対し、寒色は穏やかな調和を表現します。

類似色とは

カラーホイールのなかで隣同士に並んでいるものが「類似色」です。類似色を使用すると、調和があり目に優しいデザインを作れます。

類似色は自然のなかで見ることができる組み合わせでもあり、アプリやWebデザインを作っている場合は類似色を考慮すると良いでしょう。

▲上図の黒線部分が、類似色の例となります。

▲緑から紫までの類似色

類似色は、カラーホイールから取り出した3〜5色で構成されます。

優先的な類似色のグループをひとつ選び、それに合わせて補助となる色をアクセントとして選ぶと良いでしょう。

▲ゴッホのひまわりの絵では、この類似色の原理が使用されています。

たとえばゴッホの『ひまわり』の絵では、黄色から青緑色までの類似色が使用され、全体的に統一感のある仕上がりになっています。

オレンジがアクセントとして使用されているのもポイントです。

▲黄色から青緑までの類似色

補色とは

▲赤と緑は補色の関係

カラーホイール上で対角線上に位置するのが「補色」です。補色を利用することで、存在感があり注目をひくデザインとなります。ロゴデザインやメインのインターフェースで活用されることが多いです。

全く異なる色の組み合わせになるため、コントラストがキツすぎることもあります。トーンダウンしたい場合は類似色を使用するなどして、臨機応変に対応しましょう。

まとめ

この記事で紹介したように、色の選びかたにはいくつかのパターンと原則があります。

カラーホイールを使用して、あなたのプロジェクトにぴったりな色を選びましょう。

（原文：Harshani Chathurika　翻訳：Mariko Sugita）