Skip to content

Instantly share code, notes, and snippets.

@benjamincharity
Created January 21, 2014 20:55
Show Gist options
  • Save benjamincharity/8548185 to your computer and use it in GitHub Desktop.
Save benjamincharity/8548185 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// 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 {
background-color: lightblue;
color: #313131;
font-weight: bold;
font-size: 44px;
padding: .4em;
}
@scottdavis
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment