Last Updated: February 25, 2016
·
563
· benjamincharity

Generate Safe Text Colors with Sass

Recently I need to generate a safe text color based on the background color of an element. Most implementations of this are on the fly with Javascript but I wanted this to happen at the compile stage since we would already know the background color at this point.

Read a short write-up on it here: http://bnj.bz/3R3n2l2j1u09

$lightness-bound : 70 !global;
$hue-bound-bottom : 40 !global;
$hue-bound-top : 200 !global;

@function checkDangerZone($color) {
    @if ( (lightness($color) > $lightness-bound) or (hue($color) > $hue-bound-bottom and hue($color) < $hue-bound-top )) {
      @return darken(desaturate($color, 70), 60);
    }

    @else {
      @return lighten(desaturate($color, 50), 60);
    }
}