Nombres de Colores HTML

Nombres de Colores HTML — Los 148 Colores CSS con Búsqueda y Filtro

Todos los nombres de colores HTML en una referencia con búsqueda: la lista completa de colores CSS con nombre, sus valores HEX, RGB y HSL, muestras en vivo y copia con un clic. A diferencia de las tablas estáticas, aquí puedes filtrar por familia de color — todos los azules, todos los verdes — y ordenar por tono, luminosidad o saturación, tal como un diseñador elige un color en la práctica.

La especificación CSS Color Level 4 define exactamente 148 keywords de color: 141 nombres únicos más 7 grafías británicas "grey". Muchas referencias siguen citando 140 — la spec dice otra cosa. La página incluye además un buscador del color con nombre más cercano: pega cualquier código hex y obtén la keyword CSS oficial más parecida, ordenada por distancia perceptual ΔE (CIELAB).

Cómo Usar la Referencia de Colores HTML

Encontrar y copiar un color toma segundos:

1. Escribe un nombre o código hex en el buscador — la cuadrícula se filtra en tiempo real mientras escribes, aceptando nombres como tomato y fragmentos de hex como ff63.
2. Filtra por familia o cambia el orden — elige "Azules" y ordena por luminosidad para ver todos los azules de CSS, del más claro al más oscuro.
3. Haz clic en cualquier muestra para copiar su HEX al instante — o haz clic en el nombre para abrir los detalles con RGB, HSL, snippets CSS listos para pegar y banners para compartir en Instagram, WhatsApp y X.
4. Encuentra el color con nombre más cercano a cualquier hex — pega un código como #517CBD en el buscador y obtén la keyword oficial más próxima con su distancia exacta.

Ejemplos de Nombres de Colores HTML

Algunas consultas reales para mostrar lo que devuelve la referencia:

El buscador acepta el formato corto de 3 dígitos: #fa0 se expande a #FFAA00 antes de comparar.

Qué Son los Colores CSS con Nombre

Los colores con nombre son keywords de texto que funcionan como valor en cualquier propiedad de color de CSS: color: rebeccapurple se renderiza idéntico a color: #663399. El navegador resuelve el nombre a RGB durante el parseo — no hay diferencia de rendimiento entre una keyword y un hex.

Los 16 nombres básicos (black, white, red, lime, navy, teal…) vienen de HTML 4.01 (1997). El resto nació en el sistema de colores X11, usado en interfaces Unix desde los años 80, fue adoptado por SVG e incorporado a CSS3 — por eso la lista incluye rarezas como PapayaWhip, Bisque y NavajoWhite. CSS Color Level 4 añadió la última entrada en 2014: rebeccapurple.

La Historia de RebeccaPurple

rebeccapurple (#663399) es el único color CSS con nombre de persona. Rebecca Meyer, hija del pionero del CSS Eric Meyer, murió de cáncer cerebral el 7 de junio de 2014 — el día de su sexto cumpleaños. Ese mismo día, la comunidad web propuso añadir a la especificación el tono de morado que ella amaba, y el CSS Working Group lo aprobó en cuestión de horas. Se usó el nombre completo "Rebecca" a petición de su padre: acababa de dejar atrás el apodo "Becca". Hasta hoy, los desarrolladores usan la keyword como homenaje.

Casos de Uso Comunes

• Prototipos y demos: background: cornflowerblue se escribe más rápido y se lee mejor en un ejemplo de código que un hex — por eso los colores con nombre dominan los tutoriales.
• Buscar un nombre semántico para el color de tu marca: pega tu hex en el buscador y descubre si existe una keyword oficial lo bastante cercana para mocks rápidos.
• Elegir un tono dentro de una familia: filtra "Verdes" y ordena por luminosidad para recorrer los 23 verdes de CSS en orden, en vez de buscar en una tabla alfabética.
• Enseñanza y documentación: nombres como tomato y papayawhip se recuerdan fácil — ideales para explicar CSS a principiantes.
• Email y Markdown: los colores con nombre sobreviven al copiar y pegar en entornos sin selector de color.

Errores Comunes con los Colores CSS

• Usar green queriendo el verde puro: green es #008000, un tono a media luminosidad. El verde puro (rgb(0, 255, 0)) es lime — una herencia de HTML 4.01 que aún sorprende.
• Escribir grey como keyword aislada: solo gray es válida en la forma simple. La grafía británica funciona únicamente en nombres compuestos — darkgrey, slategrey y cinco más son aliases válidos.
• Suponer que los colores con nombre coinciden con las clases de Tailwind: text-purple-700 y rebeccapurple vienen de paletas separadas. Si necesitas una coincidencia exacta, compara los hex — casi nunca coinciden.
• Contar con 140 colores: la spec define 148 keywords. Una validación basada en listas antiguas de 140 entradas rechazará keywords válidas.

Preguntas Frecuentes

¿Cuántos colores HTML con nombre existen?

La especificación CSS Color Level 4 define exactamente 148 keywords de color, además de los valores especiales transparent y currentColor. Son 141 nombres únicos más 7 aliases con la grafía británica "grey". Los 16 nombres básicos vienen de HTML 4.01; el resto deriva del conjunto X11/SVG, y rebeccapurple se añadió en 2014.

¿Por qué existe un color CSS llamado rebeccapurple?

Se añadió en 2014 en memoria de Rebecca Meyer, la hija de seis años del pionero del CSS Eric Meyer, que murió de cáncer cerebral el día de su cumpleaños. La comunidad web propuso el color ese mismo día y el CSS Working Group lo aprobó en horas. Es el único color CSS con nombre de una persona real.

¿Cuál es la diferencia entre lime y green en CSS?

lime es el verde puro de máxima luminosidad: #00FF00. green es el tono más oscuro #008000, a media luminosidad. La nomenclatura viene del conjunto original de 16 colores de HTML 4.01, donde green se definió como el tono medio. Para el verde más brillante posible, usa lime.

¿Gray o grey: cuál es válido en CSS?

Como keyword aislada, solo gray (#808080) es válida. Sin embargo, ambas grafías funcionan en nombres compuestos: darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey y las variantes slate son todas legales — justo por eso el total de keywords es 148 y no 141.

¿Puedo encontrar el nombre CSS más cercano a un hex?

Sí — pega el hex en el buscador de color con nombre de esta página. Convierte tu color y las 148 keywords al espacio CIELAB y ordena por distancia ΔE, que modela la percepción humana mucho mejor que la distancia RGB cruda. Obtienes la mejor coincidencia y las alternativas más próximas.

Recursos

• MDN — <named-color> — La lista canónica de colores con nombre en la documentación de los navegadores, con muestras renderizadas.
• W3C — CSS Color Module Level 4 — La tabla oficial de la especificación con las 148 keywords y sus valores RGB exactos.
• Eric Meyer — In Memoriam, 2 — El texto detrás de la historia de rebeccapurple, escrito por el padre de Rebecca.