#### Calculating the Perceived Brightness of a Color

I needed a way to test if a background color is light or dark in order to choose an appropriate text color (black on light colors and white on dark colors), you can find yourself in the same problem if you try to convert an image to grayscale.

I found many approaches that didn’t work well, I’ll describe them and the problems I discovered below – but first – the successful solution.

I finally found a solution that actually works on this web page the formula is:

**brightness = sqrt( .241 R ^{2} + .691 G^{2} + .068 B^{2} )**

Or, in C# using the WPF's Color structure System.Windows.Media.Color (the same exact code should also work with the System.Drawing.Color structure used in WinForms and WebForms):

private static int Brightness(Color c) { return (int)Math.Sqrt( c.R * c.R * .241 + c.G * c.G * .691 + c.B * c.B * .068); }

This method will return a number in the rage of 0 (black) to 255 (White) and to set the foreground color based on the Brightness method:

Color textColor = Brightness(backgroundColor) < 130 ? Colors.White : Colors.Black;

I selected cutoff value of 130 by trial and error and it reflects my taste, every value in the rage 128-145 will give acceptable results.

Here is a table of all the named colors in .net 3.0, each with its name in readable text on it based on the code above, the number in parenthesis is the brightness – click on the image to view it in full size (in a new browser window).

Usually, when talking about color theory the range 0-1 is used for each component – so (0,0,0) is black, (1,1,1) is white and (0.5,0.5,0.5) is 50% gray, I’m not using this range, I’m using the 0-255 range used in most programming environments.

### Why Not HSL or HSV?

You may think that the luminance (or lightness) component of the HSL color system or the value component of HSV will solve this problem, I did, but I was wrong.

The L component of the HSL and the V component of HSV describe the brightness of a color relative to a base color, if this base color is blue you will get a darker color than if this base color is yellow, HSL and HSV are very useful if you need to create a lighter or darker version of a color but aren’t very useful if you want to know how bright a color is.

### The Naïve RGB Algorithm

If RGB 0,0,0 is black and RGB 255,255,255 is white then R+B+G should give us a good approximation of the color brightness, shouldn’t it?

The problem is that some colors are brighter than others, red is brighter then blue and green is brighter then red, maybe we just need to find the right coefficients for them?

### The W3C Algorithm

The W3C working draft on accessibility has a formula for the perceived brightness of a color (based on the YIQ color system):

**((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000**

This formula and references to it dominate the search results, probably because the W3C has high search engine rank.

This is better than using HSL, but it tends to give wrong results for many colors, especially shades of yellow.

### RGB Color Difference

The W3C also has an algorithm to calculate the difference between colors:

(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

Or, in shorter form:

**dR + dG + dB**

Where dR, dG and dB are the difference in the Red, Green and Blue component.

If you calculate difference from white and difference from black – and compare them (if difference from black>difference from white then the color is dark) you actually get better results than using the brightness formula, but then you get wrong results for light greens and dark blues (probably because this formula doesn’t take into account the brightness difference of the colors).

### 3D Distance in RGB Space

You can think of the RGB color space as a cube where each of the 3 colors are axis, in one corner you have black (RGB 0,0,0) and in the opposite corner you have white RGB (255,255,255), so if a color is closer to black it should be darker.

The formula for 3D distance is:

**Sqrt(dx ^{2}+dy^{2}+dz^{2})**

Where dx, dy and dz are the difference on the x, y and z axis.

This algorithm also gives mixed results because it doesn’t take into account the fact that some colors look brighter than others - and that’s gets us back to …

### Weighted Distance in 3D RGB Space (or the HSP algorithm)

If you scroll up to the beginning of this post and look at the brightness formula there you will see it’s just like the 3D distance formula except it gives different weight to each axis.

So now we finished our tour to color brightness land we have a good formula for calculating perceived brightness and (if my explanations where clear) we can actually understand why it works.

posted @ Sunday, April 27, 2008 6:30 PM

## Comments on this entry:

## # re: Calculating the Perceived Brightness of a Color

This has been an awesome help to me... was on a whimsical quest at work to make the font color selection (black or white) automated. And what luck that you posted this just two days back.. cant believe my luck really..

Think I made a small improvement on your method which I wanted to share.. the formula still doesnt work for some colours like HSL(0,240,30) for example. Thus I think its more effective if you have the following algo:

***********************************

If Abs(Luminosity - 120) < 75 Then

If CBrightness(backColor) >= 130 Then

txtColor = vbBlack

Else

txtColor = vbWhite

End If

ElseIf Luminosity > 120 Then

txtColor = vbBlack

Else

txtColor = vbWhite

End If

***********************************

Thanks again for all the info..

Cheers,

Atiyab

## # re: Calculating the Perceived Brightness of a Color

Thanks for your help, I used this!

## # re: Calculating the Perceived Brightness of a Color

Will use this in a flash project.

Many thanks for the well written info.

## # re: Calculating the Perceived Brightness of a Color

Here's the function in javascript;

Brightness = function(color) {

if(color.length==7){color=color.substring(1);}

var R = parseInt(color.substring(0,2),16);

var G = parseInt(color.substring(2,4),16);

var B = parseInt(color.substring(4,6),16);

return Math.sqrt(R * R * .241 + G * G * .691 + B * B * .068);

}

/----/

var sColorText = Brightness(sColor) < 130 ? '#FFFFFF' : '#000000';

## # re: Calculating the Perceived Brightness of a Color

this is wrong

## # re: Calculating the Perceived Brightness of a Color

Well done pavan, for one of the most useless comments I've ever seen!

## # re: Calculating the Perceived Brightness of a Color

very good.thank you

## # re: Calculating the Perceived Brightness of a Color

Nice text, it was very helpful.

But there is one issue when working with colors - for example on my laptop LCD's many colors are wrong. And it differs pretty much when changing the angle of view.

For example "Blue" is pretty badly positioned when I look normally, but it's good when vieving from the 60 degrees angle to the top. But there are some red colors that are good positioned when looking normally, but bad when I look from some angle.

## # re: Calculating the Perceived Brightness of a Color

Nice one! This was just the calculation I needed to correct my own auto white text/black text script.

## # re: Calculating the Perceived Brightness of a Color

Thanx man!

that helped me a lot ;)

## # re: Calculating the Perceived Brightness of a Color

Thanks...very helpful. I was using a helper method in Java - Color.RGBToHSV() - but doing this manually saves me a TON of precious CPU cycles on large images

## # re: Calculating the Perceived Brightness of a Color

Hi,

I use this much faster formula that gives me values almost identical to yours:

((r << 5) + (g << 6) + (b << 2)) / 100

## # re: Calculating the Perceived Brightness of a Color

Guilherme Campos Hazan offers the formula ((r<<5)+(g<<6)+(b<<2))/100 and suggests it gives almost identical values to the SQRT model on this page. It doesn't for two reasons. Firstly, it seriously underweights B. R-0,G-0,B255 returns values of 10 and 66 respectively. Secondly, it suffers from the same problem as other linear models such as the W3C algorithm (also on this page) that there is no allowance made for the fact that brightness not only depends on the values of the individual three colors but also the proportion in which they are mixed. For example, contrary to what might be expected, R-240,G-0,B-0 is substantially brighter than R-80,G-80,B-80. However, W3C returns values of 72 and 80 respectively. Compare this with SQRT values of 118 and 80 respectively. This model is considerably more accurate and may be compared to the Colour Contrast Analyser which can be found on the visionaustralia website. In short, although W3C is widely used to determine brightness it is significantly flawed.

## # re: Calculating the Perceived Brightness of a Color

You are an absolute genius.

This algorithm is far superior

to every other method of determining

the true brightness of a color.

## # re: Calculating the Perceived Brightness of a Color

Very useful indeed. Here is a PHP example:

$rgb = imagecolorat($image, $x, $y);

$r = ($rgb >> 16) & 0xFF;

$g = ($rgb >> 8) & 0xFF;

$b = $rgb & 0xFF;

return sqrt((pow($r, 2) * .241) + (pow($g, 2) * .691) + (pow($b, 2) * .068));

Obviously you will need to add your own values for $x and $y after creating and loading an image.

## # re: Calculating the Perceived Brightness of a Color

awsome...jus awsome..the phrase "perfect" is made for these kind of answer...!!

Thanks a lot.

## # re: Calculating the Perceived Brightness of a Color

The author of the web page linked at the top of this page now claims the following constants produce a more accurate result: 0.299, 0.587, and 0.114.

## # re: Calculating the Perceived Brightness of a Color

Thanks so much for this! I had to write a Java class that rendered cells in a list of colors based on the value of each color. In order to make the text stand out from the background, I originally tried making it the inverse color, but that looked ugly and didn't work for the more greyish colors. I found this method and now it works perfectly.

## # re: Calculating the Perceived Brightness of a Color

Thanks so much, this is exactly what I wanted, a way of working out whether to use black or white text

## # re: Calculating the Perceived Brightness of a Color

The formula gives a better result than the unsatisfactory W3C suggestion, as other commenters have pointed out, and will work well for determining whether the text should be black or white. But it just isn't quite there for determining relative brightness, as I explain on my web pages http://colaargh.blogspot.co.uk/

## # re: Calculating the Perceived Brightness of a Color

Thank you man.

## # re: Calculating the Perceived Brightness of a Color

I find it funny that you would do brightness = sqrt( .241 R2 + .691 G2 + .068 B2 ) without any stated reason why. The squaring is actually a very crude way to approximate a linear value. See you're not actually supposed to do math on pixel values in gamma compressed format (like the familiar 256-valued sRGB format you use), you have to make it linear first, do the math, then gamma compress it again.

You do the conversion using the formulas here en.wikipedia.org/.../SRGB but it approximates to a gamma of 2.2, which you yourself approximated with a gamma of 2.0 (the square in your formula). So you'd be better off using the proper gamma correction formula.

As for the weights I was just experimenting myself and I'm finding that 0.16 0.73 0.11 are the best weights I can find.

## # re: Calculating the Perceived Brightness of a Color

Thanks, very useful.

## # re: Calculating the Perceived Brightness of a Color

Using the exact formula in the article above I found you can match the Win10 white/black caption text selection by using a threshold of 146.8

Works with all the colours in the Win10 "Choose your accent color" prompt. May not work with other colours entered directly into the registry.

## Your comment: