色相環

Robert Hess
Microsoft Corporation

August 14, 2000
日本語版最終更新日 2000年11月7日

この記事は、もともと MSDN Online Voices のコラム "More or Hess" に掲載されたものです。

先月は、このコラムで Web サイトでの色およびイメージの使用方法についての入門的な情報を提供しました。その中では、ページコーディング、JPG と GIF フォーマットの違い、および「プログラマ」にとって馴染み深いものでも、たとえ自分の作品において色彩とデザインについて完全に掌握しているグラフィックアーティストであっても、馴染みの薄いと思われるその他のトピックを取り上げました。この記事では、今度は逆に、グラフィックアーティストの間ではよく知られた色彩の側面について解説します。プログラマにとっては、少し復習が必要かもしれません。実際、多くのサイトで、これらの理論が誤って用いられているのを見かけますので、プログラマの方々の中にもこれらの概念をもっと深く理解する必要のある人がいると思われます。

この記事の目標は、1 つの色と別の色の相互関係の詳細について説明することですが、いくつかの基本知識を前提としています。

色の基本

"可視" 光線として知られる光は、虹の色相のように青から赤の範囲のスペクトルに分割できることがわかっています。

図 1 可視光線のスペクトル

また、複数の色を混ぜ合わせて目的の色を作る割合を示す色相環 (または色相円) を使用したことがある方もいらっしゃるかと思います。色相環は、色のスペクトルに見られるように、基本的には色の直線的な変化であり、赤が紫に変化する色相を表したものです。

図 2 色相環

一般的な色相環は、ここに見られるように 12 の異なる色によって構成されています。色相環の重要な概念および色彩理論はアーティストの間では広く知られているものですが、プログラマの間では十分な理解を得られているわけではなく、混乱を生じる場合もあるようです。

原色

図 3 原色

定義では、原色は特定の割合で混ぜ合わせることによって別の色を作ることができる基本要素となる色です。原色を識別するためには、まず使用する色の媒体を正確に特定する必要があります。小学校で、原色は赤 (red)、黄 (yellow)、および青 (blue) であると教えられたことを覚えている方もいると思います。しかし、カラーディスプレイにおける原色は赤 (red)、緑 (green)、および青 (blue) です。ここまでは、基本知識として理解されていることと思います。

でも、ここでインクジェットカラープリンタの場合を考えてみましょう。カートリッジの色の組み合わせは、赤 (red)/緑 (green)/青 (blue) ではありません。一般的なインクジェットカラープリンタでは、シアン (cyan)、マゼンタ (magenta)、黄 (yellow)、および黒 (black) のインクが使用されています。コンピュータディスプレイでは加法混色が使用され、カラープリンタでは減法混色が使用されるため、これら 2 つの媒体の原色は異なります。モニタは色の付いた光を放射しますが、紙の上のインクは反射光から色を吸収します。この現象は、この記事で扱う範囲を超えていまるため、ここでは説明しませんが、詳細については以下のリソースを参照してください。

「Additive Color Synthesis」 (Jim Scruggs)
「Subtractive Color Synthesis」 (Jim Scruggs)

光の放射と吸収のほかにも、この記事で説明する概念は、加法混色および減法混色モデルに適用することができます。しかし、ここでは、原色が赤、緑、および青である加法混色モデルに焦点をおいて説明します。

二次色

図 4 二次色

色相環を構築するために、次は対角上に位置する 2 つの原色を混ぜ合わせてできる 3 つの色について説明します。これらの色は、二次色とよばれるシアン (cyan)、マゼンタ (magenta)、および黄 (yellow) のセットです。これらの色については、インクジェットカラープリンタのインクについての説明で簡単に触れたことを覚えていますか? そうです、加法混色モデルでの二次色は、減法混色モデルの原色と同じセットです。このことから、減法混色モデルの二次色は、加法混色モデルの原色であると結論付けることができます。これは加法混色と減法混色モデルの関連を示すものとして理解してください。

三次色

図 5 三次色

色相環を構成する最後のセットは、前のセクションで説明した二次色の中間色です。幸い、これらの三次色は、加法混色モデルおよび減法混色モデルの両方において共通のものです。これで、12 色で構成された色相環の各色が定義されました。次に、各色の相互関係について説明します。

類似色

図 6 類似色

色相環の各色の隣には、別の色が存在します。オレンジ (orange) から始めた場合、その 2 つの類似色は赤 (red) と黄 (yellow) です。類似色を使用するカラースキームは、自然界に見られるものと同じ色の調和と融合を提供します。

補色

図 7 補色

反対色とも呼ばれる補色は、色相環上で相互に向かい合う位置にある色です。補色は、特定の色を鮮明に浮かび上がらせる場合に有効的です。たとえば、レモンのイメージを作成する場合、背景色を青にすると、黄色いレモンが鮮明に表現されます。

類似色相

図 8 類似色相

類似色相は、2 つまたは 3 つの色からできています。1 つの色の色相環上の対角上にある補色の隣にある色を使用します。

等色相差

図 9 等色相差

色相環上で相互に等しい距離に位置する 3 つの色があります。等色相差をカラースキームで使用する場合、3 つのすべての色は反対色なので、視覚的な緊張が生まれます。原色および二次色のセットは、両方とも等色相差です。

暖色

図 10 暖色

暖色は、赤 (red)、オレンジ (orange)、および黄 (yellow) などの赤系の色相で構成される色です。暖色は、色彩選択において、暖かさ、心地よさ、およびエネルギーという感じを与えます。また、暖色は、ページから浮き上がってユーザーの近くに現れるような視覚効果を生み出します。

寒色

図 11 寒色

寒色は、青 (blue)、シアン (cyan)、および緑 (green) などの青系の色相で構成される色です。寒色は、カラースキームを安定させ、冷静な感じを表現します。寒色は、ユーザーから遠く見えるため、ページの背景に適しています。

これらのカラーグループは、書籍によっては別の用語で表されている場合がありますが、基本的な概念を理解していれば混乱することはありません。

次に、この記事の主要部分であるコントラストについて説明します。

コントラストの有効な使用

コントラストは、2 つの対角位置にある色の間の違いです。白と黒は厳密な意味での色ではないので、無彩色コントラストを表すと言われます。また、黒と白は、最高レベルのコントラストを表現します。色相環の補色は、高い有彩色コントラストを表します。人間の目は、有彩色コントラストよりも無彩色コントラストに対して敏感です。これが、圧縮ファクタを増加させる場合にイメージからの黒と白の情報をドロップする前に、.jpg 圧縮アルゴリズムが色彩情報をドロップする理由です。

図 12 白から黒へ (無彩色コントラストランプ)

図 13 青を使ったモノクロームコントラストランプ

モノクロームコントラストは、単一の色の明るさを増減することによって作られます。

Web デザインにおいて、コントラストは非常に重要であり、多くの異なるコントラストの使用方法があります。すべての使用方法は、既に説明した色彩学の概念に基づいています。白の背景上の黒いテキストは非常に読みやすいということは周知の事実です。これが、ほとんどの印刷マニュアルが白の背景と黒のテキストを使用している理由です。同様に、黒の上の白も高いコントラストを作りますが、黒は白よりも重く感じられるため少し狭まってみえるので、白の背景上の黒いテキストを使った場合よりも読みにくくなります。

図 14 高いコントラストの配色

暖色と寒色においても同様の効果が得られます。暖色は画面から少し浮き出て見え、寒色は少しくぼんで見えます。このため、暖色および暗色はテキストに適していて、寒色および明色は背景に適しています。しかし、このアプローチは、それほど単純なものではありません。2 つのコントラスト色の一方を背景色に、もう一方をテキストの色に使用した例を見てみましょう。

図 15 補色の組み合わせ

結果は非常に悪いものになっています。これらの 2 つの色は、互いに対照であるだけでなく、遊離しているように感じられます。良い組み合わせではありません。次に、基本的に同じ色を使用して明暗を調整してみます。

図 16 修正された色の組み合わせ

この組み合わせは、前の例に比べてかなり良くなっています。この例は、コントラストを使う場合には分析的なセンスだけではなく、視覚的な考慮も必要であることを示しています。

このような色とコントラストの使用は、背景イメージ上にテキストを配置する場合に最も重要になります。コントラストに関するこれらの概念に基づいて、ページ上のテキストコンポーネントは背景イメージのすべての色に対して十分なコントラストを持つ必要があることを理解してください。たとえば、前に説明した等色相差のセットをそのまま使用すると、強すぎる 3 つの反対色がページ上に存在することになります。

図 17 等色相差の組み合わせ (背景イメージ上のテキスト)

類似色相の使用を考えてみます。ここでは、類似色を背景に使用し、補色をテキストに使用します。この組み合わせでは、背景色が余計に目立つことなくテキストが十分に強調されます。

図 18 類似色相の組み合わせ (背景イメージ上のテキスト)

サイトのカラースキームの選択において、色彩理論の理解も重要な意味を持ちます。背景色の必要性、ナビゲーション要素、および異なるテキストスタイルに基づいて、色相環からコントラストパターンを選択します。「The Safety Palette」などを利用すると、要素間のコントラストを適切なレベルまで増加させる明暗色の選択を行うことができます。Web ページでユーザーに頭痛を起こさせることなく有効な視覚的効果を生む多くの組み合わせがあります。もう少し深く Web サイトでの有効な色の使い方について考えてみてください。可能性のあるオプションについては、この動的なサンプル (英語) を参照してください。

Robert Hess は、MSDN Show (英語) を担当しています。