/sass-contrast-color

Mixin to get the color with higher contrast

Primary LanguageCSSMIT LicenseMIT

sass-contrast-color

Function to get the color with higher contrast

Install

  1. Install the bower component to your project:
  bower install sass-contrast-color --save-dev
  1. Import the Sass file into your code:
  @import "bower_components/sass-contrast-color/contrast.sass"

Or if you're using SCSS:

  @import "bower_components/sass-contrast-color/contrast.scss";

Adjust the tree to your project.

API

// Compare colors to higher contrast
contrast($base-color, $color1, $color2)

// Compare colors to lower contrast (inverting the former contrast function)
invert-contrast($base-color, $color1, $color2)

Parameter:

  • $base-color - set the basic color
  • $color1 - first color to compare with base-color
  • $color2 - second color to compare with base-color

Example

  body
    background-color: red
    color: contrast(red, black, white)

The example will compare black and white with red and give back the more higher contrast color.

See the compiled CSS code:

  body {
    background-color: red;
    color: white;
  }