xCss

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%

View xCss File

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%

View xCss File