xCss

Adjust Color

Adjusts the specified color towards another color, by a specified increment.

Usage

$adjust (color1, increment)
Adjust color1 towards white by the specified number of units (-255 to 255).
$adjust (color1, percentage)
Adjust color1 towards white by the specified percentage (-100% to 100%).
$adjust (color1, color2, percentage)
Adjust color1 towards color2 by the specified percentage (-100% to 100%).

Demonstration

Adjust red (#f00) towards white (#fff), in increments from -100% to +100%.
e.g. $adjust (#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

Adjust red (#f00) towards white (#fff), in increments from -100 to +100 (units, not percentages).
e.g. $adjust (#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

Adjust red (#f00) towards blue (#00f), in increments from -100% to +100%.
e.g. $adjust (#f00, #00f, -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