01

Define qué significa «nombre más cercano»

CSS Color Module Level 4 define una tabla de colores con nombre cuyas palabras clave se resuelven en valores sRGB concretos. Una herramienta puede tratar esas entradas como puntos candidatos, pero la especificación no afirma que cualquier otro color posea uno de esos nombres. La pregunta es más limitada: ¿qué candidato tiene la menor distancia numérica bajo esta implementación? El resultado no determina un nombre cultural, una norma de pintura, un token de marca ni lo que todas las personas llamarán a la muestra.

  • Indica que los candidatos son la tabla CSS y no un diccionario ilimitado de nombres de color.
  • Presenta la palabra clave junto con su valor de referencia exacto para permitir una comprobación independiente.
  • Etiqueta el resultado como cercano o aproximado y no afirmes que la entrada sea literalmente ese color nombrado.
02

Construye una tabla canónica de candidatos

Carga cada palabra y su terna sRGB exacta desde una fuente versionada, sin copiar valores por una cadena de generadores. Normaliza mayúsculas para buscar y conserva la grafía canónica al responder. Varias palabras CSS son alias con coordenadas idénticas: aqua y cyan, fuchsia y magenta, además de variantes gray y grey como darkgray y darkgrey. Una distancia no puede distinguirlas. Agrupa los alias o elige un representante mediante una regla estable explícita, nunca mediante el orden accidental de las filas.

  • Guarda canales enteros rojo, verde y azul entre 0 y 255 y deriva otros espacios desde esos valores fuente.
  • Asocia los alias con la misma coordenada para que una coincidencia exacta muestre todas las palabras equivalentes.
  • Excluye la palabra especial transparent de una búsqueda opaca o trata alpha en un modo separado y documentado.
03

Normaliza la entrada antes de comparar

Analiza la entrada como color, valida sus rangos y conviértela a la misma representación que todos los candidatos. Un HEX de seis dígitos corresponde directamente a bytes sRGB codificados, pero CSS acepta muchas sintaxis y espacios. Convertir Display P3 o Lab a sRGB puede producir un valor fuera de gamut; la herramienta debe declarar si recorta, mapea o rechaza. Alpha añade otra dependencia: un color translúcido carece de un único resultado visible hasta componerse sobre un fondo conocido.

  • Rechaza entradas mal formadas en vez de reparar silenciosamente dígitos ambiguos, canales ausentes o sintaxis no admitida.
  • En un catálogo sRGB, documenta la política de gamut y muestra el valor normalizado realmente comparado.
  • Si alpha es menor que uno, exige fondo y método de composición o informa que no puede hacerse la comparación.
04

Elige deliberadamente una métrica

La distancia recta entre números rojo, verde y azul codificados es sencilla y determinista, pero los canales sRGB son no lineales y pasos numéricos iguales no pretenden ser pasos perceptivos iguales. Convertir ambos colores a CIE Lab permite usar Delta E 76, distancia euclídea en Lab. Delta E 2000 añade correcciones para no uniformidades conocidas de claridad, chroma y hue. OKLab aporta otro sistema perceptivo y CSS Color 4 documenta una Delta E OK euclídea sencilla. Las fórmulas pueden ordenar candidatos de manera diferente.

  • Usa distancia sRGB codificada solo si declaras que buscas simplicidad y compatibilidad, no validez perceptiva.
  • Aplica una única conversión y versión de métrica a todos los candidatos sin mezclar Lab, OKLab y bytes.
  • Publica el nombre de la métrica porque una distancia aislada no significa nada sin fórmula y escala.
05

Calcula y resuelve empates de forma reproducible

Tras convertir, calcula la distancia elegida desde la entrada hasta cada candidato, conserva el mínimo y aplica una política de empate documentada. Los números de coma flotante requieren cuidado: reconoce los alias exactos por su coordenada fuente compartida y no declares empate entre distancias próximas usando una tolerancia arbitrariamente grande. Conserva precisión durante la conversión y redondea solo al presentar. Un orden secundario estable por palabra canónica hace que distintas ejecuciones y planes de consulta devuelvan el mismo representante.

  • Devuelve distancia cero para una coincidencia exacta y presenta su grupo de alias cuando exista.
  • Compara distancias con precisión completa y usa solo una tolerancia estrecha justificada por la implementación.
  • Ordena iguales por una clave fija y prueba que inserción, idioma y collation no cambien el ganador.
06

Explica el resultado sin exagerarlo

Una respuesta útil incluye la entrada normalizada, la palabra CSS ganadora, su valor sRGB o HEX exacto, la métrica y la distancia medida. También puede mostrar varios candidatos próximos, pues un solo ganador oculta clasificaciones muy cerradas. No conviertas la distancia en un porcentaje de similitud sin fundamento. Umbrales como «indistinguible» dependen de métrica, condiciones de observación, pantalla, colores vecinos, persona y tarea; una consulta de catálogo no ha medido todas esas condiciones.

  • Muestra detalle numérico suficiente para reproducir la comparación y redondea de manera coherente.
  • Ofrece varios candidatos si están próximos, conservando uno determinista para URL y API.
  • Separa palabra CSS cercana de nombres editoriales, traducciones, juicios de accesibilidad o recomendaciones de paleta.
07

Verifica la implementación con pruebas fijas

Las pruebas deben proteger por separado datos candidatos, conversiones, métrica y desempate. Cada color nombrado debe coincidir consigo mismo con distancia cero. Los pares de alias deben compartir coordenadas. Comprueba ejemplos de conversión con una tolerancia numérica declarada, y haz que límites como negro, blanco, canales extremos, HEX con distinto uso de mayúsculas y colores fuera de gamut sigan la política. Fija algunas clasificaciones para impedir que una dependencia o fórmula reescriba páginas indexadas sin aviso.

  • Valida integridad y unicidad por palabra canónica permitiendo únicamente alias de coordenadas registrados.
  • Prueba sintaxis errónea, alpha, gamut, coincidencias exactas, resultados próximos y empates deterministas.
  • Versiona el algoritmo y recalcula de forma intencional cuando cambien conjunto, conversión o métrica.
S

Fuentes primarias

Las afirmaciones de este artículo se comprueban con estas especificaciones publicadas.

  1. W3C CSS Color Module Level 4 — colores con nombre
  2. W3C CSS Color Module Level 4 — ejemplos de conversión de color
  3. W3C CSS Color Module Level 4 — Delta E 2000
  4. W3C CSS Color Module Level 4 — Delta E OK