Creio que o que procura é uma média entre cada côr.
Dê uma olhada aqui: 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);
});
Este código pode precisar de alguns ajustes mas explicando um pouco os passos ele faz:
- define as variáveis. Aqui criei uma array para todas os degraus de cores, isso vai ser útil mais tarde. Retiro também o caracter
#
para facilitar, mas volto a inserí-lo mais tarde. Uma vantagem aqui é que se não usar ele corrige na mesma.
- criei uma função para tratar o input. Aqui a função converte todas as cores em 6 caracters (no caso do input ter sido de 3), verifica se existem carateres não válidos e se os inputs têm 3 ou 6 caracteres como esperado
- depois no
for
faz a própria mistura. Calcula a posição daquela cor na array de degraus e faz uma média. Quando faz a média faz também um arredondamento e usa o valor absoluto (para corrigir valores negativos). Este valor é uma referência e é então usado para ir buscar o valor real na array degraus.
- por fim, antes do seu código continuar, volto a colocar o caracter
#
para o valor ficar correto