色のグラデーション ( HSV 色空間 → RGB 色空間 変換 )
概要
- JavaScript でグラデーション表示を作ってみる。
- HSV 色空間
HSV 色空間
- グラデーションを作るには、HSV で作ると簡単。
- H : 色相。0° ~ 360° の円形で表され、各色が段階的に設定されている。
- S : 彩度。色の鮮やかさ。0% ~ 100%。
- V : 明度。色の明るさ。0% ~ 100%。
- HSV
- H : Hue
- S : Saturation chroma
- V : Value lightness brightness
グラデーションの方法
- 色相 (H) を回し、色を順に変える。S と V は固定。
- 彩度 (S) を動かし、鮮やかさを順に変える。H と V は固定。
- 明度 (V) を動かし、明るさを順に変える。H と S は固定。
HSV => RGB 変換
- Wikipedia を参照した。JavaScript だと以下の通り。
- 引数 hsv は object。
- h : 0.0 ~ 360.0 ( 360 は 0 と同一 )
- s : 0.0 ~ 1.0
- v : 0.0 ~ 1.0
/* * HSV 色空間 を RGB 色空間に変換します。 * hsv : object * h : 0.0 ~ 360.0 * s : 0.0 ~ 1.0 * v : 0.0 ~ 1.0 * * rgb : object * r : 0 ~ 255 * g : 0 ~ 255 * b : 0 ~ 255 */ function _hsv2Rgb( hsv ) { var h_index = Math.floor( hsv.h / 60 ) % 6; var f = hsv.h / 60 - h_index; var p = hsv.v * ( 1 - hsv.s ); var q = hsv.v * ( 1 - f * hsv.s ); var t = hsv.v * ( 1 - ( 1 - f ) * hsv.s ); var v = hsv.v; var r, g, b; switch ( h_index ) { case 0 : { r = v; g = t; b = p; break; } case 1 : { r = q; g = v; b = p; break; } case 2 : { r = p; g = v; b = t; break; } case 3 : { r = p; g = q; b = v; break; } case 4 : { r = t; g = p; b = v; break; } case 5 : { r = v; g = p; b = q; break; } default : { console.log( 'Warning : "H index" calculation is incorrect.' ); r = v; g = t; b = p; break; } } r = Math.floor( r * 255 ); g = Math.floor( g * 255 ); b = Math.floor( b * 255 ); return { 'r': r, 'g': g, 'b': b }; }
例
- HSV 色空間を回して色を変化させてみた。
- 正方形に初期色を割り振り、後は H の値を増やすだけ。