Brighten

Returns the specified color, brightened (or darkened) by the specified amount.

Usage

$brighten (color1, percentage): Brighten color1 by the specified percentage (-100% to 100%).

param: color1 may be;

A literal html color, e.g. #ff00e2
A short literal html color, e.g. #fa3
An xCss parameter name, e.g. $myParam1
~~An xCss function that returns a color~~

param: percentage may be;

A literal percentage value, e.g. 50%
fractional
Positive or negative

Negative values below -100% do nothing, as -100% is always black
Positive values over 100%

untested

Examples

$param color bgColor #f00 // define the $bgColor param, defaulted to red

ul li {
	background: $bgColor;
	text-color: $brighten ($bgColor, -70%); 
}

Demonstration

Saturates red (#f00), in increments from -100% to +100%.
e.g. $saturate (#f00, -100%)

-100%
-90%
-80%
-70%
-60%
-50%
-40%
-30%
-20%
-10%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%

Saturates dark blue (#007), in increments from -100% to +100%.
e.g. $saturate (#007, -100%)

-100%
-90%
-80%
-70%
-60%
-50%
-40%
-30%
-20%
-10%
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%