Perceived Brightness

[Flyer53]

Hi there and thanks for this great tool :)

Did you ever consider adding a method that calculates perceived brightness of a given color? I think this would be a real improvement.

A good post about this is found here
http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

Regards, Stefan

[Munter]

I once had plans to implement contrast text color, but never came up with an api I liked. This would be a more low level version of it I guess. Feels like adding a color.brightness() method would be fine. This would allow more clevernes with text contrast colors later.

Would you like to take a swing at it yourself? It's pretty easy to write plugins: https://github.com/One-com/one-color/blob/master/lib/color/plugins/greyscale.js

Looks like R, G and B are floats on the range [0;1], which is exactly how channels are modelled internally in our library, so that part is easy.

I don't see a specification of what the output range is, nor any dataset to implement unit tests from though :(

[Flyer53]

Thanks for the quick answer :)

I currently do some experiments with one-color and calculations of perceived brightness based on the link I posted above. But I'll do some more research. There is no real standard and you find several algos to calculate perceived brightness.
As soon as I have something ready to show I'll post a link here and see whether I can do a plugin for one-color.

[Flyer53]

Now I'm ready to show a first test. I use one-color with the alpha version of my jquery plugin jsPanel. You can find a live preview at
http://beta.jspanel.de/api/option/theme
Scroll down to the experimental feature heading, there's some explanation too.

It includes a one-color plugin to calculate perceived brightness which I uploaded to my forked repo of one-color. If you don't mind I'd ask you to check it before I make a pull request:
https://github.com/Flyer53/one-color/blob/master/lib/color/plugins/perceived-brightness.js

Thanks, Stefan

[Munter]

If the HSP percieved brightness formula is brightness = sqrt( .241 R2 + .691 G2 + .068 B2 ), shouldn't the implementation be Math.sqrt(Math.pow(rgb._red, 2) * 0.241 + Math.pow(rgb._green, 2) * 0.691 + Math.pow(rgb._blue, 2) * 0.068) ?

[Flyer53]

Well, you're probably right, but I tested both versions and the differences were marginal. However, I changed this algorithm and added 2 more. So there're 4 algos now to test:

• the w3c recommendation
• the one mentioned above
• one from the standard for HD television
• one from the standard for UHD television (which is the one I'll use as default)

After searching the web for this topic I think I can safely say that there is now single ultimately correct algorithm to calculate perceived brightness. As the term perceived brightness already implies it's a very individual perception since there're no two human brains seeing a color in exactly the same way. So any algorithm can only be a more or less imperfect help. But I think those 4 algos offer a reasonable way to start in combination with a threshold depending on the use case.

https://github.com/Flyer53/one-color/blob/master/lib/color/plugins/perceived-brightness.js