"¿Cómo se llama este color?" Es la pregunta de quien ve un tono en una web, en una foto o en el muestrario de una tienda de pinturas y quiere ponerle nombre. Con este buscador de nombre de color eliges el color en el selector o pegas su código hex y te dice qué nombre de color CSS de su lista se le parece más. Los nombres salen en inglés, que es como los entienden los navegadores; abajo tienes la traducción de cada uno. Así, un #FF6B6B sale como "Salmon" (salmón), y un #0000FF, como "Blue" (azul) exacto.
Qué hace esta herramienta
El Buscador de Nombre de Color toma un código de color HEX y te dice cuál es el color con nombre más parecido dentro de una lista de 32 nombres de color CSS habituales (rojos, naranjas, verdes, azules, morados, rosas, marrones y grises). Es útil cuando alguien te pasa #1B6B45 y necesitas llamarlo de una forma más fácil de recordar que su código, o cuando quieres poner nombre a un color que estás viendo para poder comunicarlo.
Funciona en tu navegador, al instante, sin enviar datos a ningún servidor.
Cómo se usa
- Elige un color con el selector o escribe un código HEX de 6 dígitos en el cuadro de texto. Sirven tanto
#1B6B45como1B6B45. Los códigos cortos de 3 dígitos (#F00) no se aceptan. - Pulsa "Find Color Name".
- Aparece el nombre del color más cercano, una muestra de ese color con nombre y su código HEX, para que compares a ojo con el tuyo. Si tu código coincide exactamente con uno de la lista, verás ese mismo código; si no, verás el más parecido.
#1B6B45 no es un color con nombre CSS. Dentro de la lista de la herramienta, el más cercano es "Teal" (#008080), un verde azulado: parecido, pero no el mismo tono. Saber el nombre más cercano te ayuda a describir el color de palabra ("es como un teal, pero más verde y más oscuro") aunque el código hex no tenga un nombre estándar.
Los 32 nombres que conoce la herramienta
| Familia | Nombres CSS (y su traducción aproximada) |
|---|---|
| Rojos y naranjas | red (rojo), crimson (carmesí), coral (coral), tomato (tomate), orangered (rojo anaranjado), orange (naranja), salmon (salmón) |
| Amarillos | gold (dorado), yellow (amarillo), khaki (caqui) |
| Verdes y azules verdosos | limegreen (verde lima), green (verde), teal (verde azulado), cyan (cian) |
| Azules | deepskyblue (azul cielo intenso), dodgerblue (azul brillante), blue (azul), navy (azul marino) |
| Morados y rosas | purple (morado), violet (violeta), indigo (índigo), lavender (lavanda), pink (rosa), hotpink (rosa intenso) |
| Marrones | brown (marrón), sienna (siena), tan (canela) |
| Neutros | white (blanco), lightgray (gris claro), darkgray (gris oscuro), gray (gris), black (negro) |
De dónde vienen los nombres de colores
Colores con nombre de CSS. La especificación de CSS define unos 140 colores con nombre que entienden los navegadores: red, blue, seagreen, tomato, cornflowerblue, papayawhip, etc. La mayoría vienen de los colores del sistema X11, anteriores a la web. Esta herramienta usa una selección de 32 de ellos, los más habituales.
Colores X11. El sistema de ventanas X11 de Unix definió cientos de colores con nombre en el archivo rgb.txt allá por los años 80. CSS adoptó la mayoría; por eso CSS tiene colores tan concretos como papayawhip o navajowhite.
Pantone y colores de marca. Pantone es un sistema de igualación de color propietario que se usa en imprenta y diseño de marca. Tiene sus propios colores con nombre (Pantone 281C, Pantone 2945C, etc.), pero el sistema tiene licencia y no está disponible libremente para herramientas como esta. Hay aproximaciones, pero legalmente no son Pantone.
Cómo se calcula el "color más cercano"
La herramienta mide la distancia en línea recta entre tu color y cada color de la lista en el espacio RGB (cuánto se diferencian el rojo, el verde y el azul) y se queda con el más próximo. Es rápido y siempre da el mismo resultado, pero no siempre coincide con lo que ve el ojo: dos colores que nos parecen parecidos no siempre tienen valores RGB cercanos. Los sistemas de igualación de color más precisos usan espacios perceptuales como CIE Lab y la medida Delta E (ΔE), que se acercan más a cómo percibimos las diferencias de color.
Para ponerle un nombre aproximado a un color, este método basta. Para igualar colores con precisión en imprenta o calibrar pantallas, usa una herramienta especializada con un monitor calibrado.
Usos habituales
Hablar de un color. "Usa #1B6B45 para el botón" es preciso pero no se recuerda. "Usa el verde azulado para el botón" se queda mejor en una conversación de diseño. El buscador te da esa etiqueta para hablar.
Documentación y sistemas de diseño. Nombrar los colores con su referencia estándar más cercana hace que los design tokens se entiendan mejor: brand-green ≈ teal en la documentación de tus tokens.
Analizar una web que ya existe. ¿Te gusta un color que viste en otra web? Usa un selector de color para sacar su HEX y pásalo por este buscador para darle un nombre que puedas buscar.
Auditorías de accesibilidad. Al revisar el contraste de color, un nombre a veces ayuda en la documentación, aunque con una lista corta el más cercano puede sorprender: el gris oscuro #374151 que se usa mucho para texto sale aquí como "Indigo", porque su ligero tono azulado lo acerca más a ese color que a los grises de la lista. En un informe de auditoría, acompaña siempre el nombre del código hex.
Errores comunes
"Más cercano" no significa "idéntico". El color llamado "blue" es #0000FF. Un color casi azul (#0010FF) también saldrá como "blue", pero no son el mismo. Compara la muestra y el código que te devuelve la herramienta con el tuyo para ver lo exacto que es el parecido.
Los colores de marca casi nunca tienen nombre CSS. La mayoría de las paletas de marca son distintivas a propósito (para que se reconozcan). No esperes que el rojo de Coca-Cola, el azul Tiffany o el verde de Microapp coincidan con un color con nombre de CSS: normalmente se definen solo por su HEX.
Los nombres cambian según el sistema. "Lavender" en CSS es #E6E6FA (muy pálido). "Lavanda" en floristería o en moda suele ser un tono mucho más saturado. El buscador te da el estándar web, no el significado de andar por casa.
Herramientas relacionadas
Para convertir cualquier color entre HEX, RGB, HSL y HSV, usa el Conversor de Colores. Para elegir un color a ojo con un selector, el Selector de Color HEX es lo indicado. Y para generar una paleta coordinada alrededor de un color base, mira el Generador de Paleta de Colores.