Given a RGB color x, how to find the most contrasting color y? [duplicate]

Question

Possible Duplicate:
Making a symbol appear on any colour

I have to mark a certain item in a way that will make it stick-out in the background. I need it to be surrounded with the color that contrasts the background as much as possible so it will pop out and easily noticeable by the player.

Lets say I know the background is color 'x', how do I find 'y' such that it will be very contrasting to 'x' and easy to notice in a background where 'x' is a dominant color?

I first thought about inverting color 'x' and then I noticed that when 'x' is a medium shade of gray, if I invert 'x' to get 'y', then 'y' is also a medium shade of gray which does not work.

Answer 1

A quick and easy way - though not 100% precise one - is to consider just the five extreme points white, black, red, green and blue.

First, let's transform RGB into linear space. Officially this is usually done by this formula (assuming the source data is in sRGB, which is the default for most graphic card operations on 8-bit data and nearly every image you see displayed on the web):

... where a = 0.055 for C = {R, G, B}

Or, if you just want a quick approximation, use C_linear = C_srgb^2.2.

Black or White?

You can then calculate two helpful values, luminance Y and saturation S. Useful formulas (for our linear-space RGB values) are:

Y = 0.2126 R + 0.7152 G + 0.0722 B

S = (max(R, G, B) - min(R, G, B)) / max(R, G, B)

The second one is the calculation from the HSV colour space.

If the saturation is low enough (pick any value you like; something between 0.3 and 0.5 would work fine), check the luminance; if that's > 0.5, your contrasting colour is black, else if it's < 0.5 the colour is white. For exactly Y = 0.5, both work.

Red, Green or Blue?

For colours with high saturation, you can calculate a hue H and decide according to it. Since I'm lazy, I'll just copy the calculation from Wikipedia (hue is named H₂):

If your hue is between 60° and 180°, your colour is green, if it's between 180° and 300°, it's blue, else it's red. Extend it to yellow, turquoise and magenta for more variation, or just use the opposite of the just-calculated hue at maximum saturation and lightness.

Answer 2

The most contrasting color would be the color that is as far as possible from color X. It's easy to get it this way (assuming 0,0,0=black and 1,1,1=white -- floating point colors):

y = rgb_color( 
    x.r > 0.5 ? 0 : 1,
    x.g > 0.5 ? 0 : 1,
    x.b > 0.5 ? 0 : 1
);

The result is quite ugly though, so you might want to consider a few more things:

1) generate only black / white colors:

v = ( x.r + x.g + x.b ) / 3 > 0.5 ? 0 : 1;
y = rgb_color( v, v, v );

2) change the values "0" and "1" to something less sharp

3) work in the HSV color space:

y = hsv_color( 
    ( x.h + 0.5 ) % 1,
    x.s > 0.5 ? 0 : 1,
    x.v > 0.5 ? 0 : 1
);

Answer 3

Just to distill Martin Sojka's excellent answer into something simple to apply, here's how to decide whether black or white text would have higher contrast on a given background color (R, G, B) in the sRGB color space:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > pow( 0.5, gamma ) );

This assumes that R, G and B are floating-point numbers ranging from 0.0 to 1.0. If what you have is, say, integers from 0 to 255, convert them to floats and divide them by 255.

(I would not suggest using colored text, both because the human eye has much poorer spatial resolution for color than for luminance, and also because combinations of highly saturated complementary colors tend to be irritating to look at.)

Note that, if L is close to 0.5^2.2 ≈ 0.2, small changes in the background color could cause the most contrasting text color to flip from black to white or vice versa. To avoid this happening too frequently, you could save the previous text color and only change it if L moves too far from the threshold:

if ( L > 0.3 ) {
    use_black = true;
} else if ( L < 0.1 ) {
    use_black = false;
} else {
    // keep previous text color
}

Ps. If you wanted an even quicker approximation, you could round the exponent gamma down to 2.0, allowing you to replace the pow() with a simple multiplication:

float L = 0.2126 * R*R + 0.7152 * G*G + 0.0722 * B*B;

This approximate formula is still within ±0.05 of the correct luminance calculated with the official piecewise formula given by Martin (or with the gamma = 2.2 approximation used above, which itself is within ±0.01 of the official formula), and so more than close enough for this purpose. Besides, you can mostly compensate for the error simply by adjusting the threshold slightly.

Finally, note that, if the background has a very busy texture, it's possible that no single color may stand out from it very effectively. In such cases, you may want to consider using combinations of colors, such as black text with a white outline.

---

Ps. Earlier versions of this answer suggested using the uncorrected threshold L > 0.5. However, this suggestion ignores the fact that the gamma correction used in the RGB color space approximates the perceptual non-linearity of the human eye, so that the shade of gray that looks about halfway between black and white is indeed close to RGB(0.5, 0.5, 0.5). Thus, to get an accurate measure of perceptual luminance, we really need to apply a final inverse gamma correction to the linear luminance L — or, equivalently, just apply gamma to the thresholds as well.

This perceptual non-linearity also explains why just linearly mixing the uncorrected RGB components into a luma value, and basing the decision on that, also works reasonably well:

float luma = 0.2126 * R + 0.7152 * G + 0.0722 * B;
boolean use_black = ( luma > 0.5 );

This formula does tend to overestimate the brightness of highly saturated colors; for example, for pure green it gives luma = 0.7152, whereas properly applying gamma correction would give pow(L, gamma) ≈ 0.478. Fortunately, for saturated colors, either black or white will provide a decent contrast anyway.

Answer 4

Since there is some subjectivity to any answer here, I'll offer one that is easy to understand and easy to compute. Whether it suits you and your needs is up to you.

Imagine color space represented by R, G, and B values each on the interval [0,1]. Imagine the RGB value being a vector in color space, where that vector is confined to a cube. For any RGB value in that space, the most contrasting value would be geometrically as far away from that value while still being on that cube.

Offset the cube, so it is centered at the origin, with new values r, g, and b on the interval [-0.5, 0.5]. Do the by subtracting 0.5 from all of the original RGB values. Now compute the sign of each component of rgb and multiply by -0.5. This will put you at one of the vertices of the offset color space cube. Add 0.5 to each value to restore the values to the original color space cube.

Answer 5

It depends how you invert the color, the standard way of doing so is something like:

newColor = new Color(255-oldColor.r, 255-oldColor.g, 255-oldColor.b);

Which means that something grey like (128,128,128) will turn into something very grey (127, 127, 127). You may want to try inverting the hue instead. Convert your color to HSV mode and invert the hue color.hue = 360-color.hue.

You could additionally invert the saturation.

Ultimately, it sounds like you're the one choosing the original colors here. So just choose colors that invert nicely.

Another option would be to check for colors that won't change much. Something like:

if((255-oldColor.r)-oldColor.r < 10)
    newColor.r = 0;