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.


/// 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 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);


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


  1. User Avatar
    Permalink to comment#

    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.


  2. User Avatar
    Permalink to comment#

    tnx, but…
    Where do you want to use the Luminance variable then?

  3. User Avatar
    Permalink to comment#

    you know, I gave up :D
    I decided to calculate the Luminance of colors with javascript, since I’m using less and helper and functions variety is limited in less.

    Thank you anyway :)

  4. User Avatar

    Its not mentioned but the big win here is using it in HSL and HSLA

    Thats what the L stands for, luminance :)

    In case anyone was wondering how to deploy out this. I know this site gets its fair share of veterans for traffic, but newbies may not be aware of this.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.