Skip to content

Instantly share code, notes, and snippets.

@gavinmcfarland
Last active December 21, 2015 08:59
Show Gist options
  • Select an option

  • Save gavinmcfarland/6282267 to your computer and use it in GitHub Desktop.

Select an option

Save gavinmcfarland/6282267 to your computer and use it in GitHub Desktop.
A selection of functions that help create contrasting colours.
//////////////////////////////////////////////////////////////
// Dark //
//////////////////////////////////////////////////////////////
// Checks to see if a colour is dark. The threshold defaults
// to 20% if not set.
// Usage: dark($color, [$threshold])
@function dark($color, $threshold: 20%) {
@if lightness($color) < $threshold {
@return true;
}
@else {
@return false;
}
}
//////////////////////////////////////////////////////////////
// Contrasted //
//////////////////////////////////////////////////////////////
// Creates a contrasting colour depending on whether or not
// it is a dark colour. If mono is set to true, then it
// returns white or black.
// Usage: contrasted($color, [$ammount], [$mono])
@function contrasted($color, $ammount: 10%, $mono: null) {
@if dark($color) {
@if $mono == true {
@return white;
}
@else {
@return lighten($color, $ammount);
}
}
@else {
@if $mono == true {
@return black;
}
@else {
@return darken($color, $ammount);
}
}
}
@jamesallardice

Copy link
Copy Markdown

You could do the dark function in one line:

@function dark($color, $threshold: 20%) {
    @return lightness($color) < $threshold;
}

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