SASS function to choose the best contrast color between font and background. Work with hexadecimal, RGB, RGBA, HSL and HSLA.

color.scss

/*
Description : SASS function to choose the best contrast color between font and background. Work with hexadecimal, RGB, RGBA, HSL and HSLA.
Author: Yann Isabel
URL: https://github.com/yannisabel
Website : http://yannisabel.com
*/

// Color Variables
$grey: #333;
$white: #fff;
$blue: #264b68;
$red: #ac2222;

// Choose the best contrast color on background
@function colorOnBackground($color) {
    @if (lightness( $color ) > 50) {
      @return $grey;
    }
    @else {
      @return $white;
    }
}

// Then apply to the main scss file (for exemple)
.blue-element{
  background: $blue;
  color: colorOnBackground($blue);
}

.red-element{
  background: $red;
  color: colorOnBackground($red);
}