"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como posso clarear ou escurecer programaticamente uma cor hexadecimal em JavaScript?

Como posso clarear ou escurecer programaticamente uma cor hexadecimal em JavaScript?

Publicado em 2025-01-10
Navegar:837

How can I programmatically lighten or darken a hex color in JavaScript?

Clarear ou escurecer programaticamente uma cor hexadecimal (ou RGB e misturar cores)

Esta função permite clarear ou escurecer programaticamente uma cor hexadecimal em uma quantidade específica. Basta passar uma string como "3F6D2A" para a cor e um número inteiro amt para a quantidade de clareamento ou escurecimento. Para escurecer, passe um número negativo (por exemplo, -20).

function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF)   amt) | ((((col >> 8) & 0x00FF)   amt) > 16)   amt) 

Outras versões

Versão mais rápida e menor:

function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16)   amt;
  var b = ((num >> 8) & 0x00FF)   amt;
  var g = (num & 0x0000FF)   amt;
  var newColor = g | (b 

Manipular cores com ou sem o prefixo #:

function LightenDarkenColor(col, amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col, 16);

    var r = (num >> 16)   amt;

    if ( r > 255 ) r = 255;
    else if  (r > 8) & 0x00FF)   amt;

    if ( b > 255 ) b = 255;
    else if  (b  255 ) g = 255;
    else if  ( g 

Uso

Para usar a função, basta passar a string hexadecimal da cor que deseja clarear ou escurecer e a quantidade pela qual deseja ajustá-la. Por exemplo, o código a seguir clareia a cor "3F6D2A" em 40:

const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE

Desempenho

O desempenho desta função é otimizado para velocidade e tamanho. Ele usa operações bit a bit para manipular os valores das cores, o que o torna extremamente rápido. A função também é muito pequena, o que a torna ideal para uso em aplicações pequenas.

Recursos

  • Clareia ou escurece uma cor hexadecimal em uma quantidade especificada
  • Controla cores com ou sem o prefixo #
  • Ajusta valores de cores impróprios
  • Retorna uma representação de string hexadecimal do novo cor

Limitações

  • A função não converte a cor em HSL para clarear ou escurecer adequadamente a cor. Portanto, os resultados podem diferir das funções que usam HSL.
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3