Average 2 hex colors together in javascript

后端 未结 8 2012
天命终不由人
天命终不由人 2021-01-31 20:13

Alright thought I would throw this one out there for the crowd to think over.

Given a function (written in javascript) that expects two strings

相关标签:
8条回答
  • 2021-01-31 20:38

    Here is my function, hope it helps.

    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);}}
    
    0 讨论(0)
  • 2021-01-31 20:40

    A quick/dirty/convenient/ES6 way to blend two hex colors by a specified perecentage:

    // blend two hex colors together by an amount
    function blendColors(colorA, colorB, amount) {
      const [rA, gA, bA] = colorA.match(/\w\w/g).map((c) => parseInt(c, 16));
      const [rB, gB, bB] = colorB.match(/\w\w/g).map((c) => parseInt(c, 16));
      const r = Math.round(rA + (rB - rA) * amount).toString(16).padStart(2, '0');
      const g = Math.round(gA + (gB - gA) * amount).toString(16).padStart(2, '0');
      const b = Math.round(bA + (bB - bA) * amount).toString(16).padStart(2, '0');
      return '#' + r + g + b;
    }
    
    console.log(blendColors('#00FF66', '#443456', 0.5));

    Where amount should be 0 to 1, with 0 being exactly colorA, 1 being exactly colorB, and 0.5 being the "midpoint".

    0 讨论(0)
提交回复
热议问题