Reverse opposing colors

Question

I have a user setup where they can choose the colors of the alerts. the Alert is the background color on a text or button. But the problem comes in that if they select a dark blue and we have black letters the contrast isnt enough and you cannot read it.

I have tried to make a function to get the reverse opposing color but havent got too far.

Is there such a function?

Answer 1

I found that the best solution for me is to convert the RGB values into YIQ values. As we are only interested in the brightness value (represented by Y), there is one single calculation to be done: Y = (299*R + 587*G + 114*B)/1000. The Java code for that would look like this:

public static Color getContrastColor(Color color) {
  double y = (299 * color.getRed() + 587 * color.getGreen() + 114 * color.getBlue()) / 1000;
  return y >= 128 ? Color.black : Color.white;
}

You can see that it simply decides to use black or white, based upon the brightness of the original color. And the result works very nice in my opinion. The weights (299, 587, 114) are proportional to the sensitivity of the eyes (or rather the sensitivity of the retina) to the corresponding color.

Answer 2

Use complementary color:

Algo is simple, substract each color component from 255 to get new color components

Color textColor = Color.rgb(255-Color.red(bgColor),
                         255-Color.green(bgColor),
                         255-Color.blue(bgColor));

----- EDIT (As RGB based complement may not work always --------

These two links are very much helpful and on topic:

http://www.splitbrain.org/blog/2008-09/18-calculating_color_contrast_with_php

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

Answer 3

Based on Marks solution I would suggest:

public static int getComplementaryColor(int colorToInvert) {
    float[] hsv = new float[3];
    Color.RGBToHSV(Color.red(colorToInvert), Color.green(colorToInvert),
            Color.blue(colorToInvert), hsv);
    hsv[0] = (hsv[0] + 180) % 360;
    return Color.HSVToColor(hsv);
}

And additionally I now created a similar method, for calculating a default background for a given color:

public static int getContrastVersionForColor(int color) {
    float[] hsv = new float[3];
    Color.RGBToHSV(Color.red(color), Color.green(color), Color.blue(color),
            hsv);
    if (hsv[2] < 0.5) {
        hsv[2] = 0.7f;
    } else {
        hsv[2] = 0.3f;
    }
    hsv[1] = hsv[1] * 0.2f;
    return Color.HSVToColor(hsv);
}

Answer 4

As Sarwar Erfan pointed out, use complementary colors. For that, you can use an integer mask (which will be faster, than inverting R, G, B color components separately).

int textColor = bgColor ^ 0x00ffffff;

Answer 5

integer solution:

public static int getContrastColor(int color) {
        double y = (299 * Color.red(color) + 587 * Color.green(color) + 114 * Color.blue(color)) / 1000;
        return y >= 128 ? Color.BLACK : Color.WHITE;
    }

Answer 6

I got it working, I think :)

Here is the function:

public static int OpposeColor(int ColorToInvert)
{
     int RGBMAX = 255;

     float[] hsv = new float[3];
     float H;

     Log.i("HSV_H", "Start Color=" +  ColorToInvert);

     Color.RGBToHSV( Color.red( ColorToInvert),  RGBMAX - Color.green( ColorToInvert), Color.blue(ColorToInvert), hsv);

     Log.i("HSV_H", "Hue=" + hsv[0]);
     Log.i("HSV_H", "Saturation=" + hsv[1]);
     Log.i("HSV_H", "Value=" + hsv[2]);

    H = (float) (hsv[0] + 0.5);

    if (H > 1) H -= 1;

    Log.i("HSV_H", "Hue2=" + H);         

    Log.i("HSV_H", "Color=" +  Color.HSVToColor(hsv ));

    return Color.HSVToColor(hsv );


}

Answer 7

Does the text have to be a color derived from the background color? What if it just alternates between white and black based on the r g b intensity? The idea being that white will always be visible on r g b values below a certain intensity and black always visible on the rest.

I don't have a working algorithm to share, but you could try something along the lines of:

int threshold = 50;
if(r < threshold && g < threshold && b < threshold) {
  // set your font color to white
} else {
  // set your font color to black
}

You'll probably have to fiddle with threshold a bit to get something good looking. You could also tint the font a bit based on which r g b value is dominant.

Answer 8

Slight modification of Simons' answer

float[] hsv = new float[3];
java.awt.Color.RGBtoHSB( bgColour.getRed(), bgColour.getGreen(), bgColour.getBlue(), hsv );
hsv[2] = (hsv[2] + 180) % 360;
java.awt.Color   invertedColour = java.awt.Color.getHSBColor( hsv[ 0 ], hsv[ 1 ], hsv[ 2 ] );

Answer 9

There is ColorUtils.calculateLuminance(int color) which can be used to determine whether to use a dark or bright text color for the given background color.

example:

if (ColorUtils.calculateLuminance(backgroundColor) <= 0.5) textColor = <bright>
else textColor = <dark>

The threshold (0.5 in this example) could be chosen experimentally for the best visual results.

Documentation

Answer 10

Another general solution for converting a color in integer format is:

private int getComplementaryColor( int color) {
    int R = color & 255;
    int G = (color >> 8) & 255;
    int B = (color >> 16) & 255;
    int A = (color >> 24) & 255;
    R = 255 - R;
    G = 255 - G;
    B = 255 - B;
    return R + (G << 8) + ( B << 16) + ( A << 24);
}

Answer 11

You could calculate the difference between each color channel (red, green and blue), and get the average difference - then do some comparison based on that.

Answer 12

import android.graphics.Color;
import android.graphics.Paint;

/**
 * Utilities for performing common color-related tasks.
 * @author Ryan Ware
 *
 */
public class ColorUtils {

  public static int getComplimentColor(Paint paint) {
    return getComplimentColor(paint.getColor());
  }

  /**
   * Returns the complimentary (opposite) color.
   * @param color int RGB color to return the compliment of
   * @return int RGB of compliment color
   */
  public static int getComplimentColor(int color) {
    // get existing colors
    int alpha = Color.alpha(color);
    int red = Color.red(color);
    int blue = Color.blue(color);
    int green = Color.green(color);

    // find compliments
    red = (~red) & 0xff;
    blue = (~blue) & 0xff;
    green = (~green) & 0xff;

    return Color.argb(alpha, red, green, blue);
  }

  /**
   * Converts an int RGB color representation into a hexadecimal {@link String}.
   * @param argbColor int RGB color
   * @return {@link String} hexadecimal color representation
   */
  public static String getHexStringForARGB(int argbColor) {
    String hexString = "#";
    hexString += ARGBToHex(Color.alpha(argbColor));
    hexString += ARGBToHex(Color.red(argbColor));
    hexString += ARGBToHex(Color.green(argbColor));
    hexString += ARGBToHex(Color.blue(argbColor));

    return hexString;
  }

  /**
   * Converts an int R, G, or B value into a hexadecimal {@link String}.
   * @param rgbVal int R, G, or B value
   * @return {@link String} hexadecimal value
   */
  private static String ARGBToHex(int rgbVal) {
    String hexReference = "0123456789ABCDEF";

    rgbVal = Math.max(0,rgbVal);
    rgbVal = Math.min(rgbVal,255);
    rgbVal = Math.round(rgbVal);

    return String.valueOf( hexReference.charAt((rgbVal-rgbVal%16)/16) + "" + hexReference.charAt(rgbVal%16) );
  }
}

thanks to: http://www.java2s.com/Code/Android/2D-Graphics/Returnsthecomplimentaryoppositecolor.htm

Answer 13

For API 24+. Warning, threshold != 0.5f, my variant is 0.29f

int color_inv = Color.luminance( color) > 0.29f ? Color.BLACK : Color.WHITE;