CODEWITHSUNDEEP
javascriptcolorsrgb
sjahan
sjahan

Reputation: 5960

How to determine colors perceived brightness?

I've read a lot in the very complete post: Formula to determine brightness of RGB color

What bothers me is that even with all those formulas, I can't get a fine result... And this is quite bothering since I want to sort colors in a palette, from darkest to lightest. If the sorting is wrong, it is quickly a lot of pain to watch.

Quick example with the formula: (0.2126*R + 0.7152*G + 0.0722*B) which seems to be the most common answer over the web.

Edited after Peter's answer

function colorCodeToRGB(colorCode) {
    colorCode = colorCode.substr(1);
    return [
        colorCode.substr(0, 2),
        colorCode.substr(2, 2),
        colorCode.substr(4, 2)
    ].map(it => parseInt(it, 16));
}

const luminanceCoefficients = [.2126, .7152, .0722];
function getLuminance(color) {
  const [r, g, b] = colorCodeToRGB(color);
  return r * luminanceCoefficients[0] + g * luminanceCoefficients[1] + b * luminanceCoefficients[2];
}
function linearizeSRGB(colorChannel) {
    colorChannel /= 255;
    if (colorChannel <= .04045 ) {
        return colorChannel / 12.92;
    } else {
        return Math.pow((colorChannel + .055)/1.055, 2.4);
    }
}
console.log('First set of colors');
console.log('#1883b1', getLuminance('#1883b1'));
console.log('#2c3b4c', getLuminance('#2c3b4c'));
console.log('Second set of colors');
console.log('#920f1e', getLuminance('#920f1e'));
console.log('#c3313d', getLuminance('#c3313d'));
.c {
  height: 2rem;
  width: 2rem;
}
Sample of colors 
<span class="c" style="background-color: #1883b1">&nbsp;&nbsp;&nbsp;</span>
<span class="c" style="background-color: #2c3b4c">&nbsp;&nbsp;&nbsp;</span>
<span class="c" style="background-color: #920f1e">&nbsp;&nbsp;&nbsp;</span>
<span class="c" style="background-color: #c3313d">&nbsp;&nbsp;&nbsp;</span>

Everyone can see that the first blue is lighter than the second one, and its value is smaller, although on the second set, the first red seems darker than the second one, although it has a smaller value...

I don't get it, is there some way to actually determine perceived brightness?

I've tested all of the formulas on the post mentioned at the beginning of this question, and by sliding the color picker, I always find funny cases that illustrate a problem. I've no constraints, I can work with HSL, RGB, CIELAB, whatever!

Thanks by advance guys!

Upvotes: 3

Views: 1858

Answers (2)

Myndex
Myndex

Reputation: 5364

Ultra Simple sRGB to Perceived Lightness

Super simple JS function to convert sRGB (as integers R,G,B) to perceptual lightness (~ L*). This is the down-and-dirty simplified method, which should provide a reasonable prediction for most general use cases.

function lightness(Rint,Gint,Bint) { // takes sRGB channels as 8 bit integers

    var Rlin = (Rint / 255.0) ** 2.218;   // Convert int to decimal 0-1 and linearize
    var Glin = (Gint / 255.0) ** 2.218;   // ** is the exponentiation operator, older JS needs Math.pow() instead
    var Blin = (Bint / 255.0) ** 2.218;   // 2.218 Gamma for sRGB linearization. 2.218 sets unity with the piecewise sRGB at #777 .... 2.2 or 2.223 could be used instead
                                
    var Ylum = Rlin * 0.2126 + Glin * 0.7156 + Blin * 0.0722;   // convert to Luminance Y
    
    return Math.pow(Ylum, 0.68) * 100;  // Convert to lightness (0 to 100) 
                                       // Note: 2024 edit changed from 0.43 to 0.68
                                      //to place the returned mid point (50) around 0.36 Y
}

Those familiar with sRGB and CIELAB will notice that the piecewise functions with the near black linearities are dropped here. This was done in the interest of simplicity. In practice this works as we are usually interested in the perceived lightness for photopic vision, and not for very dark values.

The 0.43 exponent in the return is good for most cases, but if you are comparing large areas (big blocks of color) you could lower it to as low as 0.33, or if trying to predict lightness of tiny pinpoints of light, you could raise it to 0.5 (see Stevens for background on these values)

Edit for 2024

A quick update to the earlier post.

The previous post from 2020 returned a reasonable approximation of CIE L* (Lstar). However, pursuant to further research, L* is not as useful for self-illuminated displays.

More recent appearance models place the middle gray point at about 0.36 Y, as opposed to 0.18 Y (aka the well know 18% gray) — this is achieved in the above example by using an exponent on the return of 0.68 instead of 0.43.

The caveat here is an assumption that the observer is light adapted to white #ffffff as the peak. With a different adaptation state, the middle will naturally shift.

Also the coefficients are based on sRGB. Other color spaces such as Display P3 require different coefficients.

Upvotes: 2

Peter O.
Peter O.

Reputation: 32908

Apparently there are at least two issues with your implementation.

The first is that the ^ operator (in ^2.4) is not a power operator in JavaScript, but an "exclusive-or" operator. Replace the line where that operator appears with the following.

        return Math.pow(((colorChannel + .055)/1.055), 2.4);

Also, the getLuminance method is implemented incorrectly; the main reason for that might be the reduce method, which can be confusing, at least to me. Replace that implementation with the following (which uses the much simpler map as well as direct addition and multiplication):

function getLuminance(color) {
  var cv=colorCodeToRGB(color).map(v=>linearizeSRGB(v))
  return cv[0]*luminanceCoefficients[0]+
            cv[1]*luminanceCoefficients[1]+
            cv[2]*luminanceCoefficients[2]
}

Upvotes: 2

Related Questions