2016-08-02 2 views
0

Я работаю с Stylus, предварительным процессором CSS, и я хочу, чтобы функция корректировала «воспринимаемую яркость» цвета, скажем, на 20% или -10%.Регулировка яркости цвета в Stylus

Я обнаружил термин «яркость», и похоже, что у Stylus есть функция получить яркость цвета, но не регулировать яркость цветов.

Как можно создать такую ​​функцию?

+0

'lighten' функция не чего прийти ваших целей – blonfu

+0

Или намного лучше' lightness' например: 'светлоты (# 000, 50%) ==> # 808080' – blonfu

ответ

0

После некоторого возиться, этот, похоже, работает. Я не уверен, что это на 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 
Смежные вопросы