Promedio de 2 colores hexadecimales juntos en javascript

Question

Bien, pensé que lanzaría este para que la multitud lo reconsiderara.

Dado un función(escrito en javascript) que espera dos cadenas con formato como un color hexadecimal (ex # FF0000)

cambio un color hexadecimal que es el promedio de los dos colores aprobados .

function averageColors(firstColor,secondColor) 
{ 
    ... 
    return avgColor; 
} 

--edit--

promedio se definiría como

si el color pasado era de color amarillo y la segunda era luz púrpura el color devuelto sería una naranja mediana

Answer 1

Odio sonar como el disco jQuery tan roto, pero hay es a jQuery plugin for this already.

Answer 2

Huele tarea para mí, pero aquí es mi idea.

Tome cada valor hexadecimal para R, G y B, y promedie cada uno de ellos. Si es necesario, conviértalo a Decimal para hacer los cálculos.

función d2h (d) {return d.toString (16) .padStart (2, '0');}

función h2d (h) {return parseInt (h, 16);}

A continuación, devuelve una cadena que contiene los valores concatenados de los tres elementos.

Answer 3

requiere sólo unas pocas líneas de POJS si no quiere preocuparse por un montón de cosas innecesarias:

// Expects input as 'nnnnnn' where each nn is a 
// 2 character hex number for an RGB color value 
// e.g. #3f33c6 
// Returns the average as a hex number without leading # 
var averageRGB = (function() { 

    // Keep helper stuff in closures 
    var reSegment = /[\da-z]{2}/gi; 

    // If speed matters, put these in for loop below 
    function dec2hex(v) {return v.toString(16);} 
    function hex2dec(v) {return parseInt(v,16);} 

    return function (c1, c2) { 

    // Split into parts 
    var b1 = c1.match(reSegment); 
    var b2 = c2.match(reSegment); 
    var t, c = []; 

    // Average each set of hex numbers going via dec 
    // always rounds down 
    for (var i=b1.length; i;) { 
     t = dec2hex((hex2dec(b1[--i]) + hex2dec(b2[i])) >> 1); 

     // Add leading zero if only one character 
     c[i] = t.length == 2? '' + t : '0' + t; 
    } 
    return c.join(''); 
    } 
}()); 

Answer 4

Aquí es mi función, creo que sirve.

function averageColors(colorArray){ 
    var red = 0, green = 0, blue = 0; 

    for (var i = 0; i < colorArray.length; i++){ 
     red += hexToR("" + colorArray[ i ] + ""); 
     green += hexToG("" + colorArray[ i ] + ""); 
     blue += hexToB("" + colorArray[ i ] + ""); 
    } 

    //Average RGB 
    red = (red/colorArray.length); 
    green = (green/colorArray.length); 
    blue = (blue/colorArray.length); 

    console.log(red + ", " + green + ", " + blue); 
    return new THREE.Color("rgb("+ red +","+ green +","+ blue +")"); 
} 

//get the red of RGB from a hex value 
function hexToR(h) {return parseInt((cutHex(h)).substring(0, 2), 16)} 

//get the green of RGB from a hex value 
function hexToG(h) {return parseInt((cutHex(h)).substring(2, 4), 16)} 

//get the blue of RGB from a hex value 
function hexToB(h) {return parseInt((cutHex(h)).substring(4, 6), 16)} 

//cut the hex into pieces 
function cutHex(h) {if(h.charAt(1) == "x"){return h.substring(2, 8);} else {return h.substring(1,7);}}