Tutorial :Formula to determine brightness of RGB color



Question:

I'm looking for some kind of formula or algorithm to determine the brightness of a color given the RGB values. I know it can't be as simple as adding the RGB values together and having higher sums be brighter, but I'm kind of at a loss as to where to start.


Solution:1

Do you mean brightness? Perceived brightness? Luminance?

  • Luminance (standard for certain colour spaces): (0.2126*R + 0.7152*G + 0.0722*B) [1]
  • Luminance (perceived option 1): (0.299*R + 0.587*G + 0.114*B) [2]
  • Luminance (perceived option 2, slower to calculate): sqrt( 0.241*R^2 + 0.691*G^2 + 0.068*B^2 ) â†' sqrt( 0.299*R^2 + 0.587*G^2 + 0.114*B^2 ) (thanks to @MatthewHerbst) [3]


Solution:2

I think what you are looking for is the RGB -> Luma conversion formula.

Photometric/digital ITU BT.709:

Y = 0.2126 R + 0.7152 G + 0.0722 B  

Digital ITU BT.601 (gives more weight to the R and B components):

Y = 0.299 R + 0.587 G + 0.114 B  

If you are willing to trade accuracy for perfomance, there are two approximation formulas for this one:

Y = 0.33 R + 0.5 G + 0.16 B    Y = 0.375 R + 0.5 G + 0.125 B  

These can be calculated quickly as

Y = (R+R+B+G+G+G)/6    Y = (R+R+R+B+G+G+G+G)>>3  


Solution:3

I have made comparison of the three algorithms in the accepted answer. I generated colors in cycle where only about every 400th color was used. Each color is represented by 2x2 pixels, colors are sorted from darkest to lightest (left to right, top to bottom).

1st picture - Luminance (relative)

0.2126 * R + 0.7152 * G + 0.0722 * B  

2nd picture - http://www.w3.org/TR/AERT#color-contrast

0.299 * R + 0.587 * G + 0.114 * B  

3rd picture - HSP Color Model

sqrt(0.299 * R^2 + 0.587 * G^2 + 0.114 * B^2)  

4th picture - WCAG 2.0 SC 1.4.3 relative luminance and contrast ratio formula (see @Synchro's answer)

Pattern can be sometimes spotted on 1st and 2nd picture depending on the number of colors in one row. I never spotted any pattern on picture from 3rd or 4th algorithm.

If i had to choose i would go with algorithm number 3 since its much easier to implement and its about 33% faster than the 4th.

Perceived brightness algorithm comparison


Solution:4

Below is the only CORRECT algorithm for converting sRGB images, as used in browsers etc., to grayscale.

It is necessary to apply an inverse of the gamma function for the color space before calculating the inner product. Then you apply the gamma function to the reduced value. Failure to incorporate the gamma function can result in errors of up to 20%.

For typical computer stuff, the color space is sRGB. The right numbers for sRGB are approx. 0.21, 0.72, 0.07. Gamma for sRGB is a composite function that approximates exponentiation by 1/(2.2). Here is the whole thing in C++.

// sRGB luminance(Y) values  const double rY = 0.212655;  const double gY = 0.715158;  const double bY = 0.072187;    // Inverse of sRGB "gamma" function. (approx 2.2)  double inv_gam_sRGB(int ic) {      double c = ic/255.0;      if ( c <= 0.04045 )          return c/12.92;      else           return pow(((c+0.055)/(1.055)),2.4);  }    // sRGB "gamma" function (approx 2.2)  int gam_sRGB(double v) {      if(v<=0.0031308)          v *= 12.92;      else           v = 1.055*pow(v,1.0/2.4)-0.055;      return int(v*255+0.5); // This is correct in C++. Other languages may not                             // require +0.5  }    // GRAY VALUE ("brightness")  int gray(int r, int g, int b) {      return gam_sRGB(              rY*inv_gam_sRGB(r) +              gY*inv_gam_sRGB(g) +              bY*inv_gam_sRGB(b)      );  }  


Solution:5

Interestingly, this formulation for RGB=>HSV just uses v=MAX3(r,g,b). In other words, you can use the maximum of (r,g,b) as the V in HSV.

I checked and on page 575 of Hearn & Baker this is how they compute "Value" as well.

From Hearn&Baker pg 319


Solution:6

I found this code (written in C#) that does an excellent job of calculating the "brightness" of a color. In this scenario, the code is trying to determine whether to put white or black text over the color.


Solution:7

To add what all the others said:

All these equations work kinda well in practice, but if you need to be very precise you have to first convert the color to linear color space (apply inverse image-gamma), do the weight average of the primary colors and - if you want to display the color - take the luminance back into the monitor gamma.

The luminance difference between ingnoring gamma and doing proper gamma is up to 20% in the dark grays.


Solution:8

Rather than getting lost amongst the random selection of formulae mentioned here, I suggest you go for the formula recommended by W3C standards.

Here's a straightforward but exact PHP implementation of the WCAG 2.0 SC 1.4.3 relative luminance and contrast ratio formulae. It produces values that are appropriate for evaluating the ratios required for WCAG compliance, as on this page, and as such is suitable and appropriate for any web app. This is trivial to port to other languages.

/**   * Calculate relative luminance in sRGB colour space for use in WCAG 2.0 compliance   * @link http://www.w3.org/TR/WCAG20/#relativeluminancedef   * @param string $col A 3 or 6-digit hex colour string   * @return float   * @author Marcus Bointon <marcus@synchromedia.co.uk>   */  function relativeluminance($col) {      //Remove any leading #      $col = trim($col, '#');      //Convert 3-digit to 6-digit      if (strlen($col) == 3) {          $col = $col[0] . $col[0] . $col[1] . $col[1] . $col[2] . $col[2];      }      //Convert hex to 0-1 scale      $components = array(          'r' => hexdec(substr($col, 0, 2)) / 255,          'g' => hexdec(substr($col, 2, 2)) / 255,          'b' => hexdec(substr($col, 4, 2)) / 255      );      //Correct for sRGB      foreach($components as $c => $v) {          if ($v <= 0.03928) {              $components[$c] = $v / 12.92;          } else {              $components[$c] = pow((($v + 0.055) / 1.055), 2.4);          }      }      //Calculate relative luminance using ITU-R BT. 709 coefficients      return ($components['r'] * 0.2126) + ($components['g'] * 0.7152) + ($components['b'] * 0.0722);  }    /**   * Calculate contrast ratio acording to WCAG 2.0 formula   * Will return a value between 1 (no contrast) and 21 (max contrast)   * @link http://www.w3.org/TR/WCAG20/#contrast-ratiodef   * @param string $c1 A 3 or 6-digit hex colour string   * @param string $c2 A 3 or 6-digit hex colour string   * @return float   * @author Marcus Bointon <marcus@synchromedia.co.uk>   */  function contrastratio($c1, $c2) {      $y1 = relativeluminance($c1);      $y2 = relativeluminance($c2);      //Arrange so $y1 is lightest      if ($y1 < $y2) {          $y3 = $y1;          $y1 = $y2;          $y2 = $y3;      }      return ($y1 + 0.05) / ($y2 + 0.05);  }  


Solution:9

The HSV colorspace should do the trick, see the wikipedia article depending on the language you're working in you may get a library conversion .

H is hue which is a numerical value for the color (i.e. red, green...)

S is the saturation of the color, i.e. how 'intense' it is

V is the 'brightness' of the color.


Solution:10

RGB Luminance value = 0.3 R + 0.59 G + 0.11 B

http://www.scantips.com/lumin.html

If you're looking for how close to white the color is you can use Euclidean Distance from (255, 255, 255)

I think RGB color space is perceptively non-uniform with respect to the L2 euclidian distance. Uniform spaces include CIE LAB and LUV.


Solution:11

This link explains everything in depth, including why those multiplier constants exist before the R, G and B values.

Edit: It has an explanation to one of the answers here too (0.299*R + 0.587*G + 0.114*B)


Solution:12

The inverse-gamma formula by Jive Dadson needs to have the half-adjust removed when implemented in Javascript, i.e. the return from function gam_sRGB needs to be return int(v*255); not return int(v*255+.5); Half-adjust rounds up, and this can cause a value one too high on a R=G=B i.e. grey colour triad. Greyscale conversion on a R=G=B triad should produce a value equal to R; it's one proof that the formula is valid. See Nine Shades of Greyscale for the formula in action (without the half-adjust).


Solution:13

Here's a bit of C code that should properly calculate perceived luminance.

// reverses the rgb gamma  #define inverseGamma(t) (((t) <= 0.0404482362771076) ? ((t)/12.92) : pow(((t) + 0.055)/1.055, 2.4))    //CIE L*a*b* f function (used to convert XYZ to L*a*b*)  http://en.wikipedia.org/wiki/Lab_color_space  #define LABF(t) ((t >= 8.85645167903563082e-3) ? powf(t,0.333333333333333) : (841.0/108.0)*(t) + (4.0/29.0))      float  rgbToCIEL(PIXEL p)  {     float y;     float r=p.r/255.0;     float g=p.g/255.0;     float b=p.b/255.0;       r=inverseGamma(r);     g=inverseGamma(g);     b=inverseGamma(b);       //Observer = 2°, Illuminant = D65      y = 0.2125862307855955516*r + 0.7151703037034108499*g + 0.07220049864333622685*b;       // At this point we've done RGBtoXYZ now do XYZ to Lab       // y /= WHITEPOINT_Y; The white point for y in D65 is 1.0        y = LABF(y);       /* This is the "normal conversion which produces values scaled to 100      Lab.L = 116.0*y - 16.0;     */     return(1.16*y - 0.16); // return values for 0.0 >=L <=1.0  }  


Solution:14

Please define brightness. If you're looking for how close to white the color is you can use Euclidean Distance from (255, 255, 255)


Solution:15

The 'V' of HSV is probably what you're looking for. MATLAB has an rgb2hsv function and the previously cited wikipedia article is full of pseudocode. If an RGB2HSV conversion is not feasible, a less accurate model would be the grayscale version of the image.


Solution:16

For clarity, the formulas that use a square root need to be

sqrt(coefficient * (colour_value^2)

not

sqrt((coefficient * colour_value)^2

The proof of this lies in the conversion of a R=G=B triad to greyscale R. That will only be true if you square the colour value, not the colour value times coefficient. See Nine Shades of Greyscale


Solution:17

I wonder how those rgb coefficients were determined. I did an experiment myself and I ended up with the following:

Y = 0.267 R + 0.642 G + 0.091 B  

Close but but obviously different than the long established ITU coefficients. I wonder if those coefficients could be different for each and every observer, because we all may have a different amount of cones and rods on the retina in our eyes, and especially the ratio between the different types of cones may differ.

For reference:

ITU BT.709:

Y = 0.2126 R + 0.7152 G + 0.0722 B  

ITU BT.601:

Y = 0.299 R + 0.587 G + 0.114 B  

I did the test by quickly moving a small gray bar on a bright red, bright green and bright blue background, and adjusting the gray until it blended in just as much as possible. I also repeated that test with other shades. I repeated the test on different displays, even one with a fixed gamma factor of 3.0, but it all looks the same to me. More over, the ITU coefficients literally are wrong for my eyes.

And yes, I presumably have a normal color vision.


Solution:18

To determine the brightness of a color with R, I convert the RGB system color in HSV system color.

In my script, I use the HEX system code before for other reason, but you can start also with RGB system code with rgb2hsv {grDevices}. The documentation is here.

Here is this part of my code:

 sample <- c("#010101", "#303030", "#A6A4A4", "#020202", "#010100")   hsvc <-rgb2hsv(col2rgb(sample)) # convert HEX to HSV   value <- as.data.frame(hsvc) # create data.frame   value <- value[3,] # extract the information of brightness   order(value) # ordrer the color by brightness  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »