Buscador de nombres de colores

Cómo usar el buscador de nombres de colores

1. Elige un color con Elige un color o escribe un valor en Código de color: un código HEX como #1E90FF, rgb(30 144 255), hsl(210 100% 56%) o cualquier otro color CSS.
2. La primera vez, la herramienta carga su lista de unos 32 000 nombres de colores (unos cientos de kilobytes, una sola vez por visita). A partir de ahí, los resultados aparecen mientras escribes.
3. Mira el Nombre más cercano junto a Tu color. Si el código figura tal cual en la lista, la etiqueta indica Coincidencia exacta.
4. Debajo aparecen Los 5 nombres más cercanos y los Colores CSS con nombre más cercanos, con su código HEX y su distancia (ΔE). Usa Copiar nombre o Copiar HEX para quedarte con uno.
5. Cambia Comparar con para elegir entre CIEDE2000 (CIELAB) y Distancia OKLab, o pulsa Color aleatorio para explorar.

El color y la búsqueda se quedan en tu navegador.

De dónde salen los nombres

Los nombres proceden de color-name-list, una colección de código abierto mantenida por David Aerne y muchos colaboradores con licencia MIT. Reúne unos 32 000 nombres únicos sacados de cartas de pintura, diccionarios históricos de colores, la naturaleza, la cultura popular y sugerencias de la comunidad, de «Absolute Zero» a «Zucchini». Cada nombre corresponde a un único código HEX. Los nombres están en inglés: la herramienta no los traduce al español, así que obtendrás, por ejemplo, «Clear Chill» y no una denominación en castellano.

La herramienta compara además tu color con los 148 colores CSS con nombre de CSS Color Level 4 (tomato, rebeccapurple, dodgerblue…), que entienden todos los navegadores. Los sinónimos que comparten código se muestran juntos, como gray / grey o aqua / cyan. Son los nombres que conviene usar en una hoja de estilos cuando quieres algo legible.

Cómo se elige el color más cercano

Comparar códigos HEX dígito a dígito no funciona: #808080 y #7F8080 son casi idénticos, pero un pequeño cambio en otro canal puede verse muy distinto. La herramienta convierte cada color a un espacio de color perceptual y mide allí las distancias.

• CIEDE2000 (CIELAB) es la fórmula de diferencia de color de la Comisión Internacional de la Iluminación, que se usa en imprenta y para igualar pinturas. Corrige la antigua distancia CIELAB según cómo juzga nuestro ojo la luminosidad, el croma y el tono, sobre todo en los azules y los casi grises. La implementación sigue a Sharma, Wu y Dalal (2005) y se ha probado con sus datos de referencia.
• Distancia OKLab es la distancia en línea recta en OKLab, un espacio moderno diseñado para que los pasos perceptuales sean uniformes. Se muestra multiplicada por 100 para que se lea en una escala parecida a ΔE2000. Es más rápida y suele coincidir con CIEDE2000; cuando discrepan, las diferencias son sutiles.

Como referencia, un ΔE inferior a 1 es invisible para la mayoría de las personas, entre 1 y 2 es una diferencia muy leve si se comparan lado a lado, y por encima de 5 los colores se ven claramente distintos. Si el nombre más cercano tiene un ΔE grande, tu color simplemente queda entre varios colores con nombre.

Ideas para usar los nombres de colores

• Nombrar tokens de diseño y muestras de una paleta con algo más amable que un código.
• Describir un color en un correo, una ficha de producto o un texto alternativo.
• Encontrar una palabra clave CSS parecida a un color de marca para prototipos rápidos.