プログラミング講座(52) 色合い、鮮やかさ、明るさ
色を作り出すとき、RGBの値の組み合わせがどんな色になるのかは経験を積まないと分かりにくいと思います。絵具を混ぜるように、もっと直感的に色を作りやすいようにHSLカラーモデルが作られました。ドイツのオストワルトというノーベル賞化学者が作り出した表色系がベースになっています。
HSLは日本語では色合い(色相)、鮮やかさ(飽和)、明るさ(明度)と訳されていますが、英語ではHue、Saturation、Lightnessという単語が使われています。HSL以外にもさまざまなカラーモデルがあり、RGBからの計算方法もモデルによって異なります。
今回は、Windowsに標準添付されている描画ソフト「ペイント」やMicrosoft Officeシリーズの色指定で使われるHSLカラーモデルの色合い、鮮やかさ、明るさについてサンプルプログラムを書き直してみました。プログラムは MXV150-0 として「発行」しました。
図で、H=として表示されるのが、色合い(Hue)です。この値によってどんな色なのかが示されます。プログラム内部の変換ルーチンColor_RGBtoHSLでは、0から360未満の実数の値を取るようにしましたが、表示する際に0から255の整数を表示するようにしました。Microsoft Office(以下Office)も同様に色合いは0から255の整数で表されます。ペイントの場合は0から239の整数で表されます。整数表示の場合、赤(Red)が0、黄(Yellow)が43、緑(Lime)が85、シアン(Cyan)が128、青(Blue)が171、マゼンタ(Magenta)が213となります。白、黒、灰色などの無彩色の場合、未定義(undefined)の値になります。表示は "N/A" (not available)としました。Officeの場合の無彩色は170、ペイントの場合の無彩色は160が便宜的に割り当てられているようです。
図で、S=として表示されるのが、鮮やかさ(Saturation)です。RGBのうち1つか2つの値が0の色は最も鮮やかで、RGBの値が全て同じ色は無彩色で最も鮮やかでないということになります。プログラム内部では0から1までの実数、表示の際は0から255の整数で表しました。無彩色が0、最も鮮やかな色が255になります。Officeも鮮やかさは0から255、ペイントでは0から240で表されています。
別のカラーモデルの鮮やかさには彩度(Chroma)と呼ばれる値もあります。Chromaの場合、DarkRed #880000 の値は Red #FF0000 の値より小さくなります。Saturation の場合はどちらも同じ値です。
図で、L=として表示されるのが、明るさ(Lightness)です。前回のプログラムでは内部でも0から255の整数で表しましたが、今回は内部では0から1の実数、表示の際に0から255の整数に変換しています。RGBの値のうち最も大きい値と最も小さい値の平均をとったのがLightnessです。黒が0、白が255になります。Officeの場合も0から255の整数、ペイントの場合は0から240の整数で表されます。上記の色合いのところで説明した6つの有彩色(赤、黄、緑、シアン、青、マゼンタ)のLightnessが白と黒の中間(整数なら128)になるようになっています。目で見た場合、赤や青より黄や緑のほうが明るく見えると思いますが、Lightnessはそのような絶対的な明るさではなく、相対的な明るさを示しています。
別のカラーモデルの明るさにはValueやIntensityと呼ばれる他の計算方法によるものもあります。
前回のプログラムではLightnessも整数として計算したのですが、今回RGBtoHSL、HSLtoRGBの変換ルーチンを作ってみたところ、HSLを整数で表すと、RGB→HSL→RGBと変換した時に元に戻らなくなってしまいました。そのため、プログラム内部ではHSLは実数で表すことにしました。
今回はHSLカラーモデルでの色の3属性(色合い、鮮やかさ、明るさ)について学びました。RGBとの変換についてはJ. D. Foley / A. van Dam著、今宮淳美訳『コンピュータ・グラフィックス』のロジックを使用しました。この本も絶版になっています。
次回は色のトーンについて学びます。
(つづく)
| 固定リンク
「Small Basic」カテゴリの記事
- プログラミング講座 (202) 1次元セルオートマトン(2020.09.20)
- プログラミング講座 (201) パラメーター(2020.09.14)
- プログラミング講座 (200) 3次ベジエ曲線(2020.09.14)
- プログラミング講座 (199) スーパー三角関数?(2020.09.02)
- プログラミング講座 (198) スーパー楕円(2020.09.01)
「私の本棚」カテゴリの記事
- プログラミング講座(203) 人間にしかできない何か(2020.11.11)
- 本になった私のブログ 5(2020.10.26)
- BASIC (1) 再び BASIC(2020.05.29)
- 本になった私のブログ 4(2019.02.24)
- C# (4) ここからどう進めるか(2019.02.20)
「色」カテゴリの記事
- プログラミング講座(124) 桜(2013.04.04)
- プログラミング講座(123) グラデーション完成版(2013.03.31)
- プログラミング講座(118) グラデーション(2013.03.10)
- プログラミング講座(80) カラーパレット(2012.09.11)
- プログラミング講座(65) Small Basic でスライダーを作ってみた(2012.06.23)
コメント