Intelligent Color Detection

We are working on a medical scheduling system that allows users to define colors to show on the calendar based on a certain status. The issue we have is that if the user picks a dark background color and we are using a dark font, the font doesn't show. Like开发者_如何学Pythonwise if they pick a light color and we are using a light font. For a variety of reasons, we don't want to have the user setting both colors.

But, we wonder if there is a particular pattern to the hex codes of colors. Perhaps if it is less than a given value, a dark font should be used and a light font used otherwise?

So, is there an intelligent way to programatically pick the font color based on the user's choice of background color?

Amy

---

You can use the hex codes to mathematically calculate the contrast between two colors. With that information the question is just which color of text (white or black) has more contrast with the chosen background color. This site shows how to write that code in PHP or Javascript, but it could easily be adapted to other languages.

http://24ways.org/2010/calculating-color-contrast

---

Color brightness: http://www.webmasterworld.com/forum88/9769.htm

But, actually, why not to just invert background and use resulting color is a foreground?

---

For your first question, the hex values of color codes are in RGB format I believe. This means that the first byte is the amount of red-ness in the color; the second byte is the amount of green-ness in the color; and the third byte is the amount of blue-ness in the color.

If you wanted to try and guess a font color, you could try and see how close to #FFFFFF it is, and use a dark color if it is less than #777777.

I'm not a expert in colors by any means, so I won't guarantee the correctness of this answer.

---

Try this function;

function wc_light_or_dark( $color, $dark = '#000000', $light = '#FFFFFF' ) {

    $hex = str_replace( '#', '', $color );

    $c_r = hexdec( substr( $hex, 0, 2 ) );
    $c_g = hexdec( substr( $hex, 2, 2 ) );
    $c_b = hexdec( substr( $hex, 4, 2 ) );

    $brightness = ( ( $c_r * 299 ) + ( $c_g * 587 ) + ( $c_b * 114 ) ) / 1000;

    return $brightness > 155 ? $dark : $light;
}

Source: http://woocommerce.wp-a2z.org/oik_api/wc_light_or_dark/

---

If all you want is a basic white/black color flipper, based on an unknown background color, the answer's actually very simple.

Andy's down and dirty luminance:

  let luminance = (sR/255.0)**2.2*0.2126 + (sG/255.0)**2.2*0.7152 + (sB/255.0)**2.2*0.0722;

Then flip when the background luminance is about 0.37:

function textColor (luminance) { return (luminance < 0.37) ? '#fff' : '#000' }

I discuss it at length here: https://stackoverflow.com/a/69869976/10315269