Evaluate whether a HEX value is dark or light

The user of the ASP.NET web app I’m building can select colors for use on some of the elements (e.g. buttons/titles) to facilitate some degree of personalisation.

The problem is that by default the text on those layers is black…what I’m trying to do is to evaluate the HEX value chosen by the user through a picker, and switch between black and white text programmatically – this can be in JavaScript, or in code behind.

The crux of the problem is that I’m just not sure how to evaluate the HEX to make the decision whether the proximity of the chosen color to black is too close to use black text.

Any ideas?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Instead of adding the RGB components together like the other answerer (ricknz) said, you should actually take the average of them.

Also, since green is more visible to the human eye than blue, you should also add a weight.

So you have to multiply the Red component first times 0.299, the Green times 0.587 and the Blue times 0.114

so the luminance is given by: Luminance = (r*0.299 + g*0.587 + b*0.114)/3

edit:
here is a snippet which calculates it:

 float calcLuminance(int rgb)
 {
      int r = (rgb & 0xff0000) >> 16;
      int g = (rgb & 0xff00) >> 8;
      int b = (rgb & 0xff);

      return (r*0.299f + g*0.587f + b*0.114f) / 256;
 }

p.s. the division by 256 since we the RGB ran from 0-256 (instead of 0-1)

edit: changed the calculcation as to divide by 256 and not 768 as cleverly commented

Method 2

Convert to HSL and look at the Luminance value. This will tell you how bright it is.

Here is a javascript function for doing the conversion.

Method 3

The methods to do this are built into .Net now:

    var hexcolor = "#FA3CD0";
    var color = System.Drawing.ColorTranslator.FromHtml(hexcolor);
    var brightness = color.GetBrightness();
    if (brightness > .5)
    {
        // color is light
    }
    else
    {
        // color is dark
    }

Method 4

A hex color code is composed of three intensity values, one for red, one for green and one for blue, with 2 hex digits for each. To determine dark vs. light, simply add the three values together. Smaller numbers would be darker than larger values.

For #010203, adding the RGB values together gives 01+02+03 = 06. That will be darker than #102030 = 60.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x