Both lighten
and darken
functions manipulate the lightness of a color in the HSL space by adding or subtracting lightness to it. Basically, they are nothing but aliases for the $lightness
parameter of the adjust-color
function.
The thing is, those functions often do not provide the expected result. On the other hand, the mix
function is a nice way to lighten or darken a color by mixing it with either white or black.
The benefit of using mix
rather than one of the two aforementioned functions is that it will progressively go to black (or white) as you decrease the proportion of the color, whereas darken
and lighten
will quickly blow out a color all the way to black or white.
In order to avoid writing the mixin function every time, which is not only time consuming but also not quite explicit, you can easily create two functions tint
and shade
(which also happen to be part of Compass):
/// Slightly lighten a color
/// @access public
/// @param {Color} $color - color to tint
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function tint($color, $percentage) {
@return mix(white, $color, $percentage);
}
/// Slightly darken a color
/// @access public
/// @param {Color} $color - color to shade
/// @param {Number} $percentage - percentage of `$color` in returned color
/// @return {Color}
@function shade($color, $percentage) {
@return mix(black, $color, $percentage);
}
Usage
.foo {
color: tint(#BADA55, 42%);
}
.bar {
background-color: shade(#663399, 42%);
}
.foo {
color: #e2efb7;
}
.bar {
background-color: #2a1540;
}
It looks like these code samples are inverted. From Compass:
From Sass Guidelines:
See? The colors positions are inverted.
The comment above is correct. To tint a color is to take it toward white. So
tint($color, 90)
would be expected to be 90% towards white, but the positions of the colors in the function have to bemix(white, $color, $perc)
for that to workThat does not seem to match the conventional/graphics design definition of “tint”, where a higher percentage is actually a deeper colour and a lower percentage is closer to white. See http://graphicdesign.stackexchange.com/a/46187, https://helpx.adobe.com/indesign/using/tints.html, http://www.brandwares.com/RGBTintCalculator.php and http://tintmyride.sharepoint.com/Pages/WindowTintPercentagesandLevels.aspx.
Tints specified in branding guidelines (as I am working with now) also work the same way: the higher the percentage, the further from white and closer to the full colour it is.
Unfortunately, Compass/SASS seem to have already fixed on an unconventional definition of tint, so it’s probably better to leave this as it currently is.
The doc-comments are still wrong, though.
percentage of
$colorin returned color
— but the function as defined will use the percentage of white, not of$color
.Good! It’s fixed now!
I’ve created a little Sassmeister Example to visualize the difference between lighten/darken and these functions here. Feel free to play around with it:
https://t.co/FX0WPQzRJf
I’ve noticed that the first parameter passed to mix is the colour you want to ‘mix in’ to the base colour (second parameter).
I had my colours around the wrong way and got an unexpected result ie. mixing my colour into white by a percentage