Hex a nombre de color

Los tokens de diseño, guías de marca y hojas de estilo suelen guardar colores como códigos hex, pero las personas aún hablan con nombres como tomato, cornflowerblue o rebeccapurple. Esta herramienta toma un único valor hex CSS—tres o seis dígitos hexadecimales, con o sin numeral inicial—y devuelve el color con nombre CSS sólido más cercano de la paleta CSS Color Module Level 4 por distancia euclídea en el espacio rojo-verde-azul de ocho bits. Cuando el hex ya coincide exactamente con un color con nombre, la respuesta marca exact en true y la distancia es cero. Cuando queda entre palabras clave, aún obtiene un nombre estable más cercano, el hex y canales propios de la palabra clave, y una distancia numérica para que revisiones de diseño y reglas de lint decidan cuán cerca es suficiente. Las cadenas hex no válidas fallan con un error de validación claro en lugar de inventar un nombre.

Cómo se eligen los colores CSS con nombre más cercanos

Cada color CSS con nombre sólido es una tripleta fija de valores de canal rojo, verde y azul de cero a 255, publicada en la tabla de palabras clave de CSS Color Module Level 4. Su entrada se normaliza: numeral inicial opcional, dígitos hex en minúsculas, y abreviatura de tres dígitos expandida duplicando cada nibble de modo que f zero zero se convierte en f f zero zero zero zero.

El algoritmo mide entonces la distancia euclídea en el espacio RGB: la raíz cuadrada de la suma de diferencias de canal al cuadrado entre su color y cada tripleta con nombre. Gana el nombre con la distancia más pequeña. Cuando dos palabras clave comparten los mismos valores RGB—por ejemplo aqua y cyan, o fuchsia y magenta—o cuando dos tripletas distintas coinciden en la misma distancia numérica, se conserva el nombre alfabéticamente primero para que el resultado no oscile entre ejecuciones.

Distancia cero significa acierto exacto de paleta y el indicador exact es true; una distancia positiva significa una aproximación de vecino más cercano que aún puede usar en textos, notas de accesibilidad o lint suave de paleta.

Qué envía y qué recibe de vuelta

Envíe un campo de cadena llamado hex. Las formas aceptadas son códigos de seis dígitos como hash f f five seven three three, abreviatura de tres dígitos como hash f zero zero, y las mismas cadenas sin numeral inicial. Se recortan los espacios alrededor del valor.

Comprobaciones clásicas incluyen rojo puro como hash f f zero zero zero zero resolviendo a red con exact true; casi-naranja hash f f five seven three three resolviendo cerca de tomato con distancia positiva; y códigos de seis dígitos sin hash resolviendo igual que su forma con hash.

Dónde aparece la búsqueda hex-a-nombre en el trabajo real

Los sistemas de diseño y libros de marca suelen publicar colores primarios y de acento como hex mientras la copia de producto, anotaciones de accesibilidad y diapositivas para interesados necesitan nombres legibles para las mismas muestras. Las reglas de lint front-end y comprobaciones de CI pueden señalar valores hex personalizados muy alejados de cualquier palabra clave CSS cuando un equipo prefiere colores con nombre en hojas de estilo por legibilidad.

Autores de visualización de datos que mapean series categóricas a veces parten de rampas hex y quieren la palabra clave CSS más cercana para leyendas que deben renderizarse sin imágenes de muestra personalizadas. Si más adelante necesita conversión multi-formato entre HEX, RGB, HSL, LAB y CMYK, conversión inversa solo de nombres a hex, extracción de color dominante de imágenes o comprobaciones de contraste WCAG, trátelos como intenciones de búsqueda y páginas separadas en lugar de sobrecargar esta página dedicada de hex a nombre de color.