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}&nbsp;&nbsp;&nbsp;&nbsp;&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}&nbsp;&nbsp;&nbsp;&nbsp;&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