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

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

はじめに

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

UI

下図のUIを作成します。

コード

以下のコードを記述します。実質はButtonのOnClickイベントの実装のみです。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ColorCalc
{
  public partial class HsvToColor : System.Web.UI.Page
  {
    protected void Button_Convert_Click(object sender, EventArgs e)
    {
      double d_hue = 0;
      double d_saturation = 0;
      double d_value = 0;

      try {
        if (RadioButton_HSVInput.Checked == true) {
          d_hue = Convert.ToDouble(TextBox_H.Text);
          d_saturation = Convert.ToDouble(TextBox_S.Text);
          d_value = Convert.ToDouble(TextBox_V.Text);
        }
        else {
          d_hue = Convert.ToDouble(TextBox_HPer.Text);
          d_saturation = Convert.ToDouble(TextBox_SPer.Text) / 100f;
          d_value = Convert.ToDouble(TextBox_VPer.Text) / 100f;
        }
      }
      catch (FormatException exc) {
      }


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

      if (d_saturation == 0.0) {
        R = (int)(d_value * 255);
        G = (int)(d_value * 255);
        B = (int)(d_value * 255);
      }
      else {
        double d_c = d_value * d_saturation;
        double Hd = d_hue / 60;
        double d_x = d_c * (1 - Math.Abs(Hd % 2 - 1));

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

        double m = d_value - d_c;
        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;

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

解説

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

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

コード解説

下記コードが入力用のテキストボックスから値を取得するコードです。
  double d_hue = 0;
  double d_saturation = 0;
  double d_value = 0;

  try {
    if (RadioButton_HSVInput.Checked == true) {
      d_hue = Convert.ToDouble(TextBox_H.Text);
      d_saturation = Convert.ToDouble(TextBox_S.Text);
      d_value = Convert.ToDouble(TextBox_V.Text);
    }
    else {
      d_hue = Convert.ToDouble(TextBox_HPer.Text);
      d_saturation = Convert.ToDouble(TextBox_SPer.Text) / 100f;
      d_value = Convert.ToDouble(TextBox_VPer.Text) / 100f;
    }
  }
  catch (FormatException exc) {
  }

下記コードが計算結果をテキストボックスに出力するコードです。テキストボックスへの出力以外にLiterlコントロールに入力した色の背景色のボックスを表示するコードも書き出します。
  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;

  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);

実行結果

プロジェクトを実行します。下図の画面が表示されます。


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


実際に動作するプログラムも公開しています。(http://www.ipentec.com/webapp/ColorCalc/ColorToHsv.aspx)

著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2018-02-26
作成日: 2012-12-12
iPentec all rights reserverd.