はじめに

HSLカラー値をRGBカラー値に変換するコードを紹介します。

プログラム例

Webアプリケーションプロジェクトを新規に作成します。

UI

下図のUIを準備します。

コード

以下のコードを記述します。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Drawing;

namespace ColorCalc
{
  public partial class HlsToColor : System.Web.UI.Page
  {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button_Convert_Click(object sender, EventArgs e)
    {
      double d_hue = 0;
      double d_lightness = 0;
      double d_saturation = 0;

      try {
        if (RadioButton_HSLInput.Checked == true) {
          d_hue = Convert.ToDouble(TextBox_H.Text);
          d_lightness = Convert.ToDouble(TextBox_L.Text);
          d_saturation = Convert.ToDouble(TextBox_S.Text);
        }
        else {
          d_hue = Convert.ToDouble(TextBox_HPer.Text);
          d_lightness = Convert.ToDouble(TextBox_LPer.Text) / 100f;
          d_saturation = Convert.ToDouble(TextBox_SPer.Text) / 100f;
        }
      }
      catch (FormatException exc) {
      }

      ColorRGB result = ColorFunction.HslToRgb(d_hue, d_saturation, d_lightness);

      TextBox_R.Text = Convert.ToString(result.R);
      TextBox_G.Text = Convert.ToString(result.G);
      TextBox_B.Text = Convert.ToString(result.B);

      string WebColor = string.Format("#{0:X2}{1:X2}{2:X2}", result.R, result.G, result.B);
      TextBox_WebColor.Text = WebColor;

      Color inputColor = Color.FromArgb(result.R, result.G, result.B);

      string strColor = string.Format("#{0:X2}{1:X2}{2:X2}", inputColor.R, inputColor.G, inputColor.B);

      Label_AddditionalInfo.Text = string.Format("WebColor:{0:s}     RGB値({1:d},{2:d},{3:d})",
        strColor, inputColor.R, inputColor.G, inputColor.B);

      Literal_ColorBox.Text = string.Format("<div style=\"background-color:{0:s};width:64px;height:64px;float:left;\"></div>", strColor);
    }
  }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ColorCalc
{
  public class ColorRGB
  {
    public int R { get; set; }
    public int G { get; set; }
    public int B { get; set; }
  }

  public class ColorHSL
  {
    public double H { get; set; }
    public double S { get; set; }
    public double L { get; set; }
  }

  public static class ColorFunction
  {
    public static ColorRGB HslToRgb(double h, double s, double l)
    {
      h = h % 360;
      if (h < 0) h += 360; // 負の値を正に補正

      s = Math.Max(0, Math.Min(1, s));
      l = Math.Max(0, Math.Min(1, l));

      double c = (1 - Math.Abs(2 * l - 1)) * s;
      double x = c * (1 - Math.Abs((h / 60) % 2 - 1));
      double m = l - c / 2;

      double rPrime = 0, gPrime = 0, bPrime = 0;

      if (h < 60) {
        rPrime = c; gPrime = x; bPrime = 0;
      }
      else if (h < 120) {
        rPrime = x; gPrime = c; bPrime = 0;
      }
      else if (h < 180) {
        rPrime = 0; gPrime = c; bPrime = x;
      }
      else if (h < 240) {
        rPrime = 0; gPrime = x; bPrime = c;
      }
      else if (h < 300) {
        rPrime = x; gPrime = 0; bPrime = c;
      }
      else {
        rPrime = c; gPrime = 0; bPrime = x;
      }

      byte r = (byte)Math.Round((rPrime + m) * 255);
      byte g = (byte)Math.Round((gPrime + m) * 255);
      byte b = (byte)Math.Round((bPrime + m) * 255);

      return new ColorRGB { R = r, G = g, B = b };
    }
  }
}

解説

計算式の詳細はこちらのページを参照しください。

計算式は下図になります。

コードの解説

以下のコードにより、入力用のテキストボックスから値を取得します。

  double d_hue = 0;
  double d_lightness = 0;
  double d_saturation = 0;

  try {
    if (RadioButton_HSLInput.Checked == true) {
      d_hue = Convert.ToDouble(TextBox_H.Text);
      d_lightness = Convert.ToDouble(TextBox_L.Text);
      d_saturation = Convert.ToDouble(TextBox_S.Text);
    }
    else {
      d_hue = Convert.ToDouble(TextBox_HPer.Text);
      d_lightness = Convert.ToDouble(TextBox_LPer.Text) / 100f;
      d_saturation = Convert.ToDouble(TextBox_SPer.Text) / 100f;
    }
  }
  catch (FormatException exc) {
  }

以下のコードが計算結果をテキストボックスに出力するコードです。 テキストボックスへ値を表示するだけでなくLiterlコントロールに入力値の色の背景色のボックスを表示します。

      TextBox_R.Text = Convert.ToString(result.R);
      TextBox_G.Text = Convert.ToString(result.G);
      TextBox_B.Text = Convert.ToString(result.B);

      string WebColor = string.Format("#{0:X2}{1:X2}{2:X2}", result.R, result.G, result.B);
      TextBox_WebColor.Text = WebColor;

      Color inputColor = Color.FromArgb(result.R, result.G, result.B);

      string strColor = string.Format("#{0:X2}{1:X2}{2:X2}", inputColor.R, inputColor.G, inputColor.B);

      Label_AddditionalInfo.Text = string.Format("WebColor:{0:s}     RGB値({1:d},{2:d},{3:d})",
        strColor, inputColor.R, inputColor.G, inputColor.B);

      Literal_ColorBox.Text = string.Format("<div style=\"background-color:{0:s};width:64px;height:64px;float:left;\"></div>", strColor);

実行結果

プロジェクトを実行します。Webブラウザが起動し、下図のページが表示されます。


テキストボックスに値を入力します。


入力後[変換]ボタンをクリックするとR,G,B値が下部のテキストボックスに表示されます。