¿Hay una manera de saber si un color hexadecimal HTML es claro u oscuro

Question

Quiero color de la fuente en mi página html para cambiar a negro si el color de fondo de la fila es claro y negro si el fondo es blanco

Estoy usando jsp en mi página. ¿hay una manera de decir algo como esto

si el color < ## 0686FF continuación fontcolour = # 000000 por ejemplo

edición: en busca de un scriptlet o Javascript

Answer 1

Esta solución usa la clase java.awt.Color para derivar el valor de brillo del color y usarlo para determinar qué color de fondo se debe usar.

editar: Esta solución es diferente de algunas de las otras soluciones porque las otras soluciones considerarán que algunos colores brillantes son oscuros, por ejemplo. rojo primario (# FF0000). Mientras que esta solución, considerará el rojo primario como uno de los colores más brillantes que pueda tener. Supongo que depende de tus preferencias. ¿Quieres leer rojo sobre negro o rojo sobre blanco?

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 significa Hue, Saturation, Brightness - brightness también se conoce como luminosidad. Con los valores de la clase Color están entre 1 y 0. Ergo, 0.5 brillo es el punto medio entre los colores más brillantes y los colores más oscuros).

La interacción entre matiz, saturación y brillo es un poco más compleja que la roja, azul y verde. Utilice la herramienta this experimento con diferentes colores y encontrar las relaciones entre RGB y HSB

Answer 2

Por "color" que por lo general significa 24 -bit color RGB: 1 byte (8 bits) para rojo, verde, azul. Es decir, cada canal tiene un valor de 0-255 o de 0x00 a 0xff en la visualización hexadecimal.

El color blanco es todos los canales llenos: #FFFFFF, negro, todos los canales están desactivados: # 000000. Obviamente, un color más claro significa valores más altos en los canales, el color más oscuro significa valores más bajos en los canales.

¿Cómo funciona exactamente de elegir su algoritmo depende de usted, una simple sería:

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

Editar: autor de la pregunta pide ejemplo más completo, por lo que él/ella puede tener mejor comienzo, así que aquí es:

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); 
} 

produce salida:

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

Y muestra la técnica de dividir el color en formato #aabbcc en canales rgb, unirlos más tarde (si es necesario), etc.

Answer 3

Un enfoque más natural podría estar utilizando el espacio de color HSL. Puedes usar el tercer componente ("ligereza") para descubrir qué tan claro es un color. Eso funcionará para la mayoría de los propósitos.

Un montón de descripciones por googling. Básicamente, toma el componente de color con el valor más alto (digamos que es rojo) y el que tiene el valor más bajo (por ejemplo, verde). En este caso:

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

Suponiendo que extrajo sus colores como valores de 0 a 255. Usted obtendrá un valor entre 0 y 1. Un color de la luz podría ser de cualquier color con una ligereza por encima de cierto valor arbitrario (por ejemplo, 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; 
} 

El selector de color utilizado en http://www.careerbless.com/services/css/csstooltipcreator.php funciona bien