@each $name, $color in $base-colors {
    .clr-#{$name} {
        color: $color;
    }
    .clr-#{$name}-light {
        color: lighten($color, $lighten-color-percent);
    }
    .clr-#{$name}-dark {
        color: darken($color, $darken-color-percent);
    }
    .hover--clr-#{$name} {

        &:hover {
            color: $color;
        }
    }
    .hover--clr-#{$name}-light {

        &:hover {
            color: lighten($color, $lighten-color-percent);
        }
    }
    .hover--clr-#{$name}-dark {

        &:hover {
            color: darken($color, $darken-color-percent);
        }
    }
}
@each $name, $color in $additional-colors {
    .clr-#{$name} {
        color: $color;
    }
    .hover--clr-#{$name} {

        &:hover {
            color: $color;
        }
    }
}