css - 在 Stylus 中调整颜色的亮度

Question

我正在使用 Stylus，CSS 预处理器，我想要一个功能来调整颜色的“感知亮度”，比如 20% 或 -10%。

我发现了“亮度”这个词，看起来手写笔具有获取颜色亮度的功能，但不能调整颜色亮度。

如何创建这样的功能？

Answer 1

经过一番修修补补，这个似乎工作。不过，我不确定它是否 100% 正确。

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