mikeo_410


用語

  24ビットRGBで表されるある色の3要素 R、G、B の値が r、g、b のとき、r、g、b の最大値、最小値を、それぞれmax、minと書くことにします。

  色に関する用語は、光源、照明、見える色、天文学、デザイン、慣用と異なる定義があるようです。
  ここでは、目で見える色のことを考えていて、しかもパソコンで表示することをテーマにしています。

1.明るさ

  1. 光度(Luminous Intensity)
    光源の明るさ。カンデラ(cd)など。
  2. 照度(Illuminance)
    平面に当たる光の明るさ。ルクス(lx)、ルーメン毎平方メートル(lm/㎡)。
  3. 明度(Brightness)
    目やカメラの受け取る明るさ。
    HSB、HLS(HSL) : (min + max) / 510
    HSV: max / 255
    色による差異を考慮していない。
  4. 輝度(Luminance)
    目やカメラの受け取る明るさ。
    L*a*b* では、r、g、bに異なる係数を掛けて輝度が算出される。
    色による差異を考慮している。

2.光の原色

  赤(625-740nm,405-480THz)、緑(500-565nm,530-600THz)、青(450-485nm,620-665THz)。
  自然光(白色光)には、いろいろな周波数の光が連続的に存在するが、代表的な周波数のみで色が作れると考える。

3.色の原色

  シアン、マゼンタ、イエロー。

4.心理四原色

  赤、青、黄、緑。
  色相環図や補色と言った概念の元。

5.減法混色

  白い紙は、自然光(太陽光、白色光、可視範囲の周波数を均質に含む)の各波長を均質に反射している。
  絵の具を塗ると、絵の具は特定の周波数を吸収して色を生じる。
  このときの原色は、シアン、マゼンタ、イエロー。
  CMYK(色空間)と呼ばれ、黒を加えて印刷等で使われる。
  印刷のインクの最小の色は CMK で、これも使われている。

6.加法混色 

  液晶モニタは、背面に蛍光灯や反射板など光源を持ち、原色フィルタを通過する光量を調節して色を表現している。
  同じに見える色を作る、光源、フィルタの組み合わせが無数にあるが、標準的に、赤(625-740nm,405-480THz)、緑(500-565nm,530-600THz)、青(450-485nm,620-665THz)が使われる。

7.グレースケール、黒、白

  色の話では、暗黙的にグレースケール、黒、白を対象にしていないことがある。
  グレーは、
  r = g = b 
  の、ことでRGB(0,0,0)は黒で、(255,255,255)は白。
  視覚の話なので、幅を持っている。
  レンジ(max-min)の値が小さいときの色相(Hue)は視覚的には有効ではない。
  レンジがゼロ(グレー)のHueはゼロ度にしているようだ。

8.彩度(Saturation)

  カラフルさ(鮮やかさ)の度合い。r = g = b は、グレーで、彩度はゼロとなる。r + g + b がゼロ近傍の黒、最大値(255x3)近傍の白も彩度はゼロ。
  min と max から計算されるので、もう1色は彩度に影響しない。
  maxも0から255だが、この大小によらず、彩度は0から1範囲になる。
  HSVの場合:
  (max-min) / max (ただし、max = min = 0 は、ゼロとする。)
  HSBの場合:
  (max-min) / (255 - |max + min - 255|) (ただし、max = min = 0 は、ゼロとする。)

※HSBは、System.Drawing.Color.GetSaturation() の場合。

  計算結果の違いが分からないので図にしてみる。

 

  彩度は、0 - 1 です。10段階にわけ、左の色から10色で色分けして表示する。

  彩度は、R,G,B の色によらず、3つの値の、最大値と最小値から計算される。

  彩度を計算した図は、横が最大値、縦が最小値を表す。
  たとえば、RGB(64,96,128)と言う色の彩度は、横軸の値が128で、縦軸が64の位置(128,64)の色が表す値に計算される。

  r,g,b は、0から255の範囲なので、レンジの最大値は、最小値がゼロのときで横軸の値(最大値)と同じ値になる。このとき彩度が最大の1になる。図のX軸の沿って彩度が1となっている。
  最大値と最小値が等しい(レンジがゼロの)対角線上は、彩度が最小のゼロになる。

 

 

9.色相(Hue)

  RGBの3要素から1つを選び、0から255まで変化させる。他の2つは、ゼロと255に固定する。
  (255,g,0),(r,255,0),(0,255,b),(0,g,255),(r,0,255),(255,0,b) の6つの領域を、この順番で色を塗ると、左図中央の帯になる。

 これは、Wikipediaのマンセルの色相環図と、上から時計回りに同じような色の順序になっている。

  左図の作図で、「他の2つは、ゼロと255に固定」しているのは、彩度の大きい部分を描画することを意味する。グレースケール、黒、白の色相、あるいは彩度がゼロの色相はない。プログラミング上は、ゼロ度が返されるようだ。近傍の色相も、目で区別が付かない部分では意味がない。

  Hue のゼロを上に、時計回りに18°ごとに表示すると、マンセルの色相環図と異なり赤の反対色が緑にならない。

10.補色

  色相環の、180°の関係を補色と言うようだが、表色系は記されていない。前述の色相のように表色系によって異なる色が補色となる。
  しかし、本来は人の感性の話なので、赤と緑が補色で、機械的に作成したHSV(HSB)の相環図での補色は不適切だと思う。

11.反対色

  補色と同じに使われるが、補色より広い範囲を指すと言うことらしい。

12.sRGB 

  IECの規格。液晶モニタなどの機器のRGBは、これに準拠している。

13.scRGB

  System.Windows.Media の Color には、scR,scG,scB がある。次期Windowsの標準色空間になる。各職16ビットで写真フィルムのダイナミックレンジがある。

14.太陽光

  光源の性質としては、自然光の方が使われるように思う。太陽光発電のようにエネルギーの話では曇天や室内はあまり使わない。

15.自然光

  太陽由来の光。可視範囲の周波数が一様に含まれ、平行光線で、どこにでもあり、実験に便利。

16.白色光

  自然光を一様に反射するものはグレーで色がない。明るければ白に見える。
  ただし、3原色があることから、白に見えるためには、光源に広い範囲の周波数成分が必要なわけではなく、原色が適切な強さでそろえば良い。
  いずれも白色光と言うのだと思う。

17.カラー・モデル

  表色系のこと。

18.カラー・システム

  印刷や塗装などで色指定や調色などが一連で行われるような場合にカラー・システムと言うようだ。
  表色系や色空間のことも言うようだ。

19.測色系

  RGB、XYZ は測色系の一種と言うらしい。表色系のうち光源などの条件が定められていて測定値からデジタル化するもの。

20.色空間

  1. 表色系と同様「何々色空間」と使われる。
  2. カラーの数値表現の分布が立体になることから、色のセットのこと。
    この場合は、表色系の一部(電子的な測定結果を元にした表色系)を主に示す。
  3. 表色系は、名前があり、標準や規格として定められているものに付けられるようだ。これに対して色空間は、それらを包含して単に「色のセット」の意味で使われる。

21.表色系

  カラー・モデル。色空間と明瞭な区別はないようだ。表色系は「何々表色系」と使われるので、定義が明確な名前のあるものに使われるようだ。
  表色系には、主に起源によって以下のものがある。

  1. カメラ、受像機など電子技術によるもの。入力と出力が数式で表せる。
    色の心理的な認識の知識に合うように考慮されるが、機器として実現できることが目的なので一致するとは限らない。
  2. 色票、カーラー・サンプルなどで決められているもの。理論や法則性があるが、単純な測定値から単純な式が導かれるわけではない。そもそも人の感性で作られる。

  わたしに扱えるのは、「画像処理」で使われる前者のみで、このうち調べたものを挙げる。
  (HSBは、System.Drawing.ColorのGetHue()、GetSaturation()、GetBtightness()で検算しました。その他は、R言語のcolorspaceパッケージで調べました。HSLとHLSが同じものだと思って書いています。)

 

表色系

標準化

要素

概要

RGB

CIE

R:赤
G:緑
B:青

各原色の周波数を定めて、その各周波数の大きさを測色して色を表す。CIEの国際標準が使われる。標準の意味で、sRGBと言う。ダイナミックレンジを広げたscRGBがある。
RGB
の各色を表すのに8ビットが使われる。
0から255のダイナミックレンジで、255が表現可能な最大エネルギーを示す。
RGB
は、原色とする3周波数の加法混色で表現可能な色を表現できる。

XYZ

CIE


 

RGBで作れない色があり、RGBより感覚に合う3原色を設定した。
RGBとの関係:
X = 0.412453r + 0.357580g + 0.180423b
Y = 0.212671r + 0.715160g + 0.072169b
Z = 0.019334r + 0.119193g + 0.950227b
この値に100を掛けて、[0..100]として使うようだ。

CYMK


 

C
シアン
Y
イエロー
M
マゼンタ
K:黒

カラープリンタなどのインクで色を作る場合の減法混色。CYMだけで黒にならないことからKを加える。
最小のインクの組み合わせは、CMKで、これも使われる。
直接パソコンで扱わないので数値化の方法は分からない。

HSB


 

H:色相
S:彩度
B:明度

RGBでは値から直ちに色が分からない。色の変化を連続的な色相で表すようにRGBからHSBに変換する。独自の測色方法があるわけではないようだ。C#では、System.Drawing.Color構造体に、HSBの色相、彩度、明度を返すメソッドがある。色相は0から360°。彩度、明度は、0から1
max=R のとき、H = 60 x (g - b) / (max - min)
max=Gのとき、H = 60 x (b - r) / (max – min) + 120
max=Bのとき、H = 60 x (r - g) / (max – min) + 240
H < 0
なら、H = H + 360
S = (max – min) / (255 - |255 – (max + min)|)
B = (max + min) / 510

HSV


 

H:色相
S:彩度
V:明度

明度をVと表す。色の変化を連続的な色相で表すようにRGBからHSVに変換する。独自の測色方法があるわけではないようだ。
H は、HSBに同じ
S = (max – min) / max
V = max / 255

HLS

(HSL)

 


 

H:色相
S:彩度
L:明度

HSLLは、Lightnessで明度と訳される。色の変化を連続的な色相で表すようにRGBからHSLに変換する。独自の測色方法があるわけではないようだ。W3CCSS3HSLが使われる。
H は、HSBに同じ
L = (max + min) / 510
max=min なら、 S = 0
L <= 0.5 なら、S = (max – min) / (max + min)
L > 0.5
なら、S = (max – min) / (510 - (max + min))

L*a*b*

CIE

L*:輝度a*
b*

2つの色の差を比較することができる。各要素の差の平方和の平方根を色の距離とする。
算出方法は、別途掲載。
R言語のcolorspaceでは、Lは[0..100]、a*、b*は、[-100..100]。

RGB から L*a*b* へ(R言語)  

  1. # RGB[0..255] => Lab
  2. Lab <- function(r, g, b)
  3. {
  4.     # サブルーチン -------------------------------------------
  5.     gamma <- function(t)
  6.     {
  7.        t <- t/255
  8.        if(t > 0.03928) d <- ((t + 0.055) / 1.055)^2.2
  9.        else d <- t / 12.92
  10.      return(d)
  11.     }
  12.     f <- function(t)
  13.     {
  14.        if(t > 0.008856) d <- (t ^ (1/3))
  15.        else d<- (903.3*t + 16)/116
  16.        return(d)
  17.     }
  18.     # RGB 正規化、ガンマ補正 ---------------------------------------
  19.     r <- gamma(r)
  20.     g <- gamma(g)
  21.     b <- gamma(b)
  22.     # RGB => XYZ ([0..100]) ----------------------------------
  23.     X = (0.412453*r + 0.357580*g + 0.180423*b) * 100
  24.     Y = (0.212671*r + 0.715160*g + 0.072169*b) * 100
  25.     Z = (0.019334*r + 0.119193*g + 0.950227*b) * 100
  26.     # XYZ[0..100] => Lab (L:[0..100],a:[-100..100],b:[-100..100]) --- 
  27.     X <- X/95.047  #98.072
  28.     Y <- Y/100
  29.     Z <- Z/108.883 #118.225
  30.     if(Y > 0.008856) L <- 116 * (Y^(1/3)) - 16
  31.     else L <- 903.3*Y
  32.     aa <- 500 * (f(X) - f(Y))
  33.     bb <- 200 * (f(Y) - f(Z))    
  34.     return(c(L,aa,bb))
  35. }

 22.HSB、HSV、HSL、HLS

  根拠はないがHSLとHLSは同じものだと解釈している。
  それ以外はRGBからの変換では異なるもののようだ。(前述の表を参照)

  1. Hueは、同じ計算
  2. 彩度は、個別
  3. 明度は、HSBとHSLが同じ計算

 (HSBは、System.Drawing.ColorのGetHue()、GetSaturation()、GetBtightness()で検算しました。その他は、R言語のcolorspaceパッケージで調べました。HSLとHLSが同じものだと思って書いています。)
 

  HSB と HSV の 彩度の比較。System.Drawing.Color1のGetSaturation()の値と、HSV、HSLの彩度を比較してみた。それぞれ黒、赤、緑で、赤と緑は2pixel幅で書いてある。HSVよりHSLと一致しているように見える。

 

23.投影、透視、透視投影

  投影図法は、平行投影図法に同じ。
  透視図法は、透視投影図法に同じ。
  で、あるらしい。
  機械図面や数学で出てくる図のように遠近法の使われていない図は、投影図と言うことになる。
  スクリーンに描画するものとして、視点と描画対象の物体の間にスクリーンがあるのを透視、スクリーンが物体の背後にあるのを投影と言ったのではないかと想像する。この場合スクリーンの位置は、縮尺を決めることになる。
  XAML(WPF)では、スクリーンの位置はなく、視野角がこの機能をする。したがって、透視と投影の区別はない。しいて言えば、縮尺が1で区分される。XAMLの場合、透視は何が透けるのか明瞭でないので、投影を使うのが良さそうだ。
  XAMLでも、平行投影か遠近法かは重要だ。
  Orthographic カメラは、遠近法のない投影をする。
  Perspective カメラは、遠近法が使われる。

24.遠近法

  Wikipedia には、「遠近感を持った表現を行う手法」とあり、「透視図法」について説明している。他に、「空気遠近法(色彩遠近法)」がある。

25.透視図法

  目に映る像を平面に正確に写すための技法。
  視点と描画対象の物体の間にスクリーンがあり、物体の点と視点を結ぶ直線と、スクリーンの交点を、物体の図形としてスクリーンに描く。

26.平行投影、正投影

  遠近法のない、機械図面や数学の挿絵のような表示を、XAML(WPF)では、正投影法と説明している。Orthographic カメラがこの機能をする。(Orthographic projection は、垂直投影と訳されるようだ。)
  製図の世界では、正投影は正面図、側面図、底面図を得ることのようだ。
  遠近法の有無は、透視図法か平行投影図法かと表現することにする。
  平行投影には、正投影のほかに以下のものがある。

27.消失点

  Wikipedia の「遠近法」の説明では、消失点はゼロから無限大と言うことのようだ。図に出てくる平行関係にある線分の組の数だけある。
  水平線に平行でない限り、水平線に収れんすると言った説明もある。
  2点投影図、3点投影図などの点も消失点と言うようだ。

28.1、2、3点投影図 

  これは、製図の用語で、リアルな見た目の図を作ることとは別の目的のものだと解釈する。

  左図は、立方体(0,10,0)-(20,-10,20)を、水平なX-Z平面上の対角線方向から見た図。
  これが、2点投影の状態で、個別の図形では視点の位置で投影図が得られる。
  複数の図形や形状が不規則なものは、そもそも2点投影で1通りに現せないのではないかと考える。

 


ECサイト構築 Web制作 京都 不動産査定 エスティマ 田園都市線 不動産