Probar si existe el nombre de color CSS

Question

Tengo una aplicación donde el usuario puede escribir un nombre de color, digamos blue, una vez que lo haya hecho, un div se convertirá en ese color.

El código es bastante simple en la actualidad

<div class="colorBox" style="background-color: <%= color.name %>;"> 
</div> 

¿Es posible comprobar si existe o no ese color en particular? Por el momento, solo puedo pensar en una solución:

Recorra una lista de nombres de colores, como this one, pero ¿no hay una manera más elegante? Por ejemplo

CSS.exists("blue") 
=> true 

Además, no quiero que el usuario introduzca un hexágono de color.

Answer 1

El Color gem/Color::CSS es lo que quiere:

devuelve el color RGB para el nombre o nulo si el nombre no es válido.

Answer 2

Esto debería funcionar. Llamar si después de que el usuario establece el color;

function isColorValid(element, value) { 
    return element && element.style.backgroundColor === val; 
} 

EDIT: jsFiddle

Answer 3

De su pregunta, parece que desea verificar el servidor. Sin embargo, el reconocimiento de colores es un comportamiento específico del navegador y, por lo tanto, se requeriría un viaje de ida y vuelta al navegador.

El siguiente es un camino. Me interesaría ver si alguien tiene algo más elegante. Suponemos que está utilizando jquery.

Ponga un div 'de prueba' en su html. HTML:

<div id="test"></div> 

JS:

function color_exists(color) { 
    if (color == 'white') { 
     return true; 
    } 
    $('#test').css('backgroundColor', color); 
    if ($('#test').css('backgroundColor') == color) { 
     return true; 
    } else { 
     return false; 
    } 
} 

Nos basamos en el hecho de que el navegador sería simplemente ignorar un valor de color si no puede reconocerlo.