1月に、2013年の私の目標の一つは、色についてもっと学び、私が学んだことをあなたと共有することだったことを覚えている場合。 私は以前、色彩を扱うスキルが不足していると感じており、今年のある時点で、それを変えることを期待して色彩に関する本を数冊手に入れようと言いました。
それから1つの誕生日、やや寛大な兄、Amazonの質の高いサービス、そして本の品揃え（特に色に関するいくつかの本を含む）がここで読まれるのを待っています。 ありがとう、David。
私はカラー本の一つ、Design Elementsを読み終えました。 色の本の 1 つである「Design Elements: Color Fundamentals」を読み終え、共有し始めるべきだと思いました。 これは始まりであり、また、私が色をどのように理解しているかを明確にすることにつながったからです。
How We Describe Color
色には3つの主要な表現方法があり、この本がそれを追加したので、色を表現する4番目の方法も加えておくことにしましょう。
- 色相 – 色を表す別の言葉
- 彩度（クロマ） – 色相の強度または純度
- 明度（値） – ある色相に混じる黒または白の相対度
- 温度 – ある色の感じる暖かさや冷たさ
それぞれについて少し掘り下げて考えてみます。
色相は色であり、どのような色相に見えるかは、反射または生成される光の波長によって決まります。 色とは何か、色と色相は同義語なので、色相が何であるかも知っているはずです。 色と色相は同義語なので、色相とは何かということも知っておいてください。
彩度とは、ある色相がどれだけ純粋か、あるいは強いかを意味します。 彩度100%は、色相にグレーが全く加わらないことを意味します。 その色は完全に純粋です。 一方、彩度0％の色相は、中程度のグレーに見えます。 彩度が高い（100％に近い）ほど、鮮やかで明るい色に見えます。
色相がどの程度飽和して見えるかは、それがどの色の隣にあるかにも依存します。 飽和度50%の色相を飽和度25%の色相の隣に置くと、同じ色相を飽和度75%の色相の隣に置いた場合よりも鮮やかに見える。 白を加えると色は明るくなり(色合いを作り出し)、黒を加えると暗くなります(陰影を作り出します)。 明度や明度の効果は、構図内の他の明度との相対的な関係で決まります。 ある色を暗い色の隣に置くと明るく見えます。
要素間の価値の差が大きいほど、それらの間のコントラストは大きくなります。 このため、明度は要素間のコントラストや階層を示すのに適した方法です。 明度の7段階程度が、人間の目が識別できる最大のバリエーションである。
温度とは、色の暖かさや冷たさを表すものです。 暖色は赤、オレンジ、黄色で、寒色は緑、青、紫です。 緑と紫のスペクトルのどこかで、温度が暖色と冷色の間で変化します。
目が色温度を認識する方法は、光源に基づいて変化することがあります。
暖色系は構図の前景に進み、寒色系は後景に退く傾向があります。 また、彩度や明度のように、温度は相対的なものである可能性があります。
Color Harmony
色を使用する際の目標は、楽しい色の組み合わせのパレットを選択することです（不快な組み合わせがメッセージをよりよく補完する場合を除きます）。 私たちは、ある種の色の調和を達成しようとしています。 あなたの目に合うものが、私の目に合うとは限りません。 色彩理論の原則は、うまく機能する可能性が高い色の組み合わせやグループを見つけるのに役立つガイドラインを提供することで、主観を減らすことを目的としています。
たとえば、主原理の1つは、目は常に色のバランスと均衡を求めており、色相がその反対または補完と組み合わせられたときのように、中立の組み合わせに到達するように導くというものです。 これが、1 つの色を長く見続けていると、異なる色 (ただし彩度や明度は同じ) の残像が見えることが多い理由の 1 つです。
The Disconnect in Color Theory and Color Practice
上で述べたように、「色の基礎」を読んでいて、何かピンとくるものがあったのです。 私たちは色を色相、彩度、明度 (HSL) の用語で表現しますが、通常、Web 上では 16 進値や、より少ない範囲では RGB 値を用いて色値を設定します。
注意: HSL は、ほとんどのカラー ツールで見られる HSB（色相、彩度、明度）または HSV（色相、彩度、値）と同じものではありません。 それぞれ、与えられた色にどれだけの赤、緑、または青が含まれるかを示す 256 の可能な値を提供します。 HSLはこれとは異なる動作をします。 rgb(63, 69, 146) やそれに相当する16進数の #3f4592 のようなものを一目見て、それが 40% saturated や hsl(236, 40, 41) だと簡単にわかるような方法はないのです。
変換に関わる計算を見たい場合は、以下のリンクのいずれか、またはすべてをご覧ください
- Color Algorithms
- RGB から HSL へのカラー変換
- HSL から RGB カラー変換
なぜだろう? なぜ、色を理解しようとする方法と、色を使おうとする方法に断絶があるのでしょうか。 どちらかというと、HSL は、私たちが見る色を実際に記述し、色彩理論に適合しているので、より直感的なシステムです。
私は、色のスキルは、色に対する批判的な目を養い、何かが機能するかしないかについて質問することから生まれると理解しています。
理論と実践の両方が同じ言語を話すなら、それはより簡単なように思われるだけです。 この認識に至ったので、私は自分のコードでできるだけ多くの HSL 値を使用することを約束することにしました。 しかし、IE8以下はhsl()やrgb()を受け付けない。 彼らは16進数の値を必要とします。 でも大丈夫、SASSが変換してくれるから。 SASS で hsl() を使用し、html の出力を 16 進値にすることができます。
私の取り組みに伴い、私は学習と勉強を助けるために簡単なカラー ツールを構築し始めました。 このままではカラーパレットの選択に使うことはできませんが、色相、彩度、明度の値を弄って、ある特定の色とその周りの色にそれぞれがどのような影響を与えるかを確認することができます。
しばらくの間、私は、色と色の間の数学的関係が、色を扱うためのガイドを提供できるのではないかと思っており、色の 16 進値でそれらの関係をしばしば探しました。 hsl() をもっと使い、私のシンプルなカラー ツールで遊んでいる私の希望は、デザインで使用する色と理論を、今私が接続しているよりも少しうまく接続するのに役立つだろうということです。 この気づきは、色をよりよく研究する方法について、私に大きな理解を与えてくれました。だからこそ、色をどのように表現するかという基本から、この会話を始めたかったのです。 今週末には、私が作成した簡単なツールについてお話しします。
私の著書『Design Fundamentals』から無料のサンプルをダウンロードできます。