8

Existem dois campos onde o usuário informa uma cor em hexadecimal. Ao clicar em misturar cores, deverá ser feito um cálculo em JavaScript e este terá que apresentar um quadro pintado com a cor misturada e o resultado em hexadecimal.

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

Como realizar este cálculo para misturar duas cores hexadecimais?

Obs: o resultado deve ser preciso e não pode utilizar nenhum plugin.

1 Resposta 1

9

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
8
  • @PauloMaciel: por onde se está a guiar para os resultados que pretende?
    – Sergio
    12/05/2014 às 21:04
  • @Sergio estou fazendo teste através de um software e ele é preciso, na transição entre amarelo e azul não pode ficar cinza absoluto, isso só ocorre entre preto e branco. Mas não vou reutilizar a mistura para novos cálculos, então não afetará o resultado final, isso no meu caso.
    – Paulo
    12/05/2014 às 21:10
  • @Bacco estou afirmando baseado em testes que eu fiz, como eu disse, o resultado é aproximado, não é exato, o que acaba fazendo com que a cor fique cinza absoluto. Ao nossos olhos o resultado é o mesmo, mas no código hexadecimal ter 'resíduos' da cor (azul+vermelho por exemplo). O resultado deve ser #80807F e afirmo com convicção, 7F é resíduo das cores que foram misturadas. A prova disso é você deixar o 7F no final mudar o código anterior, exemplo: #00007F ("azul escuro") #FFFF7F ("amarelo claro"). Faça os testes e veja.
    – Paulo
    12/05/2014 às 21:29
  • 1
    @PauloMaciel Só estou tentando compartilhar um conhecimento técnico que eu já precisei. Existem varias maneiras de se converter cores, e justo a RGB não te atende. Não tem uma mais certa que outra, vai do uso. Em RGB, sempre cor complementar se anula, e vira cinza. Esse 7f ou 80 é mero problema de arredondamento. Se fizer 404000 com 000040, vai dar 202020, em RGB, nao tem outro jeito. Só que este modelo, apesar de correto, não é o que te serve. Só isso, não se trata de certo e errado.
    – Largato
    12/05/2014 às 21:34
  • 1
    @Bacco eu ainda acho que o problema é mais uma limitação na conversão (método como é feito), mas de qualquer forma a solução atual me atende bem
    – Paulo
    12/05/2014 às 21:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .