programming/tips/colorspaces/index.wiki.txt

彩度0%が無彩色、彩度100%が純色を表す

:HSL (HLS, HSI)|HSV同様、H(hue,色相)、S(saturation,彩度),L(lightness/luminance,輝度)の三要素によって色を表す

HSVと異なり、彩度に関わらず輝度0%が黒、輝度100%が白を表し、50%の場合純色を表す

#html{{

<table>

  <thead>

    <th>色</th>

    <th>表色系</th>

    <th>値</th>

  </thead>

  <tr>

    <td style="text-align: center;" rowspan="7">

      <div id="csview-preview" style="width: 120px; height: 120px; border: double 3px black;"/>

      <div id="csview-info">-</div>

      <div><input type="reset" onclick="csviewSetColor(0xff, 0xff, 0xff);"/></div>

    </td>

    <th>カラーコード</th>

    <td>

      <form>

        #<input id="csview-colorcode" type="text" size="6"/>

        <input type="button" value="set" onclick="cmviewSetColorByColorCode();"/>

      </form>

    </td>

  </tr>

    <th>RGB</th>

    <td>

      <form>

        R:<input id="csview-rgb-r" type="text" size="2"/>

        G:<input id="csview-rgb-g" type="text" size="2"/>

        B:<input id="csview-rgb-b" type="text" size="2"/>

        <input type="button" value="set" onclick="cmviewSetColorByRgb();"/>

      </form>

    </td>

  <tr>

  </tr>

  <tr>

    <th>CMY</th>

    <td>

      <form>

        C:<input id="csview-cmy-c" type="text" size="2"/>

        M:<input id="csview-cmy-m" type="text" size="2"/>

        Y:<input id="csview-cmy-y" type="text" size="2"/>

        <input type="button" value="set" onclick="cmviewSetColorByCmy();"/>

      </form>

    </td>

  </tr>

  <tr>

    <th>CMYK</th>

    <td>

      <form>

        C:<input id="csview-cmyk-c" type="text" size="2"/>

        M:<input id="csview-cmyk-m" type="text" size="2"/>

        Y:<input id="csview-cmyk-y" type="text" size="2"/>

        K:<input id="csview-cmyk-k" type="text" size="2"/>

        <input type="button" value="set" onclick="cmviewSetColorByCmyk();"/>

      </form>

    </td>

  </tr>

  <tr>

    <th>HSV</th>

    <td>

      <form>

        H:<input id="csview-hsv-h" type="text" size="3"/>

        S:<input id="csview-hsv-s" type="text" size="4"/>

        V:<input id="csview-hsv-v" type="text" size="4"/>

        <input type="button" value="set" onclick="cmviewSetColorByHsv();"/>

      </form>

    </td>

  </tr>

  <tr>

    <th>HSL</th>

    <td>

      <form>

        H:<input id="csview-hsl-h" type="text" size="3"/>

        S:<input id="csview-hsl-s" type="text" size="4"/>

        L:<input id="csview-hsl-l" type="text" size="4"/>

        <input type="button" value="set" onclick="cmviewSetColorByHsl();"/>

      </form>

    </td>

  </tr>

</table>

}}

:使い方|カラーコードもしくは各表色系での値を入力してsetをクリックすると、対応する色と他の表色系での表現を得られます

::RGB, CMY, CMYK|それぞれ16進で00～ffの範囲の数値を入力してください

::HSV, HSL|S, V, Lは0.0～1.0の範囲の数値を入力してください

Hは0～359の範囲の数値を入力してください (360を超える値は自動的に0～359の範囲に正規化します)

#javascript(csview,noscript=実行するにはJavaScriptを有効にしてください){{

$(function() {

  csviewSetColor(0xff, 0xff, 0xff);

});

function csviewSetColor(r, g, b)

{

  try {

    if (r < 0 || 255 < r)

      throw "out of range (R)";

    if (g < 0 || 255 < g)

      throw "out of range (G)";

    if (b < 0 || 255 < b)

      throw "out of range (B)";

    r = Math.round(r);

    g = Math.round(g);

    b = Math.round(b);

    var rgbHex = toPaddedHex(r) + toPaddedHex(g) + toPaddedHex(b);

    var colorCode = "#" + rgbHex;

    $("#csview-colorcode").val(rgbHex);

    $("#csview-preview").css("background-color", colorCode);

    $("#csview-info").replaceWith("<div id=\"csview-info\">" + colorCode + "<br/>" + "rgb(" + r + ", " + g + ", " + b + ");</div>");

    csviewSetRgb(r, g, b);

    csviewSetCmy(r, g, b);

    csviewSetCmyk(r, g, b);

    csviewSetHsv(r, g, b);

    csviewSetHsl(r, g, b);

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewPrintError(e)

{

  $("#csview-info").text(e);

}

function min3(x, y, z)

{

  return Math.min(Math.min(x, y), z);

}

function max3(x, y, z)

{

  return Math.max(Math.max(x, y), z);

}

function toPaddedHex(x)

{

  var h = Math.round(x).toString(16);

  if (h.length == 1)

    return "0" + h;

  else

    return h;

}

function getHexValueOf(id)

{

  var val = parseInt($(id).val(), 16);

  if (isNaN(val))

    throw "invalid value (" + id + ")";

  else if (val < 0 || 255 < val)

    throw "out of range (" + id + ")";

  return val;

}

function getValueOf(arg)

{

  var val = parseFloat($(arg.id).val());

  if (isNaN(val))

    throw "invalid value (" + arg.id + ")";

  else if (arg.min !== undefined && val < arg.min)

    throw "out of range (" + arg.id + ")";

  else if (arg.max !== undefined && arg.max < val)

    throw "out of range (" + arg.id + ")";

  return val;

}

function cmviewSetColorByColorCode()

{

  try {

    var rgb = parseInt($("#csview-colorcode").val(), 16);

    if (isNaN(rgb))

      throw "invalid value";

    else if (rgb < 0 || 0xffffff < rgb)

      throw "out of range";

    csviewSetColor((rgb >> 16) & 0x0000ff,

                   (rgb >>  8) & 0x0000ff,

                    rgb        & 0x0000ff);

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function cmviewSetColorByRgb()

{

  try {

    csviewSetColor(getHexValueOf("#csview-rgb-r"),

                   getHexValueOf("#csview-rgb-g"),

                   getHexValueOf("#csview-rgb-b"));

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewSetRgb(r, g, b)

{

  $("#csview-rgb-r").val(toPaddedHex(r));

  $("#csview-rgb-g").val(toPaddedHex(g));

  $("#csview-rgb-b").val(toPaddedHex(b));

}

function cmviewSetColorByCmy()

{

  try {

    csviewSetColor(255 - getHexValueOf("#csview-cmy-c"),

                   255 - getHexValueOf("#csview-cmy-m"),

                   255 - getHexValueOf("#csview-cmy-y"));

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewSetCmy(r, g, b)

{

  $("#csview-cmy-c").val(toPaddedHex(255 - r));

  $("#csview-cmy-m").val(toPaddedHex(255 - g));

  $("#csview-cmy-y").val(toPaddedHex(255 - b));

}

function cmviewSetColorByCmyk()

{

  try {

    var c = getHexValueOf("#csview-cmyk-c");

    var m = getHexValueOf("#csview-cmyk-m");

    var y = getHexValueOf("#csview-cmyk-y");

    var k = getHexValueOf("#csview-cmyk-k");

    csviewSetColor(Math.max(0, 255 - c - k),

                   Math.max(0, 255 - m - k),

                   Math.max(0, 255 - y - k));

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewSetCmyk(r, g, b)

{

  var k = min3(255 - r, 255 - g, 255 - b);

  $("#csview-cmyk-c").val(toPaddedHex(255 - r - k));

  $("#csview-cmyk-m").val(toPaddedHex(255 - g - k));

  $("#csview-cmyk-y").val(toPaddedHex(255 - b - k));

  $("#csview-cmyk-k").val(toPaddedHex(k));

}

function cmviewSetColorByHsv()

{

  try {

    var h = getValueOf({id: "#csview-hsv-h", min: 0.0});

    var s = getValueOf({id: "#csview-hsv-s", min: 0.0, max: 1.0});

    var v = getValueOf({id: "#csview-hsv-v", min: 0.0, max: 1.0});

    for (;;) {

      if (h < 360)

        break;

      else

        h -= 360;

    }

    v *= 255;

    var r, g, b;

    if (s == 0.0) {

      r = v;

      g = v;

      b = v;

    }

    else {

      var p = v * (1.0 - s);

      var ht = h * 6;

      var d = ht % 360;

      ht = Math.floor(ht / 360);

      if (ht % 2 == 0) {

        var t = v * (1.0 - s * (360 - d) / 360);

        switch (ht) {

          case 0:  r = v; g = t; b = p; break;

          case 2:  r = p; g = v; b = t; break;

          default: r = t; g = p; b = v; break;

        }

      }

      else {

        var q = v * (1.0 - s * d / 360);

        switch (ht) {

          case 1:  r = q; g = v; b = p; break;

          case 3:  r = p; g = q; b = v; break;

          default: r = v; g = p; b = q; break;

        }

      }

    }

    csviewSetColor(r, g, b);

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewSetHsv(r, g, b)

{

  var max = max3(r, g, b);

  var min = min3(r, g, b);

  var d = max - min;

  var h, s, v;

  v = max / 255.0;

  if (d == 0)

    s = 0.0;

  else

    s = d / max;

  if (d == 0) {

    h = 0;

  }

  else {

    var rt = max - (r * 60.0 / d);

    var gt = max - (g * 60.0 / d);

    var bt = max - (b * 60.0 / d);

    if (r == max)

      h = bt - gt;

    else if (g == max)

      h = rt - bt + 120.0;

    else

      h = gt - rt + 240.0;

    if (h < 0)

      h += 360.0;

  }

  $("#csview-hsv-h").val(h.toFixed(0));

  $("#csview-hsv-s").val(s.toFixed(2));

  $("#csview-hsv-v").val(v.toFixed(2));

}

function cmviewSetColorByHsl()

{

  try {

    var h = getValueOf({id: "#csview-hsl-h", min: 0.0});

    var s = getValueOf({id: "#csview-hsl-s", min: 0.0, max: 1.0});

    var l = getValueOf({id: "#csview-hsl-l", min: 0.0, max: 1.0});

    for (;;) {

      if (h < 360)

        break;

      else

        h -= 360;

    }

    // HSL to RGB

    //   http://www.geekymonkey.com/Programming/CSharp/RGB2HSL_HSL2RGB.htm

    //   http://www.kanazawa-net.ne.jp/~pmansato/wpf/wpf_hsl.htm

    var v = (l <= 0.5) ? l + l * s : (l + s - l * s);

    if (v <= 0) {

      r = l;

      g = l;

      b = l;

    }

    else {

      h = h / 60.0; // (h / 360 * 6)

      var ht = Math.floor(h);

      var m = l + l - v;

      var vsf = (v - m) * (h - ht);

      if (ht % 2 == 0) {

        var t = m + vsf;

        switch (ht) {

          case 0:  r = v; g = t; b = m; break;

          case 2:  r = m; g = v; b = t; break;

          default: r = t; g = m; b = v; break;

        }

      }

      else {

        var t = v - vsf;

        switch (ht) {

          case 1:  r = t; g = v; b = m; break;

          case 3:  r = m; g = t; b = v; break;

          default: r = v; g = m; b = t; break;

        }

      }

    }

    csviewSetColor(r * 255, g * 255, b * 255);

  }

  catch (e) {

    csviewPrintError(e);

  }

}

function csviewSetHsl(r, g, b)

{

  var max = max3(r, g, b);

  var min = min3(r, g, b);

  var sum = max + min;

  var d = max - min;

  var h, s, l;

  l = sum / 510.0;

  if (min == max) {

    s = 0.0;

    h = 0.0;

  }

  else {

    if (255 < sum)

      sum = 510 - sum;

    s = d / sum;

    var rr = (max - r) / d;

    var gg = (max - g) / d;

    var bb = (max - b) / d;

    if (r == max)

      h = 60.0 * (6.0 + bb - gg);

    else if (g == max)

      h = 60.0 * (2.0 + rr - bb);

    else /*if (b == max)*/

      h = 60.0 * (4.0 + gg - rr);

    h = Math.round(h);

    if (360 <= h)

      h -= 360

  }

  $("#csview-hsl-h").val(h.toFixed(0));

  $("#csview-hsl-s").val(s.toFixed(2));

  $("#csview-hsl-l").val(l.toFixed(2));

}

}}

*変換式

**RGB⇄CMY

.NET FrameworkのColor構造体に用意されているメソッド&msdn(netfx,method,System.Drawing.Color.GetHue){GetHue()};, &msdn(netfx,method,System.Drawing.Color.GetSaturation){GetSaturation()};, &msdn(netfx,method,System.Drawing.Color.GetBrightness){GetBrightness()};を用いることでRGBからHSLへの変換ができる。　なお、ドキュメントではこれらのメソッドはHSB表色系の値を返すように記述されているが、実際に返される値はHSL表色系になっている模様。

#tabpage(C#)

#code(cs){{

using System;

using System.Drawing;

class Sample {

  public static void Main()

  {

    foreach (var col in new[] {

      Color.Red,

      Color.Yellow,

      Color.Lime,

      Color.Cyan,

      Color.Blue,

      Color.Magenta,

      Color.Black,

      Color.Gray,

      Color.White,

      Color.FromArgb(0xff, 0xa0, 0xa0),

      Color.FromArgb(0xff, 0x80, 0x80),

      Color.FromArgb(0xc0, 0x60, 0x60),

      Color.FromArgb(0x80, 0x40, 0x40),

    }) {

      Console.Write("RGB({0:D3}, {1:D3}, {2:D3}) => ", col.R, col.G, col.B);

      Console.WriteLine("HSL({0,6:N2}, {1,7:P2}, {2,7:P2})", col.GetHue(), col.GetSaturation(), col.GetBrightness());

    }

  }

}

}}

#tabpage(VB.NET)

#code(vb){{

Imports System

Imports System.Drawing

Class Sample

  Public Shared Sub Main()

    For Each col As Color In New Color() { _

      Color.Red, _

      Color.Yellow, _

      Color.Lime, _

      Color.Cyan, _

      Color.Blue, _

      Color.Magenta, _

      Color.Black, _

      Color.Gray, _

      Color.White, _

      Color.FromArgb(&hFF, &hA0, &hA0), _

      Color.FromArgb(&hFF, &h80, &h80), _

      Color.FromArgb(&hC0, &h60, &h60), _

      Color.FromArgb(&h80, &h40, &h40) _

    }

      Console.Write("RGB({0:D3}, {1:D3}, {2:D3}) => ", col.R, col.G, col.B)

      Console.WriteLine("HSL({0,6:N2}, {1,7:P2}, {2,7:P2})", col.GetHue(), col.GetSaturation(), col.GetBrightness())

    Next

  End Sub

End Class

}}

#tabpage-end

#prompt(実行結果){{

RGB(255, 000, 000) => HSL(360.00, 100.00%,  50.00%)

RGB(255, 255, 000) => HSL( 60.00, 100.00%,  50.00%)

RGB(000, 255, 000) => HSL(120.00, 100.00%,  50.00%)

RGB(000, 255, 255) => HSL(180.00, 100.00%,  50.00%)

RGB(000, 000, 255) => HSL(240.00, 100.00%,  50.00%)

RGB(255, 000, 255) => HSL(300.00, 100.00%,  50.00%)

RGB(000, 000, 000) => HSL(  0.00,   0.00%,   0.00%)

RGB(128, 128, 128) => HSL(  0.00,   0.00%,  50.20%)

RGB(255, 255, 255) => HSL(  0.00,   0.00%, 100.00%)

RGB(255, 160, 160) => HSL(360.00, 100.00%,  81.37%)

RGB(255, 128, 128) => HSL(360.00, 100.00%,  75.10%)

RGB(192, 096, 096) => HSL(360.00,  43.24%,  56.47%)

RGB(128, 064, 064) => HSL(360.00,  33.33%,  37.65%)

}}

**VB.NETでのRGB, CMYK, HSV相互変換の実装例

***構造体宣言