¿Hay alguna forma de comparar 2 colores en JS, como 'Si el color A es más oscuro que # 202020'

Question

El color de fondo de una de mis páginas se establece a partir del color de fondo que los usuarios configuraron como color de fondo de Twitter. Tengo una página que tiene una caja redondeada con un borde negro. El borde no se ve bien si el color de fondo es oscuro, por lo que me gustaría eliminar el borde del fondo es más oscuro que un color hexadecimal arbitrario.

La forma en que estaba pensando en hacer esto fue usar una expresión regular para extraer los 3 valores RGB y sumarlos, y compararlos con mi color de referencia. ¿Hay alguna forma mejor de lograr esto?

Answer 1

Puede escribir una función que convierta entre RGB y HSL o HSV, y utilice el valor de luminosidad o brillo.

Wikipedia tiene las matemáticas para la conversión HSV -> RGB, pero no a la inversa.

http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB

Se podría también, probablemente, tirar de algunos JS desde ésta página.

http://www.csgnetwork.com/csgcolorsel4.html

Answer 2

También puede ser necesario tomar en cuenta el brillo de percepción de los colores (es decir, azul brillante # 0000FF se ve mucho más oscuro que el color rojo brillante # FF0000 que a su vez es mucho-mucho más oscuro que # 00FF00).

Así que me gustaría dividir el valor de color en bytes separados y luego multiplicar cada uno mediante un coeficiente por:

function getPerceptualBrightness(color) { 
    var r = parseInt(color.substring(0,2),16); 
    var g = parseInt(color.substring(2,4),16); 
    var b = parseInt(color.substring(4,6),16); 

    return r*2 + g*3 + b; 
} 

var green_b = getPerceptualBrightness('00A000'); 
var blue_b = getPerceptualBrightness('0000FF'); 

if (green_b > blue_b) 
{ 
    alert("Green is brighter though it's numerical value is smaller"); 
} 

esto puede ser menos precisa que la conversión a HSL pero éste se siente como una exageración para la tarea. ..

Answer 3

Si las esquinas redondeadas son imágenes, esto se trata mejor como un problema de photoshop. Guardar para web/png-24/tramado de transparencia.

Si entiendo su problema correctamente, no es solo un problema de luz y oscuridad, sino también de matiz. Esas esquinas están oscurecidas a un fondo que no coincide con estas alternativas. Con eso me refiero a que los bordes redondeados se desvanecen lentamente desde el borde hasta el color de fondo, por lo que los bordes irregulares de los píxeles no parecen ser tan discordantes.

Una solución arbitraria de luz/oscuridad donde promedie los tres y compare solo funcionaría bien con luces y sombras bastante extremas, supongo, pero con un tramado de transparencia png se fundirán suavemente en cualquier fondo automáticamente. Hay soluciones para IE 6 si tiene que admitirlo.

Answer 4

Es posible que pueda utilizar la luminosidad del color. jPaq ofrece esta función. Aún así, no estoy seguro de que esto sea lo que estás buscando. Aquí está la definición de luminancia de Wikipedia: http://en.wikipedia.org/wiki/Luminance.