<!--
    Demo for this article:
    http://blustemy.io/color-helper-functions-in-sass/
-->

<table class="tints-shades">
    <tr class="tints">
        <th rowspan="2"></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="shades">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

/*
    Demo for this article:
    http://blustemy.io/color-helper-functions-in-sass/
*/

// Return a lighter color
// 0% is the same color, 100% is white
@function tint($color, $percent: 0%, $alpha: 1) {
    @return rgba(mix(white, $color, $percent), $alpha);
}

// Return a darker color
// 0% is the same color, 100% is black
@function shade($color, $percent: 0%, $alpha: 1) {
    @return rgba(mix(black, $color, $percent), $alpha);
}

// Demo
$color: #56487C;

.tints-shades {
    border-spacing: 0.1em;

    th, td {
        width: 2.5em;
        height: 2.5em;
    }

    .tints {
        @for $i from 0 through 10 {
            :nth-child(#{$i + 1}) {
                background: tint($color, $i * 10%);
            }
        }
    }

    .shades {
        @for $i from 0 through 10 {
            :nth-child(#{$i + 1}) {
                background: shade($color, $i * 10%);
            }
        }
    }
}