How to mix two colors using Javascript?

Question

There are two fields where the user reports a hexadecimal color. By clicking on mix colors, a calculation shall be made in JavaScript and this will have to present a picture painted with mixed color and hexadecimal result.

Structure in jsfiddle

Javascript

$('button').click(function(){
    var cor1 = $('#cor1').val(); //exemplo: #FF0000
    var cor2 = $('#cor2').val(); //exemplo: #00FF00
    // realiza a mistura
    var mistura_em_hexadecimal;
    $('#cor_misturada').css('background-color', mistura_em_hexadecimal);
    $('h2 span').text(mistura_em_hexadecimal);    
});

How to perform this calculation to mix two hexadecimal colors?

^{Note: the result should be accurate and can not use any plugin.}

Answer 1

I think what you’re looking for is an average of each color.

Take a look here: http://jsfiddle.net/XdQ88/1/

function tratarInput(arr, degraus) {
    arr = arr.toLowerCase();
    if (arr.length == 3) {
        var partes = arr.split('');
        for (var i = 0; i < arr.length; i++) {
            if (!~degraus.indexOf(arr[i])) {
                alert('formato errado!')
                return false;
            }
        }
        arr = [partes[0], partes[0], partes[1], partes[1], partes[2], partes[2]].join('');
    } else if (arr.length == 6) {} else {
        alert('formato errado!')
        return false;
    }
    return arr;
}

$('button').click(function () {
    var degraus = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
    var cor1 = $('#cor1').val().replace('#', '');
    var cor2 = $('#cor2').val().replace('#', '');

    cor1 = tratarInput(cor1, degraus);
    cor2 = tratarInput(cor2, degraus);

    // realiza a mistura
    var mistura = [];
     for (var i = 0; i < 6; i+=2) {
        mistura[i] = Math.round((parseInt(cor1[i] + cor1[i + 1], 16) + parseInt(cor2[i] + cor2[i + 1], 16)) / 2);
        mistura[i] = (0x1000000 | mistura[i]).toString(16).substring(5);
    }

    mistura = '#' + mistura.join('');
    $('#cor_misturada').css('background-color', mistura);
    $('h2 span').text(mistura);

});

This code may need some adjustments but explaining a little the steps it does:

• define variables. Here I have created an array for all color steps, this will be useful later. I also take away the character # to facilitate, but I will insert it again later. An advantage here is that if not use it corrects in the same.
• I created a function to handle the input. Here the function converts all colors into 6 characters (in case the input has been 3), checks for non-valid characters and if inputs have 3 or 6 characters as expected
• then in the for makes the mixture itself. Calculates the position of that color in the step array and averages. When making the average also makes a rounding and uses the absolute value (to correct negative values). This value is a reference and is then used to fetch the real value in the step array.
• finally, before your code continues, I put the character again # for the value to be correct