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, #123456, rgb(123, 45, 210), etc.
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.
}