Flashで色変化するものを作っている時、よく色を濁らせずに彩度のみを
変更してアニメーションさせたいことがあるんですが、その時に一度RGBを
HSVに変換して少し変えてもどして、という時のためのサンプルです。
実際はcolorutil.asなんかを使えば楽だしいいんですが、たまには自分で
書こうというわけでやってみます。


それぞれスライダ動かして色指定、対応して四角の色と6桁の色番号が変化します。
CMYK表示はいらないと思いますが、以前に欲しいことが一度ありましたので。

変換部分のソースはこんな感じ。
RGBからHSVとRGBからCMYK、HSVからRGBの3タイプです。


function rgb2hsv(rr,gg,bb) {
rr = Math.min( Math.max( rr, 0 ), 255 )/255;
gg = Math.min( Math.max( gg, 0 ), 255 )/255;
bb = Math.min( Math.max( bb, 0 ), 255 )/255;
var maxrgb:Number = Math.max(rr,gg,bb);
var minrgb:Number = Math.min(rr,gg,bb);
var hh:Number;
var ss:Number;
var vv:Number;
if (maxrgb == minrgb) {
hh = 0;
vv = 0;
ss = rr;
} else {
if (maxrgb == rr) {
hh =60* (gg - bb)/(maxrgb - minrgb);
} else if (maxrgb == gg) {
hh =60* (bb - rr)/(maxrgb - minrgb)+120;
} else if (maxrgb == bb) {
hh =60* (rr - gg)/(maxrgb - minrgb)+240;
}
ss = (maxrgb - minrgb)/maxrgb;
vv = maxrgb;
if (hh < 0) {
hh += 360;
}
}
var returnObj:Object = new Object;
returnObj.hh = hh;
returnObj.ss = ss;
returnObj.vv = vv;
return returnObj;
}
function rgb2cmyk(rr,gg,bb) {
rr = Math.min( Math.max( rr, 0 ), 255 )/255;
gg = Math.min( Math.max( gg, 0 ), 255 )/255;
bb = Math.min( Math.max( bb, 0 ), 255 )/255;
var maxrgb:Number = Math.max(rr,gg,bb);
var kk:Number =0
var cc:Number = 0
var mm:Number =0
var yy:Number =0
if(maxrgb == 0){

kk =1
cc = 0
mm =0
yy =0
}else{
kk = Math.min(1-rr,1-gg,1-bb);
cc = (1-rr-kk)/(1-kk);
mm = (1-gg-kk)/(1-kk);
yy = (1-bb-kk)/(1-kk);
}
var returnObj:Object = new Object;
returnObj.cc = cc;
returnObj.mm = mm;
returnObj.yy = yy;
returnObj.kk = kk;
return returnObj;
}
function hsv2rgb(hh,ss,vv) {
hh = Math.min( Math.max( hh, 0 ), 360 );
if(hh == 360){
hh=0
}
ss = Math.min( Math.max( ss, 0 ), 255 )/255;
vv = Math.min( Math.max( vv, 0 ), 255 )/255;
var rr:Number;
var gg:Number;
var bb:Number;
if (ss == 0) {
rr = vv;
gg = vv;
bb = vv;
} else {
var hi:Number = Math.floor((hh/60)%6);
var ff:Number = (hh/60) - hi;
var pp:Number = vv*(1-ss);
var qq:Number = vv*(1-ff*ss);
var tt:Number = vv*(1-(1-ff)*ss);
trace("hi:"+hi);
trace("ff:"+ff);
switch (hi) {
case 0 :
rr = vv;
gg = tt;
bb = pp;
break;
case 6 :
rr = vv;
gg = 0;
bb = pp;
break;
case 1 :
rr = qq;
gg = vv;
bb = pp;
break;
case 2 :
rr = pp;
gg = vv;
bb = tt;
break;
case 3 :
rr = pp;
gg = qq;
bb = vv;
break;
case 4 :
rr = tt;
gg = pp;
bb = vv;
break;
case 5 :
rr = vv;
gg = pp;
bb = qq;
break;
default :
trace("error");
}
}
var returnObj:Object = new Object;
returnObj.rr = Math.floor(rr*255);
returnObj.gg = Math.floor(gg*255);
returnObj.bb = Math.floor(bb*255);
return returnObj;
}

ソースはこちら

HTML5飯