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