Color is most relative medium in art
-Josef Albers
私たちはみな光と色を違った風に知覚しています。 あなたが赤と見るものと、私が赤と見るものは違いますが、私たちはどちらもそれを赤と呼ぶでしょう。 色が私たちにどのように影響し、それにどのように反応するかも、私たち一人ひとり異なります。 色は相対的なものです。
優れたデザインは、色がなくても機能するはずです。 グレースケールで見たときにも機能するはずです。 しかし色は、誰かがあなたのデザインで最初に気づくものの1つであり、あなたの視聴者があなたのデザインを美的に喜ばしいと思うかどうかを決定するのに長い道のりを歩むことになります。 色はあなたのデザインを強化するために使用されるべきですが、それはあなたのデザインであってはなりません。
あなたは、視覚的な階層を作成し、あなたのデザインで全体のバランスを向上させるために色を使用することができます
色について多くを語ることができます。 1 つの投稿では語り尽くせないほどです。 この投稿を計画したとき、これを 1 つの投稿にするか、もっとカバーするためにいくつかの投稿に拡張するかで、何度も行き来しました。
この最初の投稿は、色彩理論、カラー システム、カラー ホイール、および配色に焦点を当てます。 次回は、色の意味と、色を使用してデザインを向上させる方法について考えてみたいと思います。 光は電磁波であり、ある範囲の波長で人間の目に印象を与えます。 この波長の範囲が視覚スペクトルです。
光が物体に当たると、ある波長は吸収され、他の波長は反射されます。 私たちは反射された光の波長を色として見ています。 視覚スペクトルのすべての波長が吸収されると黒に見え、すべてが反射されると白に見えます。
色は3つの方法で説明することができる。 名前によって、純度によって、そして値または明度によって。 これらの3つの方法で色を表現するために、いくつかの用語があります。
- 色相。 誰かが色相について話しているとき、彼らはオブジェクトの実際の色について話しています。 緑は赤、黄、青、紫などと同様に色相です。
- Chroma: 灰色に関連した色相の純度を指します。 ある色に灰色の影がないとき、その色は高彩度である。
- 彩度: 色相の純度の度合いを表します。 色相と似ていますが、全く同じものではありません。 純粋な色相は高彩度です。 グレーが追加されると、色は脱飽和になる。 色の明るさ、またはくすみ。 色に白や黒を加えると、その強度は低くなる。 強度が高く、彩度の高い色は彩度が高い。 色から反射される光の量の尺度であり、基本的に色相がどの程度明るいかまたは暗いかである。 色相に白を加えると、それはより明るくなり、その値または輝度が増加します。 その結果、黒を追加すると暗くなり、値または輝度が低下します。
- シェード。 色相に黒を加えると暗くなる
- 色合い：色相に白を加えると明るくなる
- トーン：黒と白の間にグレーがある。 色調とは、色相に灰色を加えたものである。
私がすべての色調の関係を見つけたとき、その結果はすべての色調の生きた調和でなければならず、それは楽曲の調和に似ていない。
– アンリ・マティス
カラーシステム
カラーシステムとは、我々が色を作り出す方法のことを指す。 絵の具のような物理的な色を作るときは減法方式で、コンピュータのようなデジタルで色を作るときは加法方式で行います。
あなたがコンピュータ画面で見る色は、他の人がコンピュータ画面で見る色と同じにはならないかもしれません。 画像が印刷される場合、その違いはさらに顕著になる可能性があります。
Subtractive Colors (CMYK) 私たちが物理オブジェクトで色を見るとき、反射光を目にしています。 私たちが赤を見るのは、他の波長の光がすべて吸収され、赤だけが反射しているからです。 色を出すために、見たくない色の光の波長をすべて取り除いているので、これは減色法です。
色を増やすと、より多くの光が吸収されて、全体の色は濃くなります。
CMYK（シアン、マゼンタ、イエロー、ブラック）は、印刷用の色を作成するために使用される減法システムです。
加法色（RGB）コンピュータ画面上の色を作成するには、光源はシステムの外から来る光の反射ではなく内部から来るので光を追加しなければなりません。 光がないときは黒に見え、色（光の波長）を増やすと白に近づいていきます。
RGB（赤、緑、青）は、デジタルメディアで色を作成するために使用される加算方式です。 加算方式は、私たちが自然界で色を認識する方法とは異なるため、私たちの原色は変化しています。
The Color Wheel
The color wheel は、上記で説明したことのほとんどを視覚的に表現したものです。
以下の画像では、カラーホイールがどのように作成されるかを見ることができます。 正三角形の角にある原色から始めて、同様の三角形を 180 度回転させたものを設定して、二次色を作成します。
下の画像では、赤、黄、青の 3 原色であることに注目してください。
今度は下のカラー ホイールを見てください。 上のものとは違って見えることにお気づきでしょう。 ここでは、原色は赤、緑、青で、中央の白に達するまでさまざまな色合いを示していることにも気づかれるでしょう。
色合いや色調を示すカラーホイールもあります。 実際には、さまざまなカラーホイールや色の三角形があります。
Color Schemes
配色はカラーホイールから生まれ、異なる配色は互いの関係に基づいて色の異なる組み合わせであることを覚えておいてください。
以下の画像では、説明されている配色の種類の一部である可能性がある色を除いて、すべての色の彩度を下げました。
Analogous color scheme is based on colors adjacent to each other on the color wheel
analogous.jpg
Complementary 配色は、カラー ホイールの互いに反対側の色に基づいています
Triadic 配色は、カラー ホイールを等間隔に回る 3 色を使っています
Tetradic/Quadratic 配色は、カラー ホイールに内接する長方形の角で色を選択することによって作成します
Split 補色は、1 色と最初の色の補色に隣り合うもう 2 色を選ぶことによって作成されます。 補色と類似色の組み合わせと考えてください。
さらに、カラーホイールで完全に説明できない配色も存在します。
ニュートラル配色には、カラー ホイールにない色 (茶色やグレーのさまざまなトーン) のみが含まれます。
アクセント付きニュートラル配色には、上記のニュートラル色とカラー ホイールにある色の 1 つまたは複数の組み合わせが含まれます。 ご想像のとおり、自然界に存在するものをベースにした配色です。
まとめ
この記事では色の背後にある理論に焦点を当てましたが、色に感じる意味や、デザインで色を効果的に使用する方法など、まだまだカバーすることがたくさんあります。
とりあえず、色を説明するために使用される用語と、カラー ホイールから得られるさまざまな配色に慣れてください。
Resources
この投稿を通して、色についての考えやアイデアを提供するいくつかの記事にリンクしています。 以下は、色彩理論に関する追加の記事と一連の記事です。
色の重要性と、色について知っておくべきことがどれほどあるかを考えると、以下の各リンクに目を通すことに時間を費やしたいと思うかもしれません。 この後の記事に含まれる内容の多くはここにあるものと同様ですが、各記事には私が言及していないものも含まれており、色の主題に関する全体的な知識を増やすことができるでしょう。
- Basic color schemes – Introduction to Color Theory
- Color theory – Wikipedia
- Color Theory – Dev.Opera
- Color Theory – Wrox
- Color Theory – Liquisoft
- Creating Consistently Colorful User Experiences.Wikipedia
- Color Theory – Wrox
- Colour Therapy (色彩理論)。 パート 1、
この一週間、キャメロン・チャップマンがスマッシング誌に色に関する素晴らしい連載記事を書きましたので、特に注意を喚起しておきたいと思います。
- Color Theory for Designers, Part 1: The Meaning of Color
- Color Theory For Designers, Part 2: Understanding Concepts And Terminology
- Color Theory for Designer, Part 3: The Meaning of Color
- Color Theory For Designers, Part 3: Understanding Concepts and Terminology
[色彩理論]デザイナーが、色彩の意味を理解する。
The 7 Components of Design
- Unity
- Gestalt
- Space
- Dominance
- Hierarchy
- Balance
- カラー パート I: 色彩理論
- Color Part II: How to Use Color
Design Fundamentalsの無料サンプルをダウンロードしていただけます。