Generated by SassMeister.com.
<div>YOLO HOBO</div>
div {
background-color: lightblue;
color: #313131;
font-weight: bold;
font-size: 44px;
padding: .4em;
}
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
//
// http://blog.benjamincharity.com/generate-a-safe-text-color-with-sass
//
$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);
}
}
// change this color to test the function
$myColor: lightblue;
div {
background-color: $myColor;
color: checkDangerZone($myColor);
// uncomment this line to see the hue and lightness values
//content: "HUE:#{hue($myColor)} - LIGHTNESS:#{lightness($myColor)}";
font-weight: bold;
font-size: 44px;
padding: .4em;
}
<div>YOLO HOBO</div>