xCss

Lighten

Usage

$lighten (color, amount)
color
The color being lightened. Can be a literal value (e.g. #fac02d, or #fe4, or red), or an xCss variable reference (e.g. $fgColor1).

xCss currently does not support functions as parameters to other functions.

amount
Indicates the amount to lighten the color by. Can be a number of units (e.g. 50), or a percentage (e.g. 20%).

Resulting color calculations are automatically normalized. You cannot have more white than white, or more black than black. Therefore if you use, e.g.

$lighten (#f00, 100)

The result will be to convert red (255, 0, 0) as follows;

R = 255 + 100 = 300 = 255
G = 0 + 100 = 100 = 100
B = 0 + 100 = 100 = 100
  • parameters
    • color
    • percentage (0 - 100)
  • returns a color

Demonstration

This demonstration shows various levels of lighten, from -100 to 100, as applied to different colors.

Each example is shown as a column pair. The first column in the pair shows the effect using a percentage, as in;

$lighten (#f00, 20%)    // note the % sign on the amount value

The second column lacks the % sign, and therefore uses a unit increment as the amount amount.

$lighten (#f00, 20)     // note that there is no % sign on the amount value


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

View xCss File

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

View xCss File

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

View xCss File

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

View xCss File