# 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}
@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 ``````

1. Rozita

Hi Hugo,

I was trying to test luminance function but it is not working. Do we need Sass ally plugin for Luminance function?

Are map functions by default known in Sass or we need a gem for that to be installed.
I was trying in codepan to test the luminance function, but does not work.

really looking forward to hearing from you.

Cheers!
Rozita

2. Rozita