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);
}
}
Written by Benjamin Charity
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#