Nombres de Colores HTML
Los 148 colores HTML/CSS con nombre y sus códigos HEX, RGB y HSL. Busca, filtra por familia, ordena por tono y halla el color más cercano a cualquier hex.
Actualizado junio de 2026
Revisado por Rafael Duarte
Lime vs Green
Valor puroEn CSS, lime es el verde puro #00FF00 — green es en realidad el tono 50% más oscuro #008000.
Aqua vs Cyan
IdénticosTanto aqua como cyan corresponden exactamente a #00FFFF. Son sinónimos en todos los navegadores.
Gray vs Grey
SinónimosCSS acepta ambas grafías: 7 pares gray/grey contribuyen al total de 148 keywords.
141 colores encontrados
Buscador del Color con Nombre Más Cercano
Pega cualquier código hex y encuentra el color CSS con nombre más cercano, ordenado por distancia de color ΔE (CIELAB).
La historia de RebeccaPurple #663399
En 2014, la comunidad web se unió para homenajear a 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. Por sugerencia de la comunidad, el tono de morado que ella amaba se añadió para siempre a la especificación CSS como rebeccapurple — el único color CSS con nombre de persona.
Cómo usar la herramienta
Busca, filtra y encuentra el color con nombre más parecido
1. Escribe un nombre o un hex
La cuadrícula filtra en tiempo real — acepta nombres como `tomato` o fragmentos de hex como `ff63`.
2. Filtra por familia o cambia el orden
Elige "Azules" y ordena por luminosidad para ver todos los tonos, del más claro al más oscuro.
3. Copia o encuentra el más cercano
Haz clic para copiar el HEX, o pega un código en el buscador para hallar la keyword CSS más parecida.
Qué hace esta herramienta
Las 148 palabras clave de color, de verdad buscables
Buscador de color más cercano
Pega cualquier hex y recibe la keyword CSS oficial más parecida, calculada por distancia ΔE (CIELAB).
Filtro por familia de color
Todos los azules, todos los verdes — tal como elige color un diseñador de verdad, no por orden alfabético.
Orden por tono, luminosidad o saturación
No solo alfabético — recorre una familia entera en progresión visual, del más claro al más oscuro.
Snippets CSS listos para pegar
Cada ficha de color incluye HEX, RGB, HSL y el código CSS ya formateado.
Tarjetas para compartir en redes
Cada color genera un banner PNG en formato cuadrado (Instagram) o wide (X/WhatsApp), con nombre, HEX, RGB y HSL.
Comparativas rápidas de pares confusos
Lime vs. green, aqua vs. cyan, gray vs. grey — lado a lado, con muestra visual y explicación.
Ejemplos
Consultas típicas y lo que devuelve la herramienta
Cuándo vas a usar esta herramienta
Los escenarios más comunes entre quienes la usan
Prototipos y demos rápidas
background: cornflowerblue se escribe más rápido y se lee mejor en el código que un hex suelto.
Buscar un nombre semántico para un color de marca
Pega tu hex en el buscador y comprueba si existe una keyword lo bastante cercana para maquetas rápidas.
Elegir un tono dentro de una familia
Filtra "Verdes" y ordena por luminosidad en vez de buscar a ojo en una tabla alfabética.
Enseñanza y documentación
Nombres como tomato o papayawhip son más fáciles de recordar para explicar CSS a quien empieza.
Correo y Markdown
Los colores con nombre sobreviven al copiar y pegar en clientes de correo y editores Markdown sin selector de color.
Errores comunes con colores CSS
Usar `green` esperando un verde puro
green es #008000, la mitad de brillo. El verde puro es lime (#00FF00).
Escribir `grey` como palabra aislada
Como keyword suelta solo gray es válida — grey únicamente funciona en nombres compuestos como darkgrey.
Suponer que hay 140 colores
La especificación define 148 keywords — las validaciones basadas en listas antiguas rechazan nombres que sí son válidos.
Pensar que coinciden con los colores de Tailwind
text-purple-700 de Tailwind y rebeccapurple de CSS vienen de paletas totalmente distintas. Para un match exacto, compara siempre el valor hex.
Contar `transparent` y `currentColor` como colores con nombre
Son valores especiales de la especificación, no forman parte de las 148 keywords de color — el buscador no acepta ese tipo de entrada.
Por qué usar esta herramienta
A diferencia de una tabla estática, aquí filtras por familia de color y ordenas por tono, luminosidad o saturación — tal como elige color un diseñador de verdad, no por orden alfabético.
El buscador de color más cercano usa distancia perceptual ΔE (CIELAB), que se ajusta mucho mejor a cómo el ojo humano percibe el color que una simple distancia RGB.
La mayoría de estas 148 keywords viene del sistema X11, usado en interfaces Unix desde los años 80 y adoptado después por SVG y CSS — por eso la lista tiene nombres curiosos como PapayaWhip o NavajoWhite.
lime vs. green
La confusión más común entre los colores CSS
Preguntas frecuentes
Exactamente 148 keywords — 141 nombres únicos más 7 alias con grafía británica en "grey". Los 16 básicos vienen de HTML 4.01, el resto de X11/SVG, y rebeccapurple se añadió en 2014.
Referencias
Herramientas relacionadas
- Verificador de Contraste de Colores Diseño Verificador de contraste de colores gratuito — verifica conformidad WCAG 2.2 AA y AAA al instante. Vista previa en vivo, simulación de daltonismo y...
- Conversor de Colores Diseño Convierte colores entre HEX, RGB, HSL y CMYK al instante. Selector de color gratuito online con comprobador de contraste WCAG y generador de paletas.
- Generador de Paleta de Colores Diseño Genera paletas de colores armoniosas desde cualquier color base. Elige armonía Análoga, Complementaria, Triádica o Tetrádica — exporta como CSS variables o...
- Paleta de Colores desde Imagen Diseño Extrae paletas de colores de cualquier imagen — obtén códigos HEX, RGB, HSL y exporta como CSS variables, Tailwind, JSON o PNG. 100% en el navegador, sin...
- Generador CSS Box Shadow — Neumorfismo, Glassmorfismo y Tailwind Diseño Generador CSS box shadow gratuito con vista previa en tiempo real. Crea sombras, efectos neumorfismo y glassmorfismo. Exporta a CSS, Tailwind o variables CSS.
