Colores CSS con nombre: cuándo ayudan y cuándo HEX es más claro

Un color con nombre es un valor CSS exacto

CSS Color 4 define un amplio conjunto de colores con nombre. El navegador acepta un identificador de color con nombre donde se permita un valor de color y lo resuelve en los canales sRGB estandarizados. Por ejemplo, red es exactamente #FF0000, blue es #0000FF y rebeccapurple es #663399.

.notice {
  color: white;              /* #FFFFFF */
  background: rebeccapurple; /* #663399 */
  border-color: black;       /* #000000 */
}

Ortografía y uso de mayúsculas

Los identificadores de colores con nombre no distinguen entre mayúsculas y minúsculas ASCII. red, RED y ReD se resuelven en el mismo valor. Los nombres formados por varias palabras se escriben como un único identificador, sin espacios ni guiones, como cornflowerblue, darkslategray y lightgoldenrodyellow.

• Usa el identificador estandarizado exacto; nombres inventados como brandblue no son colores salvo que se utilicen mediante otro mecanismo.
• Prefiere minúsculas en el código fuente para mantener coherentes las búsquedas y revisiones, aunque el navegador acepte otras combinaciones.
• No traduzcas el identificador: CSS utiliza white, no una palabra localizada para blanco.
• Consulta la especificación o una búsqueda determinista en vez de reconstruir de memoria un nombre largo.

.same-result {
  color: red;
  border-color: RED;
  outline-color: ReD;
}

Nombres distintos pueden resolverse en el mismo color

La lista de colores con nombre contiene alias heredados de paletas anteriores y variantes ortográficas. aqua y cyan se resuelven ambos como #00FFFF. fuchsia y magenta se resuelven como #FF00FF. gray y grey se resuelven como #808080, y esa pareja ortográfica aparece también en varios nombres grises compuestos.

• aqua = cyan = #00FFFF
• fuchsia = magenta = #FF00FF
• gray = grey = #808080
• darkgray = darkgrey = #A9A9A9
• slategray = slategrey = #708090

Por qué los nombres no forman un sistema de color fiable

El estándar conserva nombres acumulados a lo largo de la historia de VGA, HTML, X11 y SVG. Advierte expresamente que el conjunto es desigual e incoherente internamente. Las palabras son identificadores útiles, pero no son coordenadas ordenadas y no deben tratarse como una paleta diseñada.

• green es #008000, mientras que el verde sRGB máximo #00FF00 se llama lime.
• darkgray es #A9A9A9 y resulta más claro que gray, #808080, pese a su prefijo.
• purple es #800080, mientras que rebeccapurple tiene el valor distinto #663399.
• Nombres similares en lenguaje natural no garantizan pasos iguales de tono, saturación o luminosidad.
• La lista cubre sRGB de forma irregular y no representa colores de marca arbitrarios ni colores Display P3 de gama amplia.

Por eso un nombre por sí solo documenta mal una decisión de diseño. Registra el valor exacto, calcula el contraste a partir de él y compara los canales resueltos en vez de asumir que dark, light, pale o medium establecen una relación medible.

Cuándo un color con nombre mejora el código

Una palabra clave breve y conocida puede ser la opción más clara cuando se pretende usar exactamente el valor estandarizado y el código es local. black y white se reconocen de inmediato. red, blue y lime son útiles en demostraciones que enseñan sintaxis CSS o aíslan el comportamiento del navegador.

• Usa nombres familiares en ejemplos mínimos donde el color no sea el objeto de la prueba.
• Usa una palabra clave cuando su valor estandarizado forme parte explícita del requisito.
• Usa nombres en contornos rápidos de depuración que no se convertirán en estilos del producto.
• Mantén los ejemplos listos para copiar indicando el valor numérico cuando aparezca una palabra clave menos conocida.

Cuándo HEX o una propiedad personalizada semántica es más clara

Las interfaces de producción suelen necesitar una paleta estable con funciones como texto, superficie, acción, advertencia y borde. Una palabra clave sin procesar no expresa esas funciones, y cambiar cada uso de blue es más difícil que cambiar un solo token semántico. Las propiedades personalizadas de CSS proporcionan nombres definidos por el autor que empiezan con dos guiones y pueden contener el valor de color revisado.

:root {
  --color-text: #111827;
  --color-surface: #FFFFFF;
  --color-action: #4F46E5;
  --color-warning: #B45309;
}

.button {
  color: var(--color-surface);
  background: var(--color-action);
}

• Elige HEX cuando los revisores necesiten el valor sRGB exacto y compacto.
• Elige rgb() cuando importen los canales explícitos o un alfa legible.
• Coloca cualquiera de los dos valores tras una propiedad personalizada semántica cuando muchos componentes compartan una función.
• No uses red o green como única señal de error o éxito; el texto, los iconos y un contraste accesible siguen siendo importantes.
• Trata los nombres de los tokens como semántica del producto y sus valores numéricos como datos de implementación reemplazables.

Lista práctica para colores con nombre

• Verifica que la palabra figure en la tabla estandarizada de colores con nombre.
• Consulta su valor HEX o sus canales RGB exactos en vez de estimarlos por el nombre.
• Comprueba si otra palabra clave es un alias exacto y conserva una sola referencia canónica.
• No deduzcas un orden a partir de prefijos como dark o light.
• Recuerda que los colores opacos con nombre se resuelven como sRGB, no en un espacio de color más amplio.
• Usa propiedades personalizadas semánticas para las paletas de producto mantenidas.
• Calcula el contraste a partir del valor resuelto y el fondo final.
• Mantén valores especiales como transparent y currentcolor separados de la lista de colores opacos con nombre.

Color Atlas sigue estas reglas almacenando un único registro canónico para cada color y derivando sus formatos y valores de contraste. Un alias estandarizado puede documentarse en ese registro sin fabricar una segunda página SEO casi duplicada.