Lighten on dark colors

[micnigh]

I've noticed lighten produces unexpected colors the closer it is to #000. This applies to both scss and less files.

Here is a sample for reproduction

$black: #000;

$lighten-black: lighten($black, 50%);
$lighten-black: lighten($black, 100%);
$lighten-black: lighten($black, 1000%);

$almost-black: #111;

$lighten-almost-black: lighten($almost-black, 50%);
$lighten-almost-black: lighten($almost-black, 100%);
$lighten-almost-black: lighten($almost-black, 1000%);

$white: #fff;

$darken-white: darken($white, 50%);
$darken-white: darken($white, 100%);
$darken-white: darken($white, 1000%);

produces

I found the issue when I noticed bootstrap colors weren't matching up.

I'm currently using Atom Color Highlight v0.19.2

Love the tool btw!

[abe33]

Thanks for the report, seems like it will be tougher than I thought, I was assuming that all three preprocessors were behaving the same regarding color transformation, but I was wrong. The current implementation is based on the stylus version, that add the percentage of the original lightness to the color, sass and less add an absolute value:

Stylus:

lighten(#808080, 50%) // #c0c0c0

Sass/Less

lighten(#808080, 50%) // #ffffff

I'll have to think of how to detect the language used to switch versions when computing the final value.