Lista de nombres de colores con sus códigos hex y RGB

¿Qué son los nombres de colores?

Un nombre de color es una palabra que representa un valor exacto de rojo, verde y azul: escribir crimson en una hoja de estilos equivale a escribir #DC143C, pero se lee y se recuerda mucho mejor. CSS reconoce un conjunto fijo de estos nombres desde sus primeras versiones, heredados de la vieja paleta X11 que usaban los sistemas gráficos de Unix en los años 90.

Esta página reúne 220 nombres de colores organizados en 12 familias —rojo, naranja, amarillo, verde, cian, azul, morado, rosa, marrón, gris, negro y blanco— para que encuentres el tono exacto que buscas sin memorizar códigos. Incluye los 121 nombres que CSS acepta tal cual en cualquier navegador, además de otros nombres de uso común en diseño que no forman parte del estándar pero ayudan a describir un color con precisión.

Cómo usarlo

1. Escribe en el buscador. Acepta tanto el nombre (crimson) como el código hex (dc143c); la lista se filtra al instante con cada letra que tecleas, y un contador muestra cuántos colores coinciden.
2. Marca “Solo colores oficiales de CSS” si lo necesitas. La casilla reduce la lista a los 121 nombres que funcionan directamente en una hoja de estilos, dejando fuera el resto de nombres convencionales.
3. Haz clic para copiar. Haz clic en el nombre para copiarlo, o en el código hex o rgb() para copiar ese valor; un check confirma la copia durante dos segundos. Cada familia enlaza además a su página de tonos.

Cuándo usar un nombre en vez de un código hex

Un nombre se lee de un vistazo donde un código hex exige memoria: en medio de una hoja de estilos, background: tomato es mucho más legible que background: #FF6347, y cualquier persona que revise el código entiende de inmediato qué tono se está usando sin abrir un selector de color.

Para prototipos rápidos, bocetos en Figma o pruebas en la consola del navegador, escribir un nombre ahorra tiempo. Pero las paletas de producción casi siempre terminan en hex o en variables: un nombre solo cubre 220 puntos fijos de un espacio de millones de colores, así que en cuanto un diseño necesita un tono exacto de marca, o una variación sutil de contraste, el hex vuelve a ser la única opción.

Limitaciones honestas

CSS define alrededor de 148 nombres de color si cuentas por separado las variantes gray y grey; de esos, 121 caen dentro de las doce familias de esta lista. Los otros 99 nombres que ves aquí son convencionales —Burdeos, Salvia, Espresso— y no pertenecen a ningún estándar: otra carta de color puede definirlos con un tono ligeramente más claro u oscuro.

Los nombres oficiales llegaron a CSS desde la vieja paleta X11 y arrastran sus rarezas: por ejemplo, DarkGray (#A9A9A9) es en realidad más claro que Gray (#808080), porque la nomenclatura nunca siguió un sistema lógico. Tampoco importan las mayúsculas —crimson, Crimson y CRIMSON son el mismo color— y CSS acepta ambas grafías del gris (gray/grey, darkgray/darkgrey, slategray/slategrey), aunque esta lista solo muestra una por color. Además, todos los valores son sRGB: lo que ves depende de la gama y calibración de tu pantalla, y la impresión en CMYK no reproduce todos estos tonos.

¿Por qué es gratis?

Esta herramienta funciona entera en tu navegador: no hay cuenta que crear, ni marca de agua en lo que copias, ni versión de pago escondida detrás de un muro. Es una utilidad más de FreeToGenerate.com, pensada para resolver esta tarea puntual y dejarte seguir con tu trabajo.