Tint and Shade Functions

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;
}

Comments

  1. User Avatar
    Robson Sobral
    Permalink to comment#

    It looks like these code samples are inverted. From Compass:

      def tint(color, percentage)
        assert_type color, :Color
        assert_type percentage, :Number
        white = rgb_color(255, 255, 255)
        mix(white, color, percentage)
      end
    

    From Sass Guidelines:

    /// 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);
    }
    

    See? The colors positions are inverted.

  2. User Avatar
    Lu Nelson
    Permalink to comment#

    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 be mix(white, $color, $perc) for that to work

  3. User Avatar
    Robson Sobral
    Permalink to comment#

    Good! It’s fixed now!

  4. User Avatar
    Tim Schoch
    Permalink to comment#

    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

  5. User Avatar
    Tim Jensen
    Permalink to comment#

    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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag