javascript – 增加或减少颜色饱和度

前端之家收集整理的这篇文章主要介绍了javascript – 增加或减少颜色饱和度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道增加或减少一个RGB颜色饱和度的算法

例如,如果我有颜色rgb(200,30,40)(红色)函数存根

function Saturation(color,factor)
where color.r = 200,color.g= 30 and color.b=40

任何人都知道一个图书馆或有一个代码片段吗?

解决方法

按照巴厘岛巴洛的建议,我提出了:
RGBtoHSV= function(color) {
        var r,g,b,h,s,v;
        r= color[0];
        g= color[1];
        b= color[2];
        min = Math.min( r,b );
        max = Math.max( r,b );


        v = max;
        delta = max - min;
        if( max != 0 )
            s = delta / max;        // s
        else {
            // r = g = b = 0        // s = 0,v is undefined
            s = 0;
            h = -1;
            return [h,undefined];
        }
        if( r === max )
            h = ( g - b ) / delta;      // between yellow & magenta
        else if( g === max )
            h = 2 + ( b - r ) / delta;  // between cyan & yellow
        else
            h = 4 + ( r - g ) / delta;  // between magenta & cyan
        h *= 60;                // degrees
        if( h < 0 )
            h += 360;
        if ( isNaN(h) )
            h = 0;
        return [h,v];
    };

HSVtoRGB= function(color) {
        var i;
        var h,v,r,b;
        h= color[0];
        s= color[1];
        v= color[2];
        if(s === 0 ) {
            // achromatic (grey)
            r = g = b = v;
            return [r,b];
        }
        h /= 60;            // sector 0 to 5
        i = Math.floor( h );
        f = h - i;          // factorial part of h
        p = v * ( 1 - s );
        q = v * ( 1 - s * f );
        t = v * ( 1 - s * ( 1 - f ) );
        switch( i ) {
            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;
            default:        // case 5:
                r = v;
                g = p;
                b = q;
                break;
        }
        return [r,b];
    }

通过转换为HSV(色调,饱和度和值)格式,您可以以这种方式手动更改S组件:

var hsv= RGBtoHSV ([200,100,100]);
alert(hsv)
hsv[1] *= 1.5;
alert(hsv)
var rgb= HSVtoRGB(hsv);
alert(rgb); //new color

猜你在找的JavaScript相关文章