Question

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

我发现了术语“亮度”，看起来Stylus具有获得颜色亮度的功能，但不调整颜色亮度。

如何创建这样的功能？

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

调整手写笔中颜色的亮度

1 个答案: