# Dadgumit, Blowouts

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.

| 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
lighten() | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
mix() w/ white | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
darken() | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
mix() w/ dark | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%

| 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
lighten() | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
mix() w/ white | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
darken() | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%
mix() w/ dark | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100%

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.