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

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

はじめに

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 ColorToHls : System.Web.UI.Page
  {
    protected void Button_Convert_Click(object sender, EventArgs e)
    {
      int R = 0;
      int G = 0;
      int B = 0;

      if (RadioButton_RGBInput.Checked == true) {
        try {
          R = Convert.ToInt32(TextBox_R.Text);
          G = Convert.ToInt32(TextBox_G.Text);
          B = Convert.ToInt32(TextBox_B.Text);
        }
        catch (FormatException exc) {

        }
      }
      else {
        try {
          Color inputColorC = ColorTranslator.FromHtml(TextBox_WebColor.Text);
          R = inputColorC.R;
          G = inputColorC.G;
          B = inputColorC.B;
        }
        catch (Exception exc) {
        }
      }

      double dr = (double)R / (double)255;
      double dg = (double)G / (double)255;
      double db = (double)B / (double)255;

      double maxv = Math.Max(Math.Max(dr, dg), db);
      double minv = Math.Min(Math.Min(dr, dg), db);

      double d_hue = 0;
      if (maxv - minv == 0) {
        TextBox_H.Text = "未定義 (0)";
      }
      else {
        if (maxv == dr) {
          d_hue = 60 * ((dg - db) / (maxv - minv)) + 0;
        }
        else if (maxv == dg) {
          d_hue = 60 * ((db - dr) / (maxv - minv)) + 120;
        }
        //else if (maxv == db) {
        else {
          d_hue = 60 * ((dr - dg) / (maxv - minv)) + 240;
        }
        if (d_hue < 0) d_hue += 360;
        TextBox_H.Text = Convert.ToString(d_hue);
      }

      double d_lightness = (maxv + minv) / 2.0f;
      TextBox_L.Text = Convert.ToString(d_lightness);
      double d_lightness_per = d_lightness * 100;
      //TextBox_LPercent.Text = string.Format("{0:f1}",d_lightness_per);
      TextBox_LPercent.Text = string.Format("{0:##.#}",d_lightness_per);

      double d_saturation;
      if (d_lightness < 0.5f) {
        d_saturation = (maxv - minv) / (maxv + minv);
      }
      else {
        d_saturation = (maxv - minv) / (2.0f - maxv - minv);
      }
      TextBox_S.Text = Convert.ToString(d_saturation);
      double d_saturation_per = d_saturation * 100;
      TextBox_SPercent.Text = string.Format("{0:##.#}", d_saturation_per);

      //
      string strColor = string.Format("#{0:X2}{1:X2}{2:X2}", R, G, 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, R, G, B);

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

    }
  }
}

解説

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

数式のみを表したものは下図になります。

コード解説

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

  if (RadioButton_RGBInput.Checked == true) {
    try {
      R = Convert.ToInt32(TextBox_R.Text);
      G = Convert.ToInt32(TextBox_G.Text);
      B = Convert.ToInt32(TextBox_B.Text);
    }
    catch (FormatException exc) {
    }
  }
  else {
    try {
      Color inputColorC = ColorTranslator.FromHtml(TextBox_WebColor.Text);
      R = inputColorC.R;
      G = inputColorC.G;
      B = inputColorC.B;
    }
    catch (Exception exc) {
    }
  }

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

  TextBox_S.Text = Convert.ToString(d_saturation);
  double d_saturation_per = d_saturation * 100;
  TextBox_SPercent.Text = string.Format("{0:##.#}", d_saturation_per);

  //
  string strColor = string.Format("#{0:X2}{1:X2}{2:X2}", R, G, 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, R, G, B);

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

計算結果をテキストボックスに表示する部分です。テキストボックスに計算結果を表示するだけでなく、Literlコントロールに入力値の色を背景色とする四角の枠を表示します。