Среднее 2 шестнадцатеричных цвета вместе в JavaScript

Question

Хорошо, подумал, что я выброшу это, чтобы толпа обдумала.

Учитывая функцию (написано в javascript) , которая ожидает форматирование двух строккак шестнадцатеричный цвет ( ex # FF0000 )

возвращает шестнадцатеричный цвет, который является средним для обоих пройденных цветов.

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

-edit -

среднее значение будет определено как

, если переданный цвет будет желтым, а второй - светло-фиолетовым, возвращаемый цвет будет средним оранжевым

Answer 1

Я ненавижу звучать, как ужасная запись jQuery, но - это плагин jQuery для этого уже .

Answer 2

Требуется всего несколько строк POJS, если вы не хотите беспокоиться о большом количестве ненужных вещей:

// 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 3

Пахнет для меня как домашняя работа, но вот моя подсказка.

Возьмите каждое шестнадцатеричное значение для R, G и B, и усредните каждое из них.Если необходимо, преобразуйте в десятичную, чтобы сделать математику.

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

function h2d (h) {return parseInt (h,16);}

Затем возвращает строку, содержащую объединенные значения трех элементов.

Answer 4

Для любого (скорее всего, моего будущего), ищущего быстрый / грязный / удобный / es6 способ смешать два шестнадцатеричных цвета на определенную величину, попробуйте это:

// 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;
}

Где amount следуетбыть 0 до 1, где 0 точно равно colorA, 1 точно colorB и 0.5 как "средняя точка".

Answer 5

Вот моя функция, надеюсь, это поможет.

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);}}