0

Como posso fazer para alternar a cor de um texto, de acordo com a cor de background em que ele está inserido?

Eu já vi isso algumas vezes. Funciona assim: se o background for claro, o texto fica preto, e se for escuro, o texto fica branco.

Eu tentei procurar o site em questão, mas já me esqueci. Era mais ou menos isso: O texto ficava em cima de uma capa de artigo, então, como a capa do artigo pode variar de cor, o texto se adaptava ao background (imagem)

Como isso é feito?

1

1 Resposta 1

1

Voce precisa de uma função que receba o hexadecimal do background para poder quebrar ele em rgb e então calcular se a fonte deve ser escura ou clara a partir dos valores do rgb, retornando assim a cor da fonte. Segue um exemplo:

const TextColor = hex => {
    let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, (m, r, g, b) => {
        return r + r + g + g + b + b;
    });
    let rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    rgb = (rgb ? { r: parseInt(rgb[1], 16), g: parseInt(rgb[2], 16), b: parseInt(rgb[3], 16) } : { r: 0, g: 0, b: 0 });
    return '#' + (Math.round(((parseInt(rgb.r) * 299) + (parseInt(rgb.g) * 587) + (parseInt(rgb.b) * 114)) /1000) > 150 ? "555" : "FFF" );
}

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 .