Edited at

JavaScriptでHSVからRGBに変換

More than 1 year has passed since last update.

以下のようなカラーサンプルを作りたかったので、HSL and HSV(wikipedia)の計算式を参考にHSVからRGBに変換するプログラムをJavaScriptで書いてみました。

colorsample.png


実際の計算式は?

HSL and HSV(wikipedia)で公開されている計算式は以下のような感じです。


1

2

3

4

(「HSL and HSV」(5 Feb 2017, at 22:40 UTC)『ウィキペディア』より引用)


計算式中の「if 0 ≤ H' ≤ 1」の部分ですが、HSV色空間(ウィキペディア日本語版)では「if 0 ≤ H' < 1」なっていましたので、今回は「if 0 ≤ H' < 1」を使うことにしました。それがどれほどの影響を与えるのかは正直よくわかりませんが…。


HSVからRGBへの変換プログラム


hsvToRgb

function hsvToRgb(H,S,V) {

//https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV

var C = V * S;
var Hp = H / 60;
var X = C * (1 - Math.abs(Hp % 2 - 1));

var R, G, B;
if (0 <= Hp && Hp < 1) {[R,G,B]=[C,X,0]};
if (1 <= Hp && Hp < 2) {[R,G,B]=[X,C,0]};
if (2 <= Hp && Hp < 3) {[R,G,B]=[0,C,X]};
if (3 <= Hp && Hp < 4) {[R,G,B]=[0,X,C]};
if (4 <= Hp && Hp < 5) {[R,G,B]=[X,0,C]};
if (5 <= Hp && Hp < 6) {[R,G,B]=[C,0,X]};

var m = V - C;
[R, G, B] = [R+m, G+m, B+m];

R = Math.floor(R * 255);
G = Math.floor(G * 255);
B = Math.floor(B * 255);

return [R ,G, B];
}



カラーサンプルのプログラム

実際のカラーサンプルを描くプログラムは以下のような感じです。

var canvas = document.createElement("canvas");

var ctx = canvas.getContext("2d");
canvas.width = 360;
canvas.height = 101;
for(var s=0;s<=100;s++) {
for(var h=0; h<=359; h++){
ctx.fillStyle = 'rgb(' + hsvToRgb(h, s/100, 1).join(",") + ')';
ctx.fillRect(h, s, 1, 1);
}
}
document.body.appendChild(canvas);


関連リンク