HSLカラー値をRGBカラー値に変換する - C#

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 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) {
      }


      int R = 0;
      int G = 0;
      int B = 0;

      if (d_hue < 0) {
        d_hue = d_hue + 360;
      }
      else if (d_hue > 360) {
        d_hue = d_hue - 360;
      }

      double Hi = d_hue % 360;

      if (d_saturation == 0) {
        R = (int)(d_lightness * 255);
        G = (int)(d_lightness * 255);
        B = (int)(d_lightness * 255);
      }
      else {
        
        double d_c = (1.0f - Math.Abs(2.0f * d_lightness - 1)) * d_saturation;
        double H_d = d_hue / 60.0f;
        double d_x = d_c * (1 - Math.Abs((H_d % 2) - 1));

        double R1, G1, B1;
        if (0 <= H_d && H_d < 1) {
          R1 = d_c;
          G1 = d_x;
          B1 = 0;
        }
        else if (1 <= H_d && H_d < 2) {
          R1 = d_x;
          G1 = d_c;
          B1 = 0;
        }
        else if (2 <= H_d && H_d < 3) {
          R1 = 0;
          G1 = d_c;
          B1 = d_x;
        }
        else if (3 <= H_d && H_d < 4) {
          R1 = 0;
          G1 = d_x;
          B1 = d_c;
        }
        else if (4 <= H_d && H_d < 5) {
          R1 = d_x;
          G1 = 0;
          B1 = d_c;
        }
        else if (5 <= H_d && H_d < 6) {
          R1 = d_c;
          G1 = 0;
          B1 = d_x;
        }
        else {
          R1 = 0;
          G1 = 0;
          B1 = 0;
        }


        double m = d_lightness - d_c * 0.5f;
        R = (int)((R1 + m) * 255);
        G = (int)((G1 + m) * 255);
        B = (int)((B1 + m) * 255);

      }

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

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

      Color inputColor = Color.FromArgb(R, G, 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}&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;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);
    }
  }
}

解説

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

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

コードの解説

  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) {
  }

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

  if (maxv <= 0) {
    TextBox_S.Text = "未定義 (0)";
    TextBox_SPercent.Text = "未定義 (0)";
  }
  else {
    TextBox_S.Text = Convert.ToString(ds);
    int sper = (int)Math.Truncate(ds * 100);
    TextBox_SPercent.Text = Convert.ToString(sper);
  }

  TextBox_V.Text = Convert.ToString(dv);

  int vper = (int)Math.Truncate(dv * 100);
  TextBox_VPercent.Text = Convert.ToString(vper);

  Color inputColor = Color.FromArgb(R, G, 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}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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);

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