Einstellen der Helligkeit einer Farbe im Stylus

Question

Ich arbeite mit Stylus, dem CSS-Preprozessor, und möchte mit einer Funktion die "wahrgenommene Helligkeit" der Farbe um 20% oder -10% anpassen.

Ich entdeckte den Begriff "Luminanz", und es sieht aus wie Stylus hat eine Funktion zu bekommen die Leuchtdichte einer Farbe, aber nicht eine Farbhelligkeit einstellen.

Wie kann eine solche Funktion erstellt werden?

Answer 1

Nach etwas Basteln scheint dieser zu funktionieren. Ich bin mir nicht sicher, ob es zu 100% korrekt ist.

adjust-luminance($color, $amount = 10%) 
    $scale = unit($amount, '')/100 * 255 

    //green is the lightest component, followed by red, then blue. 
    $redWeight = 0.2126 
    $greenWeight = 0.7152 
    $blueWeight = 0.0722 

    // get the individual components of the color 
    $red = red($color) 
    $green = green($color) 
    $blue = blue($color) 

    //get percent 
    $percentRed = $red/255 
    $percentGreen = $green/255 
    $percentBlue = $blue/255 

    $lumRed = $percentRed * $redWeight 
    $lumGreen = $percentGreen * $greenWeight 
    $lumBlue = $percentBlue * $blueWeight 

    $lumTotal = 1 + ($lumRed + $lumGreen + $lumBlue) 

    $red += $scale * (1 - $redWeight) * $lumTotal 
    $green += $scale * (1 - $greenWeight) * $lumTotal 
    $blue += $scale * (1 - $blueWeight) * $lumTotal 

    $adjusted = rgb($red, $green, $blue) 
    $adjusted = saturation($adjusted, saturation($color)) 
    return $adjusted