Programmatisch eine Hex-Farbe aufhellen oder abdunkeln (oder rgb, und Farben mischen)

Question

Hier ist eine Funktion, an der ich gearbeitet habe, um eine hexadezimale Farbe programmatisch um einen bestimmten Betrag aufzuhellen oder abzudunkeln. Geben Sie einfach eine Zeichenkette ein wie "3F6D2A" für die Farbe ( col ) und eine ganze Zahl zur Basis 10 ( amt ) für die Menge, die aufgehellt oder verdunkelt werden soll. Um abzudunkeln, geben Sie eine negative Zahl ein (d. h. -20 ).

Der Grund dafür war, dass alle Lösungen, die ich bisher gefunden habe, das Problem zu kompliziert zu machen schienen. Und ich hatte das Gefühl, dass es mit nur ein paar Zeilen Code getan werden könnte. Bitte lassen Sie mich wissen, wenn Sie irgendwelche Probleme finden oder Anpassungen vornehmen möchten, die das Ganze beschleunigen würden.

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

// TEST
console.log( LightenDarkenColor("3F6D2A",40) );

Für den Einsatz in der Entwicklung gibt es hier eine leichter zu lesende Version:

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 << 8) | (r << 16);
  return newColor.toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", -40));

Und schließlich eine Version zur Behandlung von Farben, die das "#" am Anfang haben (oder auch nicht). Und eine Anpassung für unpassende Farbwerte:

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 < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

OK, es sind also nicht nur ein paar Zeilen, aber es scheint viel einfacher zu sein, und wenn Sie das "#" nicht verwenden und nicht auf Farben außerhalb des Bereichs prüfen müssen, sind es auch nur ein paar Zeilen.

Wenn Sie das "#" nicht verwenden, können Sie es einfach in den Code einfügen:

var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);

Meine Hauptfrage ist wohl, ob ich hier richtig liege. Umfasst dies nicht auch einige (normale) Situationen?

Answer 1

Es gibt einen Mangel an Unterstützung für Farben, die mit 00 beginnen, z.B. "#000623", aber hier ist die Lösung

function lightenDarkenColor(colorCode, amount) {
 let usePound = false;

 if (colorCode[0] == "#") {
     colorCode = colorCode.slice(1);
     usePound = true;
 }
 const num = parseInt(colorCode, 16);
 let r = (num >> 16) + amount;

 if (r > 255) {
     r = 255;
 } else if (r < 0) {
     r = 0;
 }

 let b = ((num >> 8) & 0x00FF) + amount;

 if (b > 255) {
     b = 255;
 } else if (b < 0) {
     b = 0;
 }

 let g = (num & 0x0000FF) + amount;

 if (g > 255) {
     g = 255;
 } else if (g < 0) {
     g = 0;
 }
 let color = (g | (b << 8) | (r << 16)).toString(16);
 while (color.length < 6){
   color = 0 + color;
 }
 return (usePound ? '#' : '') + color;  
}

Answer 2

Ich habe eine Portierung der exzellenten xcolor-Bibliothek vorgenommen, um ihre jQuery-Abhängigkeit zu entfernen. Es gibt eine Tonne von Funktionen in dort einschließlich Aufhellung und Verdunkelung Farben.

Die Konvertierung von Hex in RGB ist eine völlig andere Funktion als das Aufhellen oder Abdunkeln von Farben. Halten Sie die Dinge bitte TROCKEN. Auf jeden Fall können Sie, sobald Sie eine RGB-Farbe haben, einfach die Differenz zwischen der gewünschten und der vorhandenen Helligkeitsstufe zu jedem der RGB-Werte addieren:

var lightness = function(level) {
    if(level === undefined) {
        return Math.max(this.g,this.r,this.b)
    } else {
        var roundedLevel = Math.round(level) // fractions won't work here
        var levelChange = roundedLevel - this.lightness()

        var r = Math.max(0,this.r+levelChange)
        var g = Math.max(0,this.g+levelChange)
        var b = Math.max(0,this.b+levelChange)

        if(r > 0xff) r = 0xff
        if(g > 0xff) g = 0xff
        if(b > 0xff) b = 0xff

        return xolor({r: r, g: g, b: b})
    }
}

var lighter = function(amount) {
    return this.lightness(this.lightness()+amount)
}

Ver https://github.com/fresheneesz/xolor um mehr über die Quelle zu erfahren.

Answer 3

Ich wollte schon lange in der Lage sein, Farbschattierungen zu erzeugen, hier ist meine JavaScript-Lösung:

const varyHue = function (hueIn, pcIn) {
    const truncate = function (valIn) {
        if (valIn > 255) {
            valIn = 255;
        } else if (valIn < 0)  {
            valIn = 0;
        }
        return valIn;
    };

    let red   = parseInt(hueIn.substring(0, 2), 16);
    let green = parseInt(hueIn.substring(2, 4), 16);
    let blue  = parseInt(hueIn.substring(4, 6), 16);
    let pc    = parseInt(pcIn, 10);    //shade positive, tint negative
    let max   = 0;
    let dif   = 0;

    max = red;

    if (pc < 0) {    //tint: make lighter
        if (green < max) {
            max = green;
        }

        if (blue < max) {
            max = blue;
        }

        dif = parseInt(((Math.abs(pc) / 100) * (255 - max)), 10);

        return leftPad(((truncate(red + dif)).toString(16)), '0', 2)  + leftPad(((truncate(green + dif)).toString(16)), '0', 2) + leftPad(((truncate(blue + dif)).toString(16)), '0', 2);
    } else {    //shade: make darker
        if (green > max) {
            max = green;
        }

        if (blue > max) {
            max = blue;
        }

        dif = parseInt(((pc / 100) * max), 10);

        return leftPad(((truncate(red - dif)).toString(16)), '0', 2)  + leftPad(((truncate(green - dif)).toString(16)), '0', 2) + leftPad(((truncate(blue - dif)).toString(16)), '0', 2);
    }
};

Answer 4

Wie kann man in PHP einfach eine Farbe schattieren?

<?php
function shadeColor ($color='#cccccc', $percent=-25) {

  $color = Str_Replace("#",Null,$color);

  $r = Hexdec(Substr($color,0,2));
  $g = Hexdec(Substr($color,2,2));
  $b = Hexdec(Substr($color,4,2));

  $r = (Int)($r*(100+$percent)/100);
  $g = (Int)($g*(100+$percent)/100);
  $b = (Int)($b*(100+$percent)/100);

  $r = Trim(Dechex(($r<255)?$r:255));  
  $g = Trim(Dechex(($g<255)?$g:255));  
  $b = Trim(Dechex(($b<255)?$b:255));

  $r = ((Strlen($r)==1)?"0{$r}":$r);
  $g = ((Strlen($g)==1)?"0{$g}":$g);
  $b = ((Strlen($b)==1)?"0{$b}":$b);

  return (String)("#{$r}{$g}{$b}");
}

echo shadeColor(); // #999999