The current colorcontrast
function comparing with three colors only. Looking for best solution to build with multiple parameters like @function colorcontrast($color, $rest...) {
for color: colorcontrast(yellow, blue, orange, tomato, deekskyblue);
but not sure how to compare with all the listed colors.
@function brightness($color) {
@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
}
@function colorcontrast($color, $dark, $light) {
$color-brightness: brightness($color);
$light-text-brightness: brightness($light);
$dark-text-brightness: brightness($dark);
@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
}
.my-div{
padding: 1rem;
background-color: yellow;
color: colorcontrast(yellow, #000, #fff);
}
All you need is to calculate contrasts for all colors of the list in a loop. And choose a color with the best contrast to the base color.
SassMeister demo.
Documentation for
@each
directive.