Is there any way to find out if light or dark color is in HTML format

Question

I want the font color on my html page to change to black if the background color of the line is light and black if the background is white.

I am using jsp on my page. is there any way to say something like this

if the color is <## 0686FF, then fontcolour = # 000000 for example

edit: search for script or javascript

Answer 1

This solution uses the class java.awt.Colorto get the color brightness value and use it to determine which background color should be used.

edit: , , . (# FF0000). , , . , . ?

String fontColor = "#0cf356";

// remove hash character from string
String rawFontColor = fontColor.substring(1,fontColor.length());

// convert hex string to int
int rgb = Integer.parseInt(rawFontColor, 16);

Color c = new Color(rgb);

float[] hsb = Color.RGBtoHSB(c.getRed(), c.getGreen(), c.getBlue(), null);

float brightness = hsb[2];

if (brightness < 0.5) {
   // use a bright background
} else {
   // use a dark background
}

HSB , , - . Color 1 0. Ergo, 0,5 - ).

, , . RGB HSB

Answer 2

"" 24- RGB: 1 (8 ) , , . 0-255 0x00 0xff .

- : #FFFFFF, - : # 000000. , , .

, :

//pseudo-code
if (red + green + blue <= (0xff * 3) / 2) //half-down, half-up
  fontcolor = white;
else
  fontcolor = black;

: asker , , :

public static void main(String[] args) throws IOException {

String value =
       // new Scanner(System.in).nextLine(); //from input
        "#112233"; //from constant
int red = Integer.parseInt(value.substring(1, 1 + 2), 16);
int green = Integer.parseInt(value.substring(3, 3 + 2), 16);
int blue = Integer.parseInt(value.substring(5, 5 + 2), 16);

System.out.println("red = " + Integer.toHexString(red)
        + ", green = " + Integer.toHexString(green)
        + ", blue = " + Integer.toHexString(blue));

if (red + green + blue <= 0xff * 3 / 2)
    System.out.println("using white color #ffffff");
else
    System.out.println("using black color #000000");

String colorBackToString = "#" + Integer.toHexString(red) +
        Integer.toHexString(green) +
        Integer.toHexString(blue);
System.out.println("color was " + colorBackToString);
}

:

red = 11, green = 22, blue = 33
using white color #ffffff
color was #112233

#aabbcc rgb, ( ) ..

Answer 3

HSL. ( "" ), , . .

googling. ( , ) , (, ). :

L = (red + green) / (255*2.0)

, 0 255. 0 1. (, 0,6).

Answer 4

function isTooLightYIQ(hexcolor)
{
      var r = parseInt(hexcolor.substr(0,2),16);
      var g = parseInt(hexcolor.substr(2,2),16);
      var b = parseInt(hexcolor.substr(4,2),16);
      var yiq = ((r*299)+(g*587)+(b*114))/1000;
      return yiq >= 128;
}

The color picker used at http://www.careerbless.com/services/css/csstooltipcreator.php works well

Answer 5

Here is Kieran's answer from above in PHP , which works great for me. Thanks Kieran.

function isTooLightYIQ($hexcolor)
{
    $hexcolor = ltrim($hexcolor, "#");
    $r = base_convert(substr($hexcolor, 0, 2), 16, 10); 
    $g = base_convert(substr($hexcolor, 2, 2), 16, 10); 
    $b = base_convert(substr($hexcolor, 4, 2), 16, 10); 
    $yiq = (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
    return $yiq >= 128;
}

Usage (using maliayas AdjustBrightness () function ):

$adjustPercent = -0.45;  //  45% darker
$darkHexColor = (isTooLightYIQ($hexColor)) ? adjustBrightness($hexColor, $adjustPercent) : $HexColor;