benjamincharity
1/21/2014 - 8:55 PM

Generated by SassMeister.com.

Generated by SassMeister.com.

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;
}