Question

我从RGB值中得到code that will generate a complementary color，效果很好。看起来它通过观察车轮上180度的颜色来找到颜色的补充。

但是，我需要比较两种颜色，看它们是否是互补色等。

有人有什么想法吗？

Answer 1

如果你可以生成补码，那么只需对比较的颜色之一进行补充，看看你是否找回了你正在比较的另一种颜色。如果它是一个匹配，它是一个补充，如果没有，那么它不是。

这是一些伪代码：

bool areComplements(color1, color2) {
    complementOfColor1 = getComplement(color1)
    if (complementOfColor1 == color2) {
        return true
    } else {
        return false
    }
}

使用你链接的HueShift代码，你可以用不同的角度旋转原始颜色以获得不同的颜色配对，并以相同的方式比较_{（我不是设计师，所以我是不确定分裂补码等所需的角度，但我确信快速搜索可以告诉你。）}

Answer 2

使用hsl颜色以数字方式比较颜色最简单 -

一旦颜色表示为hsl三联体，你可以旋转它的色调0-360度，并将饱和度或光值从0-100％改变。

此示例创建一个Color对象，该对象具有一些基本的转换和操作方法。

var red= new Color('red');
var green= red.rotate(120);
alert(red.hex+','+green.hex)
>>#ff0000,#00ff00



function Color(c){
    if(!(this instanceof Color)) return new Color(c);
    var h= Color.getHex(c);
    if(h){
        this.hex= h;
        this.rgb= Color.hexToRgb(h);
        this.hsl= Color.rgbToHsl(this.rgb);
        this.isgray= this.hsl[1]=== 0;
        this.name= this.getName();
    }
}
(function(){
    var C1={
        colornames:{
            aqua:'#00ffff', black:'#000000', blue:'#0000ff', fuchsia:'#ff00ff',
            gray:'#808080', green:'#008000', lime:'#00ff00', maroon:'#800000',
            navy:'#000080', olive:'#808000', orange:'#ffa500', purple:'#800080',
            red:'#ff0000', silver:'#c0c0c0', teal:'#008080', white:'#ffffff',
            yellow:'#ffff00'
        },
        getHex: function(c){
            if(c instanceof Color) return c.hex;
            if(typeof c== 'string'){
                c= c.toLowerCase();
                if(/^#([a-f0-9]{3}){1,2}$/.test(c)){
                    if(c.length== 4){
                        return '#'+[c[1], c[1], c[2], c[2], c[3], c[3]].join('');
                    }
                    return c;
                }
                if (/^[a-z]+$/.test(c)) return Color.colornames[c];
                if(c.indexOf('hsl')== 0) c= Color.hslToRgb(c);
                else{
                    c= c.match(/\d+(\.\d+)?%?/g);
                    if(c){
                        c= c.map(function(itm){
                            if(itm.indexOf('%')!= -1){
                                return Math.round(parseFloat(itm)*2.55);
                            }
                            return parseInt(itm);
                        }).slice(0, 3);
                    }
                }
            }
            if(c && c.length=== 3) return Color.rgbToHex(c);
        },
        hexToRgb: function(hex){
            var c= '0x'+hex.substring(1);
            return [(c>> 16)&255, (c>> 8)&255, c&255];
        },
        hslToRgb: function(hsl){
            if(typeof hsl== 'string'){
                hsl= hsl.match(/(\d+(\.\d+)?)/g);
            }
            var h= hsl[0]/360,
            s= hsl[1]/100,
            l= hsl[2]/100,
            t1, t2, t3, rgb, val;
            if(s== 0){
                val= l*255;
                return [val, val, val];
            }
            if(l < 0.5) t2= l*(1 + s);
            else    t2= l + s - l*s;
            t1= 2*l - t2;
            rgb= [0, 0, 0];
            for(var i= 0; i < 3; i++){
                t3= h + 1/3*-(i - 1);
                t3 < 0 && t3++;
                t3> 1 && t3--;
                if(6*t3 < 1) val= t1 +(t2 - t1)*6*t3;
                else if(2*t3 < 1) val= t2;
                else if(3*t3 < 2) val= t1 +(t2 - t1)*(2/3 - t3)*6;
                else val= t1;
                rgb[i]= val*255;
            }
            return rgb.map(Math.round);
        },
        hueSort: function(a, b){
            var ah= a.hsl, bh= b.hsl;
            if(ah[2]=== bh[2]){
                if(ah[1]=== bh[1]) return ah[0]-bh[0];
                return ah[1]-bh[1];
            }
            return ah[2]-bh[2];
        },
        rgbToHex: function(rgb){
            rgb= rgb.map(function(c){
                c= (Math.round(+c).minmax(0, 255));
                return c.toString(16).padZero(2);
            });
            return '#'+rgb.join('').toLowerCase();
        },
        rgbToHsl: function(c){
            var r= c[0]/255, g= c[1]/255, b= c[2]/255,
            min= Math.min(r, g, b), max= Math.max(r, g, b),
            d= max - min, h, s, l;
            if(max== min) h= 0;
            else if(r== max) h= (g - b)/d;
            else if(g== max) h= 2 +(b - r)/d;
            else if(b== max) h= 4 +(r - g)/d;
            h= Math.min(h*60, 360);
            if(h < 0) h += 360;
            l= (min + max)/2;
            if(max== min) s= 0;
            else if(l <= 0.5) s= d/(max + min);
            else    s= d/(2 - max - min);
            return [h, s*100, l*100].map(Math.round);
        }
    }
    var CP={
        getName: function(){
            var C= Color.colornames, hex= this.hex;
            for(var p in C) if(C[p]=== hex) return p;
            return '';
        },
        rotate: function(d){
            if(typeof d!= 'number') d= 180;
            var C= this.hsl.slice(0);
            d+= C[0];
            C[0]= Math.abs(d%360);
            return Color(Color.hslToRgb(C));
        },
        shade: function(s, v){
            var C= this.hsl.slice(0);
            if(typeof s== 'number') C[1]= s.minmax(0, 100);
            if(typeof v== 'number') C[2]= v.minmax(0, 100);
            return Color(Color.hslToRgb(C));
        },
        toHslString: function(c){
            c= c || this.hsl;
            return 'hsl('+c[0]+','+c[1]+'%,'+c[2]+'%)';
        },
        toRgbString: function(){
            return 'rgb('+this.rgb.join(',')+')';
        }
    }
    Color.prototype.toString= function(){
        return this.hex;
    }
    for(var p in C1){
        if(C1.hasOwnProperty(p)){
            Color[p]= C1[p];
        }
    }
    for(var p in CP){
        if(CP.hasOwnProperty(p)){
            Color.prototype[p]= CP[p];
        }
    }
}());
if(!Array.prototype.map){
    Array.prototype.map= function(fun, scope){
        var T= this, L= T.length, A= Array(L), i= 0;
        if(typeof fun== 'function'){
            while(i< L){
                if(i in T){
                    A[i]= fun.call(scope, T[i], i, T);
                }
                ++i;
            }
            return A;
        }
    }
}

通过java比较颜色，看看它们是互补的，分裂互补的，三元的还是类似的

2 个答案: