"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo puedo aclarar u oscurecer mediante programación un color hexadecimal en JavaScript?

¿Cómo puedo aclarar u oscurecer mediante programación un color hexadecimal en JavaScript?

Publicado el 2025-01-10
Navegar:683

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

Aclarar u oscurecer mediante programación un color hexadecimal (o RGB y mezclar colores)

Esta función le permite aclarar u oscurecer mediante programación un color hexadecimal en una cantidad específica. Simplemente pase una cadena como "3F6D2A" para el color y una cantidad entera para la cantidad a aclarar u oscurecer. Para oscurecer, pase un número negativo (por ejemplo, -20).

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

Otras versiones

Versión más rápida y más pequeña:

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 

Manejar colores con o sin el prefijo #:

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 la función, simplemente pase la cadena de color hexadecimal que desea aclarar u oscurecer, y la cantidad en la que desea ajustarla. Por ejemplo, el siguiente código aclara el color "3F6D2A" en 40:

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

Rendimiento

El rendimiento de esta función está optimizado para velocidad y tamaño. Utiliza operaciones bit a bit para manipular los valores de color, lo que lo hace extremadamente rápido. La función también es muy pequeña, lo que la hace ideal para usar en aplicaciones pequeñas.

Características

  • Aclara u oscurece un color hexadecimal en una cantidad específica
  • Maneja colores con o sin el prefijo #
  • Ajusta valores de color inadecuados
  • Devuelve una representación de cadena hexadecimal del nuevo color

Limitaciones

  • La función no convierte el color a HSL para aclarar u oscurecer correctamente el color. Por lo tanto, los resultados pueden diferir de las funciones que utilizan HSL.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3