SASS color methods change vs adjust vs scale

Question

I have read carefully the SASS Color Module Documentation

But I can't understand the difference between change, adjust, scale color methods, Especially that in many times they return the same value.

Example:

color.adjust(#000, $whiteness: 10%);
color.change(#000, $whiteness: 10%);
color.scale(#000, $whiteness: 10%);

All those methods return: #171717.

Can anyone explain in detail the difference between those three methods?

Jolenejolenta

Answer 1

color.adjust(rgba(#8c2, 80%), $alpha: 10%); // => rgba(#8c2, 90%)    80% + 10%

color.scale(rgba(#8c2, 80%), $alpha: 10%); // => rgba(#8c2, 88%)     80% + (80 * 10%)

color.change(rgba(#8c2, 80%), $alpha: 10%); // => rgba(#8c2, 10%)

I used $alpha in this example because it is easier to visualize.

• color.adjust increases the current $alpha by 10%.
• color.scale increases the current $alpha by 10% of itself.
• color.change sets the current $alpha to 10%.

I hope it's clearer now.

Carinthia