Skip to Content

readable-color()

Simply return white or black based on the provided background color.

Sass April 2, 2019

Usage

Sass
readable-color($bg)

Parameters

$bg
(Required) (color) The color to determine a readable color for
Default: None

Parameter Notes

The $bg color can be any valid CSS or Sass color such as red#123456rgb(123, 45, 210), etc.

Request or provide clarification »

Examples

Sass
.element {background: $primary_color; color: readable-color($primary_color);}

Additional Notes

Unlike high-contrast-color() this function only returns black or white, but it is not as intensive nor does it require a linear channel value lookup table.

Source File

Located in /assets/scss/partials/_functions.scss on line 45.

Sass
@function readable-color($bg){
    $calculated-value: ((red($bg) * 299) + (green($bg) * 587) + (blue($bg) * 114) - 128000) * -1000; //Creates a number either greater than 255 or less than 0

    //While rgb() automatically limits output values to 0-255 in most (all?) browsers, it is safer to check it manually here.
    @if ( $calculated-value >= 255 ){
        @return #fff;
    }

    @return #000;
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin readable-color($bg){
    //Write your own code here, leave it blank, or return false.
}