Nombres de colores CSS
Los 148 colores con nombre de CSS, con vista previa y código hex. Busca por nombre, ordena por tono y haz clic en cualquier tarjeta para copiar el hex.
De dónde vienen los 148 nombres de colores CSS
La mayoría de los nombres se remonta a la paleta de colores del sistema de ventanas X11 de la década de 1980, que después adoptaron los navegadores y oficializó el módulo CSS Color. Por eso nombres tan pintorescos como papayawhip y mistyrose conviven con los de toda la vida, como red y blue. El color número 148, rebeccapurple (#663399), se añadió en 2014 en memoria de Rebecca, la hija del desarrollador web Eric Meyer, que falleció a los seis años: es el único nombre que salió directamente de la propia comunidad web.
Cuándo usar nombres y cuándo usar códigos hex
Los colores con nombre van muy bien para prototipos, ejemplos y para enseñar: tomato es mucho
más fácil de recordar que #ff6347. En producción, sin embargo, ganan los códigos hex: cubren
16,7 millones de tonos frente a solo 148. Ojo con los duplicados: gray y
grey (y todas sus variantes) son exactamente el mismo color, igual que
aqua/cyan y fuchsia/magenta. Y cuidado con
darkgray, que paradójicamente es más claro que gray, una rareza histórica
heredada de X11.
Nombres que vienen de otra época
La lista nace de los colores de los terminales X11 de los años ochenta, elegidos por programadores con los nombres que tenían en la cabeza: de ahí rarezas como «papayawhip», «lemonchiffon» y «peachpuff», que describen postres más que colores.
Hay también parejas contradictorias conservadas por compatibilidad: «darkgray» es más CLARO que «gray», porque los dos nombres vienen de tablas distintas que se fusionaron mal. Es el detalle clásico que no se puede corregir, porque miles de páginas cuentan con él desde hace treinta años.
Las grafías dobles y los sinónimos
Algunos colores tienen dos escrituras, las dos válidas, la americana y la británica: gray/grey, y todas sus familias (darkgray/darkgrey, lightslategray/lightslategrey). Son el mismo color, y la elección es solo de gusto.
Están además las parejas de nombres distintos para el mismo valor exacto: aqua y cyan son los dos #00FFFF, fuchsia y magenta los dos #FF00FF. Si una guía de estilo pide coherencia, hay que decidir cuál usar, porque un buscar y reemplazar sobre los códigos no los encuentra.
Cuándo conviene el nombre y cuándo el código
Los nombres son cómodos para prototipos, ejemplos y enseñanza: «tomato» se lee y se recuerda mejor que #FF6347, y en un fragmento de código que hay que explicar eso vale más que la precisión. Fuera de ahí, el nombre es una elección bloqueada: no se puede aclarar ni un poco.
En un proyecto de verdad conviene pasar a las variables CSS: el color se declara una vez y se usa por el nombre propio del proyecto («--acento»), no por el nombre del color. Cambiar de tono es entonces una sola línea, y los temas claro y oscuro se vuelven posibles.
Herramientas cercanas
Para pasar de un nombre a su código y al revés está Conversor de colores, y para tomar un color de una imagen Selector de colores. La legibilidad de una pareja se comprueba con Verificar el contraste de colores.