2014年11月04日

色彩工学 その5

色の三属性

前回、明るさを表す指標として「明度」という言葉が出てきたり、色相(Hue)、クロマ、という言葉がでてきました。これらのように、色を表す指標として、「色の三属性」と呼ばれているものが存在します。

 色相(Hue)
 彩度(Saturation, Chroma)
 明度(Value, Lightness, Brightness)

これらで表現する色空間は、それぞれの頭文字をとって、HSV / HSL/ HSB色空間と言われています。(詳しくはウィキペディアをどうぞ)

640px-HSV_color_solid_cone_chroma_gray.png
HSV色空間 (ウィキペディアより Author:SharkD

似たもののに、「HLS色空間:色相(Hue)、彩度(Satulation)、輝度(Lightness/Luminance または Intensity)」があります。

640px-HSL_color_solid_dblcone_chroma_gray.png
HLS色空間 (ウィキペディアより Author:SharkD

HSV:明度100%を純色とし、そこからどれだけ明るさが失われるかを示す
HLS:輝度0%を黒、100%を白とし、その中間(50%)が純色

このHSVモデルは、直感的に理解しやすいためデザイナに好まれて、コンピュータグラフィックスアプリケーションに使用されるようです。

上の図でも分かるように、それぞれを言葉で表現すると、

・色相は、色空間の断面上において、極座標系の偏角θのようなもの
・彩度は、円錐(円柱)の中心からの距離、極座標でいう原点からの距離rのようなもの
・明度は、3次元座標系でいうZ軸


WEBカラー

ちょっと話は逸れますが、このブログ内にも様々な色が使われています。実は私、凝り性な一面もあり、このブログのデザインはサービスの標準テンプレートではなく自分でカスタマイズしてあります。

例えば、ハイパーリンクの色(この文字の色です)は、HTML上では16進数のカラーコードで指定するために、「color:#1e90ff」というように指示しています。(16進数コードが主流だと思いますが、HSLでもRGBでも指定できます)ぱっと見ややこしく見えますが、これは2桁づつ、RGBをそれぞれ16進数で表現しているだけです。

 R:1e (30@10進数)
 G:90 (144@10進数)
 B:ff (255@10進数)

16進数は英語では「hexadecimal number」なので、16進数のことを「Hex」と略して、この16進数のカラーコードのことを「Hex Color」と呼ぶようです。

先の「ハイパーリンクの色」をコンピュータグラフィックで使われる他の表色系(2進数 8bitの10進数表記:0〜255)で表現すると、

 RGBでは:R30 G144 B255
 HSLでは:H140 S240 L134

blue_color_sample.png
本ブログのメインカラーのひとつ(Windows標準アプリの色設定画面)

爽やかなブルーとグレーを基調にして、モダンかつカジュアルすぎない雰囲気のサイト(笑)にしたかったので、この色を選びました。
その当時は特に気にしていませんでしたが、上の「色の編集」画面では右端の縦バーが、明度で、その左の虹色の四角が色相と彩度の平面図になっていることがわかりますね。

試しに「#1e90ff」で検索してみたらこんなページがでてきました。どうやらこの色は「Dodger Blue」(リンクはウィキペディア)という色のようです。私はドジャースのファンでもないので特に意味はないのですけど。

blue_color_sample_color-hex.png
Color-Hexのスクリーンショット

普段、目にする色もイロイロと奥が深くて面白いですね。自分の会社や学校に使われているロゴの色なんかも、このように細かく規定があることでしょう。

さて、話を戻します。

これまで学んできたように様々な表色系や色空間を用いる理由は、色を正確に把握しそして自在に操ることを目的としています。特に均等色空間では、「色の違い」を的確に表現することができ、「人間の目に見える色の差を数値に変換する」ことできるわけです。その色の違いのことを色差と言います。


色差

L*a*b*表色系の場合、ΔE*ab(デルタ・イースター・エー・ビー)の数値で色差を表わします。この数値からは、二つの色の方向の違いはわかりませんが、色の差を一つの数値で表わすことができます。

color_difference_sample.png
color_difference_sample_HSL.png

計算式
ΔE*ab=〔(ΔL*)^2+(Δa*)^2+(Δb*)^2〕1/2

color_difference.png img_11-6.jpg
コニカミノルタのウェブページより

3つのパラメータそれぞれの差の2乗和の平方根、いわゆるユークリッド距離(ピタゴラスの定理から算出する2点間の距離)なので、特に難しいことはありません。そのための「等色色空間」ですからね。

等色色空間の概念を理解していれば、色差の算出というのは特に難しくありません。

また、明度L*を除いて、色度図のように平面的に評価するケースもあり、そちらは「クロマネティクス指数差:Δa*b*」と呼ばれます。(a*,b*のことをクロマネティクス指数、と呼ぶようです)

均等色空間が完全に理想的なものではないため、この色差にも問題点があります。

CIELAB 色差の問題

色によっては、この数値と人の目による評価が一致しない、という問題です。
人の目の色識別域の形状が、CIE Labで定義されている色差範囲ΔE*abやΔa*b*の形状と、大きく異なっているために起こります (引用元:コニカミノルタ

人の色識別域については、コニカミノルタのWEBページに詳細にかかれています。内容としてはこれまでにも学んだMacAdamの楕円のようなものです。

完全に理想的な均等色空間が存在しないため、この問題はいかんともしがたいのかもしれません。


以上、いろいろな表色系・色空間について学んできました。しかし、世の中にはまだまだ多くの表色系が存在します。
例えば…

デザイン分野で使用される色票(色見本)を用いる顕色系として、
 マンセル表色系、オストワルト表色系、DIN表色系、OSA表色系、など。

これらは色見本があるので直感的に理解しやすいという特徴がありますが、数値計算で色を割り出す作業にはあまり向きません。(そのためこの辺りは詳しく学んでいません)

印刷業界で使用される減法混合の表現法である、CMY/ CMYK/ CMK 色空間など。

さらに、色差式にもイロイロあります。
 マークス・アンド゙・スペンサーの色差式、アダムス・ニッカーソンの色差式、
 ハンターの色差式、CIELUV色差式、CIE1994色差式、CIE2000色差式…

詳細はウィキペディアをどうぞ。


2〜3回で終わるかなと思って始めた色彩工学編ですが、およそ一月やっていた感じですね。幾何光学とはまったく異なる内容で、なかなか楽しめました。
今後レンズのコーティング周辺の技術などについても学びたいなぁ、と考えているのでこれらの知識もきっと何かで役立つことでしょう。

色の学習は、ここで一旦区切ります。


posted by ひよこデザイナ at 19:20 | Comment(1) | TrackBack(0) | 色彩工学 / 色の話 | このブログの読者になる | 更新情報をチェックする
2014年10月30日

色彩工学 その4

均等色空間(UCS:Uniform Color Space)

これまでに、以下の表色系について学んできました。

・RGB表色系
・XYZ表色系
・xyY表色系(CIE1931 xy色度)
 (そして、CIE1960 uv色度、 CIE1976 u'v'色度)

xy表色系や、u'v'表色系では、色の表現は可能ですが明るさを表現できません。XYZ3刺激値のうちYが明度を表すため、xyY、u'v'Yとすれば、色相と明度を表すことが可能です。しかし、これら3つのパラメータでは、色空間として均等にはなりません。

Gamut_xyY.gif
xyY色空間上の sRGB色域(図の引用元:Bruce Lindbloom.com
(xy色度図は平面的にしか考えたことがなかったので、この3次元図は目からウロコでした。この図のように2次元では一見、色域に入っているように見えても、色域の外にポイントが存在する可能性があるということが分かります。この図では一番上の明るいBがsRGB色域では表現しきれない、ということです)

なぜなら刺激値Yは物理的エネルギーで、人間が感じる明度(視感度がかかったもの)つまり、「心理的物理量」ではないからです。
明度は近似的にYの立方根(1/3乗)に比例するので、これを利用して明度としてL*を算出し、さらに色を表現する2つのパラメータをより均等となるよう変換して、「L*u*v*表色系」(CIELUV)と、「L*a*b*表色系」(CIELAB)が、CIEによって1976年に制定されました。

均等色度図の理想では、MacAdamの楕円がどこでも同じ大きさになることでしたが、均等色空間の理想では、色味だけでもなく明るさも均等な(理想的な)空間であること、になります。

b399ab8e.jpg
均等色空間の概念図 (図の引用元:科学をハックする

L*a*b*表色系(CIELAB)と L*u*v*表色系(CIELUV)

CIEが1976年に定めた、知覚的にほぼ均等な色空間(均等色空間 UCS:Uniform color space)で、それぞれ3つのパラメーターを3次元の直交座標に用いる色空間です。
これら2つはそれぞれに利点があるため、使用目的によって使い分けられます。

CIELAB

カラーマネジメントシステム(CMS)において、主に使われているのが、こちらCIELAB(通称:シーラブ)です。Adams-Nickerson(アダムス・ニッカーソン)の色差式を基に作られたもので、一般的に広く利用されています。
比較的大きな範囲での均等性が良いため、「大域均等性」が良いとされています。

 L* = 116(Y/Yn)^(1/3)-16
 a* = 500{(X/Xn)^(1/3)-(Y/Yn)^(1/3)} (レッド/グリーン)
 b* = 200{(Y/Yn)^(1/3)-(Z/Zn)^(1/3)}(イエロー/ブルー)

 L*:明度 (CIELAB、CIELUV ともに同じ)
 X,Y,Z:3刺激値のY,Z
 Xn,Yn,Zn:同じ照明を用いて、標準白色の完全拡散反射面を照射した時の3刺激値
  →つまり、照明光ごとの補正を行っているということ

VNMX.png
(図の引用元:Interview Helper Printing Technology

L*a*b*色空間は、物体の色を表わすのに、現在あらゆる分野で最もポピュラーに使用されている表色系なので、目に機会も多いことでしょう。

先程も、紹介したGIFと同様これも立体的に確認できます

GamutLab_WF.gif
CIELAB空間に、AdobeRGB色域をプロットしたもの(図の引用元:Bruce Lindbloom.com

ちなみに、以前紹介したColorACというアプリでも、CIELAB色空間のプロットが可能です。
CIELAB_AdobeRGB.png
AdobeRGB色域をCIELAB色空間にプロットしたもの、L*軸の上部方向からの図


CIELUV

一方、こちらはMacAdamの楕円が良くなるように作られているため、比較的小さい色の差を論じるとき(例えば写真や印刷分野などにおいて)に適しています。「局所均等性」が良い、と表現されます。


 L* = 116(Y/Yn)^(1/3)-16
 u* = 13L*(u'-un')
 v* = 13L*(v'-vn')

 u', v':CIE1976 UCS色度座標値
 Yn, un', vn':同じ照明を用いて、標準白色の完全拡散反射面を照射した時のY、u',v'

Luvspace.jpg
CIELUV色空間の斜視図 (引用元:COULUER.ORG

これらの色空間のパラメータの算出式には、「標準白色の…」という項目があり、これが理解しづらかったです。
これら色空間は基本的に物体色に適用されるもの、として制定されています。その時の照明光下における白色板の白(完全拡散反射面)を基準(いわゆるxy軸方向の原点)としますよ、ということです。つまり簡単に言ってしまえば、Xn,Yn,Znは光源の三刺激値ということになります。

ただし、自発光ディスプレイにおいても、任意の白色で正規化すれば適用可能なので、物体色に限った表色系というわけでもありません。

人間の目は環境光に対する順応性があるため、その環境下での基準となる「白(色空間ではxy方向軸の原点)」が必要、ということです。下記にある「色順応」という状況を思い浮かべれば理解しやすいでしょう。

人間は太陽のような白色光の下でも、白熱電球のように少し赤味がかった照明光の下でも白い紙は白く見えるものです。これは白熱電球の下で周囲の「赤味を帯びる」という環境に対して人間の目も赤に対する感度を下げてバランスをとろうとする働き(作用)によるものです。
このような作用を「色順応」といいます。同じ物体はどんな照明光でも同じ色に見えることが生物として生き残ってゆく(絶滅しない)ためには合理的であるといえます。この色順応は、どのような環境でも(周りが明るくとも暗くとも、明るさに関係なく)”白は白く”、”黒は黒く”見えることを意味していますが、色彩心理ではこれを「恒常」といいます。
(引用元:科学をハックする

そして、その基準白色によって各パラメータの値が変わってくるため、基準にしたものを合わせて明示する必要があります。
実際には、Ynが 100 になるように共通の係数によって正規化されます。
例えば、標準光源であるD50やD65では、以下の値になります。

 照射光 D50 :X0=96.42 Y0=100.00 Z0=82.52
 照射光 D65 :X0=95.04 Y0=100.00 Z0=108.88

これら色空間の特徴として「CIELUVは局所均等性」が良く、「CIELABは大域均等性」が良い。というものが挙げられます。

CIELAB.png.jpg
CIELUV.png.jpg
引用元:京都大学のサーバーにあった論文(PDF)より
(引用の引用になってしまいますが…)

これらからの図から「CIELABは、マンセルの等色相・等クロマ線が良く」「CIELUVは、MacAdam楕円の均一性が良い」という特徴が確認できます。(新しい言葉がでてきましたが、この辺りは次回に)

L*c*h*表色系

また、L*c*h*表色系という「L*a*b*」を元にした、表色系もありますが、これは次回登場するChroma(L*軸からの距離)と、Hue(Rを0°として反時計回りの角度)をパラメータを持つものです。
このパラメータは、a*b*を座標表記ではなく、極座標の表現にしているだけで、色空間としてはL*a*b*と同じ物になります。


この辺りで一旦区切ります。
余談ですが、幾何光学に比べると、カラーについての情報はWEB上にわんさかあるようです。コンピューター(グラフィック、デザイン、etc)にとっても色は欠かせないもの、だからでしょう。WEB徘徊していると、日本語はもちろん、英語・中国語・いろんなサイトがすぐヒットするので、多くの人が似たように勉強していたりしているのが見られて、ちょっと楽しめました。
次回は、「色の三属性」や「色差」などについてまとめます。

posted by ひよこデザイナ at 20:02 | Comment(0) | TrackBack(0) | 色彩工学 / 色の話 | このブログの読者になる | 更新情報をチェックする