Cooleur

Description

The purpose of this small package is to offer a quick way to calculate variations of a given color with a higher or lower relative luminance. This is done by supplying a color and a desired contrast ratio increase or decrease of the relative luminance.

Usage

Import

First import the SCSS file in your own SCSS file.

@import '../../../node_modules/cooleur/dist/cooleur';

Next, call the exported functions.

Functions

increaseContrastRatio($color, $contrastRatio: 1.25): Color

This function will calculate a new color based on the provided color, with a given relative luminance contrast ratio. E.g. pass $contrastRatio: 2 if you want to get a color that is twice as bright as the one given.

$buttonBaseColor: #33cc66;
button {
  background: $buttonBaseColor;

  &:hover {
    background: increaseContrastRatio($buttonBaseColor, 2);
  }
}

decreaseContrastRatio($color, $contrastRatio: 1.25): Color

This function will calculate a new color based on the provided color, with a given relative luminance contrast ratio. E.g. pass $contrastRatio: 2 if you want to get a color that is twice as dark as the one given.

$buttonBaseColor: #33cc66;
button {
  background: $buttonBaseColor;

  &:active {
    background: decreaseContrastRatio($buttonBaseColor, 2);
  }
}

foregroundColor($background-color, $dark-color: black, $light-color: white): $dark-color | $light-color

This function will return either $dark-color (defaults to black) or $light-color (defaults to white), depending on which one has the highest contrast ratio compared to the $background-color provided. This is useful for displaying text on top of colored areas.

$buttonBaseColor: #33cc66;
button {
  background: $buttonBaseColor;
  color: foregroundColor($buttonBaseColor);
}