Color Luminance Function

When digging deep into color theory, there is something called relative color luminance. To put it simply, the luminance of a color defines whether its brightness. A luminance of 1 means the color is white. On the opposite, a luminance score of 0 means the color is black.

Knowing the luminance of a color can be useful when dealing with dynamic or random colors, in order to provide an accurate background-color if the color is too bright or too dark. As a rule of thumb, you can consider that a color whose luminance is over 0.7 is going to be hard to read on a white background.

Code

/// Returns the luminance of `$color` as a float (between 0 and 1) /// 1 is pure white, 0 is pure black /// @param {Color} $color - Color /// @return {Number} /// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference @function luminance($color) { $colors: ( 'red': red($color), 'green': green($color), 'blue': blue($color) ); @each $name, $value in $colors { $adjusted: 0; $value: $value / 255; @if $value < 0.03928 { $value: $value / 12.92; } @else { $value: ($value + .055) / 1.055; $value: pow($value, 2.4); } $colors: map-merge($colors, ($name: $value)); } @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722); }

Usage

$color: #BADA55; $luminance: luminance($color); // 0.6123778773