Сравнение цветов, чтобы увидеть, являются ли они дополнительными, дополнительными, триадными или аналогичными через Java

Question

У меня есть код, который сгенерирует дополнительный цвет из значения RGB, которое хорошо работает.Похоже, что он находит цвета дополняют, глядя на цвет, который на 180 градусов на колесе.

Однако мне нужно сравнить два цвета, чтобы увидеть, являются ли они дополнительными цветами и т. Д.

У кого-нибудь есть идеи?

Answer 1

Сравнение цветов в цифровом виде проще всего с hsl colors-

. Как только цвет выражен как триплет 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;
        }
    }
}

Answer 2

Если вы можете сгенерировать дополнение, просто сделайте это для одного из сравниваемых цветов и посмотрите, вернетесь ли вы к другому сравниваемому цвету. Если это совпадение, это дополнение, если нет, то это не так.

Вот некоторый псевдокод:

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

Используя код HueShift, с которым вы связались, вы можете повернуть исходный цвет на разные углы, чтобы получить разные цветовые пары, и сравнить их одинаково _{(я не дизайнер, поэтому я не уверен углы, необходимые для сплит-комплемента и т. д., но я уверен, что быстрый поиск мог бы сказать вам.)}