user profile image

Sass' lighten() and darken() color functions can quickly blow out a color all the way to black or white. mix() allows more subtle color tinting or shading.

This demo uses Sass loops and variable interpolation to programmatically generate the background colors for the table cells. Also there's a bit of JavaScript which populates the table cells with their actual background colors. If you change the table's base color values, do re-run the JavaScript or the color values will be wrong.


  1. WAY USEFUL. Damn blowouts happen to me all the time and I never thought to look for a smarter way.

  2. A buddy of mine (@tjbenton21) wrote a pretty sweet color function for sass called scss-color that we use for just about everything at work. He put it on github if you want to check it out (and i recommend you do).

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.