Buscador de Nombres de Colores
Un buscador de nombres de color toma un código hexadecimal y devuelve la palabra clave de color CSS más cercana. Este compara tu valor con los 141 colores con nombre de su lista y puntúa la distancia: #3B82F6 vuelve como RoyalBlue (#4169E1) marcado Cercano, #1DA1F2 da DodgerBlue (#1E90FF), Muy cercano, y #FF7F50 coincide exactamente con Coral.
Su color
Coincidencia más cercana
Herramientas populares
Acerca de Buscador de Nombres de Colores
El Buscador de nombres de color responde a una sola pregunta: ¿cómo se llama este color? Escribe o pega un valor hexadecimal en Ingrese un color, o abre el selector que hay al lado, y la herramienta compara tu color con las 141 palabras clave de color CSS que lleva. La tarjeta Coincidencia más cercana da el nombre ganador, y los botones HEX, RGB y HSL de debajo copian esa coincidencia —RoyalBlue como #4169E1, rgb(65, 105, 225), hsl(225, 73%, 57%)—, no el valor que escribiste.
La comparación es una distancia en línea recta en el espacio RGB: los canales rojo, verde y azul de los dos colores se restan, se elevan al cuadrado, se suman y se les saca la raíz. Calidad de coincidencia traduce ese número a una palabra: ¡Coincidencia exacta! en cero, Muy cercano por debajo de 30, Cercano por debajo de 80 y Aproximado más allá. #3B82F6 y RoyalBlue distan 33 unidades, de ahí el Cercano. La medida es aritmética, no perceptual: sin conversión Lab ni fórmula delta E.
La pestaña Explorar todo muestra las 141 muestras de golpe, con un buscador que filtra por nombre y por texto hexadecimal y diez filtros: Todos, Rojo, Naranja, Amarillo, Verde, Azul, Púrpura, Rosa, Gris y Blanco. Pulsa una muestra y vuelve al buscador como coincidencia exacta. La etiqueta de cada muestra alterna entre negro y blanco con la misma fórmula de luminancia relativa que definen las WCAG.
Límites: la lista solo tiene palabras clave CSS —ni Pantone, ni RAL, ni cartas de pintura—, no hay cuentagotas sobre una foto subida ni nombres inventados. Cuando dos palabras clave comparten hexadecimal gana la primera de la lista: #00FFFF devuelve siempre Aqua y nunca Cyan, y #FF00FF devuelve Fuchsia en lugar de Magenta. La comparación ocurre en la página; no se sube nada.
Casos de uso
Cómo usar
Quédate en la pestaña Buscador de color y arrastra el selector de color de la izquierda o escribe un valor hexadecimal como #3B82F6 en el campo Ingrese un color.
Lee las dos tarjetas: Su color repite lo que has introducido y Coincidencia más cercana nombra la palabra clave CSS más próxima.
Mira la línea Calidad de coincidencia de debajo —¡Coincidencia exacta!, Muy cercano, Cercano o Aproximado— para situar la distancia.
Pulsa el botón HEX, RGB o HSL para copiar el color encontrado en esa notación.
Para el camino inverso, cambia a Explorar todo, reduce la rejilla con el buscador o una etiqueta de categoría y pulsa una muestra para cargarla en el buscador.
Consejos Pro
- Los botones HEX, RGB y HSL copian los valores de la palabra clave encontrada, no el color que escribiste: si quieres tu propio hexadecimal, cógelo del campo Ingrese un color.
- El campo acepta la forma corta de tres dígitos: #f00 se expande a #FF0000 y se informa como Red, ¡Coincidencia exacta!
- La búsqueda de Explorar todo también filtra por el texto hexadecimal: escribir 8b reduce la rejilla a palabras clave como DarkMagenta o DarkRed cuyo código contiene esos caracteres.
- Pulsar una muestra en Explorar todo devuelve al buscador con Calidad de coincidencia en ¡Coincidencia exacta!, la vía más rápida para leer el RGB y el HSL de una palabra clave.
- Aqua y Cyan comparten #00FFFF, y Fuchsia y Magenta comparten #FF00FF; el buscador se queda con la primera palabra clave que encuentra a la distancia mínima, así que esos códigos salen siempre como Aqua y Fuchsia.
Solución de problemas
Las tarjetas de resultado desaparecen al pegar rgb(59, 130, 246) o un nombre de color.
Ingrese un color solo lee hexadecimal. Cualquier otra cosa falla al analizarse, no se puede calcular distancia y el panel se oculta. Convierte primero a hexadecimal, o usa el buscador de Explorar todo si lo que tienes es una palabra clave y no un número.
El botón HEX copió un código que yo no había escrito.
Los tres botones de copia pertenecen a la tarjeta Coincidencia más cercana, así que copian la palabra clave encontrada: escribe #3B82F6 y HEX da #4169E1, el valor de RoyalBlue. Para copiar tu propio color, selecciónalo en el campo Ingrese un color.
Aparece ¡Copiado! pero el portapapeles está vacío.
La confirmación se muestra en cuanto se pide la copia, mientras que la API del portapapeles del navegador aún puede rechazarla: exige página segura y clic real, y hay extensiones que la bloquean. Selecciona el valor en la tarjeta y pulsa Ctrl+C, o Cmd+C en un Mac.
Explorar todo muestra una rejilla vacía.
El buscador y las etiquetas de categoría se aplican a la vez, así que un filtro Rosa junto a una búsqueda de «azul» no deja nada. Vacía el buscador y vuelve a poner la categoría en Todos; el contador de debajo debería marcar 141 colores mostrados.
Todos los colores que pruebo salen Aproximado.
Esa nota significa que la palabra clave más próxima está a más de 80 unidades en RGB. Con solo 141 palabras clave, zonas enteras —marrones apagados, turquesas desaturados, casi todos los pasteles— no tienen vecino cercano. Toma el nombre como etiqueta aproximada y conserva el hexadecimal.
Preguntas frecuentes
Pega el código en Ingrese un color y lee la tarjeta Coincidencia más cercana. Si tu valor es una de las 141 palabras clave CSS, la tarjeta lo nombra y Calidad de coincidencia dice ¡Coincidencia exacta!: #FF7F50 devuelve Coral. Si no, obtienes la palabra clave más próxima con la nota Muy cercano, Cercano o Aproximado, y los botones HEX, RGB y HSL copian sus valores.
No hay una cifra oficial única que citar: la referencia named-color de MDN describe las 16 palabras clave de CSS nivel 1 más orange y añade que unos 150 colores más tienen palabra clave, y pares como aqua y cyan son alias que algunas listas cuentan dos veces. Lo exacto aquí es el conjunto de la herramienta: 141 palabras clave, todas visibles en Explorar todo.
Recibes la palabra clave más próxima y una nota de calidad. #3B82F6 no es palabra clave CSS, así que el buscador devuelve RoyalBlue (#4169E1) marcado Cercano; los dos distan 33 unidades en RGB. Usa el nombre cuando baste una aproximación —un comentario, un ticket, un moodboard— y deja tu hexadecimal en la hoja de estilos.
Aquí no. No hay subida de imagen ni cuentagotas: las únicas entradas son el campo hexadecimal y el selector de color contiguo. Para nombrar un color de una foto, toma el píxel con el selector de tu sistema operativo o una extensión del navegador, copia el hexadecimal que dé y pégalo en Ingrese un color.
No. Pantone, RAL y las cartas de pintura son catálogos propietarios y ninguno viene con esta herramienta. Todo lo que devuelve es una palabra clave de color CSS —uno de los 141 nombres de Explorar todo—, que es lo que entiende un navegador dentro de una hoja de estilos.
No directamente. El campo de texto solo lee hexadecimal, así que pegar rgb(59, 130, 246) hace desaparecer el panel de resultado porque el análisis falla. Convierte antes el trío —59, 130, 246 es #3B82F6— y pega eso. Una vez hallada la coincidencia, el botón RGB te devuelve la palabra clave en notación rgb().
Sí, en la pestaña Explorar todo. El buscador filtra las 141 muestras mientras escribes y compara la palabra clave y el texto hexadecimal, así que escribir verde o green reduce la rejilla. Pulsa una muestra y el buscador se reabre con ese color cargado y ¡Coincidencia exacta!
Son alias: aqua y cyan son ambos #00FFFF, y fuchsia y magenta son ambos #FF00FF. La página named-color de MDN presenta los dos pares como palabras clave equivalentes. Como el buscador conserva la primera palabra clave que encuentra a la distancia mínima, #00FFFF sale siempre como Aqua y #FF00FF como Fuchsia; el otro nombre es igual de válido en CSS.
Mide una distancia en línea recta entre los canales rojo, verde y azul de los dos colores: cada diferencia se eleva al cuadrado, se suman las tres y se saca la raíz. Gana la distancia menor. Cero significa códigos idénticos, menos de 30 se etiqueta Muy cercano, menos de 80 Cercano y más allá Aproximado. La medida es aritmética, no perceptual.
Las 16 primeras palabras clave se definieron en CSS nivel 1 y orange llegó en CSS nivel 2; la cola larga —DarkSlateGray, PapayaWhip, LemonChiffon y las demás— entró en CSS desde la lista de colores X11 a través de SVG, como explica la referencia named-color de MDN. Esa historia explica lo desigual del conjunto: varios grises y verdes casi iguales conviven con zonas sin ninguna palabra clave próxima.