今回の勉強なんですが、色の事知らない人は一緒に勉強した方がいい！

なぜなら周りを見る時楽しくなる！

 

 

色の事を知れば色々なケースで役に立つと思います。

って事で簡単に色とは何かを見ていきましょう。

 

 

色の概念

光の三原色と色材の三原色があるのはご存知でしょうか？

光の三原色はwebやディスプレーを通して見る時の原色で、もう一方の色材の三原色は印刷や絵の具などを用いた場合の原色です。

光の三原色は「赤色、青色、緑色」になり、色材の三原色は「黄色、赤紫色（マゼンダ）、空色（シアン）」になります。

 

 

二つ見比べてみると表裏一体だという事がわかりますね。

色の組み合わせや確認などで便利なのがカラー・ホイールです。カラー・ホイールを使うと私のような素人でも簡単に基準となる色から自然な色の組み合わせを探し出す事が出来ます。

なのでカラー・ホイールを使って色の組み合わせの勉強をしていくことにします。

 

Sponsored Link

 

 

カラー・ホイール

カラー・ホイールとは色を選択する際に表示される円形のカラーチャートのこと。色環、色相環ともいう。

 

 

このカラー・ホイールを使えば、ほぼ確実に上手くいく組み合わせを見つけ出す事ができるらしいので検証してみましょう。

 

 

補色

カラー・ホイールで真向かいの位置にある色同士は補色の関係にあるそうなので、どちらか一方をメインカラーにしてもう一方をアクセントカラーで使うと上手くいく事が多いみたいですね。

それではサイトのヘッダーに使っている画像を例に色々な色を試してみましょう。

 

 

補色その１

• メインカラーは明るい緑
• アクセントカラーは明るい紫

 

 

 

補色その２

• メインカラーは明るい黄色
• アクセントカラーは明るい青

 

 

 

補色その３

• メインカラーは明るい赤
• アクセントカラーは明るい青

 

 

 

補色その４

• メインカラーは明るい紫
• アクセントカラーは明るい緑

 

 

 

補色その５

• メインカラーは明るい青
• アクセントカラーは明るい黄色

 

 

 

補色その６

• メインカラーは明るい青
• アクセントカラーは明るい赤

 

 

どれも悪くはないと思うのですがいかかでしょう？

次はトライアドという色の選択方法を検証してみましょう。

 

Sponsored Link

 

 

トライアド

等しい距離にある３つの色の組み合わせは、心地よい色のトライアドを作り出すそうです。それではサイトのヘッダーに使っている画像を例に色々な色を試してみましょう。

 

 

どれも悪くないと思いますが少し寂しい感じはします。

次はトライアドの中のスプリット・コンプリメント・トライアドという配色を検証してみます。

 

スプリット・コンプリメント・トライアド

これはメインカラーの真向かいにある補色を見つけその両隣にある色を選択するという方法です。この組み合わせはやや洗練された印象を与えるそうですので、同じように試してみましょう。

今回はよりわかりやく見れるように中央付近で色を分けてみました。

 

 

悪くはないんだろうけど何か違う感じは否めない。

他にもカラー・ホイールの隣り合わせにある色を使って類似色の組み合わせや、メインカラーから90度の場所にある4つの配色でテトラードなどさまざまな配色があるみたいです。

次に色の明るさと暗さについて見てみます。

色にはさまざまな明るさや暗さがありそれらを含めると無限の色の数が生まれます。

カラー・ホイールで言うと円の外側に原色（ヒューと言うらしい）がありヒュー（原色）に黒を加えるとシェード、ヒューに白を加えるとチントになります。

 

 

カラーホイールの見方

その色たちは暖色（赤か黄色を含むもの）と寒色（青を含むもの）に分ける事ができます。ここでポイントなのが寒色は引っ込み暖色は前面に出てくると言う事です。こんな感じで

 

 

とまぁこの原理を上手く使えば理にかなったデザインができそうですね。

今回は長くなりましたがもっともっと奥が深いので色に関してはちょこちょこ続けていきたいですね。

 

Sponsored Link