2011-03-29 18 views
10

Tengo una aplicación en la que el cliente elige un color. No puedo dejar que este color sea demasiado claro. ¿Hay alguna manera de ver esto para evitar que el cliente elija un color que sea demasiado liviano?cómo ver si un color rgb es demasiado claro

¡Muchas gracias!


demasiado clara en el caso es un color casi blanco .... Tengo un sitio web con un fondo blanco y el usuario puede elegir un color a través de un plugin de jQuery.

Quiero permitir que el usuario elija el color que quiere, pero no puede ser demasiado claro.

+1

¿Estás usando un complemento para la selección de color? Este es el tipo de información importante que necesita incluir en las preguntas. –

+3

¿Qué hay de convertir el color de RGB a HSV (tono, saturación, valor) y verificar los valores S y V? Eso es solo un tiro en la oscuridad, pero eso sería lo primero que probaría –

+3

¿tiene una definición para "demasiado ligero"? – gailbear

Respuesta

23

Si el contraste es lo que está buscando, entonces check out this article.

Ellos muestran una función como esta para elegir el color del texto sobre la base de cualquier color arbitrario:

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

// usage: 
element.style.color = isTooLightYIQ('ff0045') ? '#000' : '#fff'; 

La función anterior devolverá verdadero si el color es demasiado claro para el texto blanco sea legible en la parte superior de este color .

+0

Gracias por compartir esta maravillosa pieza de código – Zl3n

0

'demasiado ligero' en relación a qué? ¿Alguna imagen? ¿blanco puro? un poco de gris? El método más fácil es simplemente asegurarse de que uno de los valores de miembro R, G, B esté por encima de cierto umbral, aunque eso no ayudará si el usuario selecciona (128,0,0) y se está pegando en una imagen que es (127 , 0,0) - la diferencia es (1,0,0) y sería invisible o como mínimo casi imposible de detectar en la mayoría de los monitores.

-1

no estás siendo demasiado específico, pero suponiendo que utiliza JavaScript,

var v = Math.round((r+g+b)/3) y comprobar que está por debajo de un cierto umbral?

Además, ¿en qué forma está el color? RGB? HSL? ¿Maleficio?

Cuestiones relacionadas