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) | 色彩工学 / 色の話 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コトタマ
Posted by 言霊 at 2023年06月16日 23:37
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。