# Color Luminance Function

Kitty Giraudel on

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}
@function luminance(\$color) {
\$colors: (
'red': red(\$color),
'green': green(\$color),
'blue': blue(\$color)
);

@each \$name, \$value in \$colors {
\$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 ``````