Convertidor de HEX a Color con Nombre

• Coincidencia Instantánea de HEX a Color con Nombre: el convertidor calcula al instante la distancia euclidiana entre tu entrada y los 148 colores con nombre CSS. Los resultados se actualizan con cada pulsación de tecla, mostrando la coincidencia más cercana con porcentaje de similitud, puntuación de distancia y valores de color. Sin ningún botón que pulsar.
• Porcentaje de Similitud y Puntuación de Distancia: cada resultado muestra tanto el porcentaje de similitud (0-100 %) como la distancia euclidiana (Δ) en el espacio RGB. Un 100 % de similitud significa una coincidencia exacta. La barra de progreso codificada por colores te da una idea visual rápida de lo cerca que está la coincidencia.
• Procesamiento 100 % Privado en el Navegador: toda la coincidencia de colores ocurre localmente en tu navegador con JavaScript. Tus valores HEX nunca salen de tu dispositivo ni se envían a ningún servidor: totalmente seguro para trabajos de diseño propietarios y proyectos de clientes.
• Gratis y Sin Registro: usa el convertidor de HEX a color con nombre tantas veces como quieras, sin registro, sin suscripción y sin límites de uso. La herramienta es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.

• Desarrollo CSS con Colores con Nombre: sustituye códigos HEX difíciles de recordar por colores con nombre CSS semánticos. El convertidor te dice exactamente qué nombre de color CSS coincide con tu token de diseño, haciendo tus hojas de estilo más legibles y mantenibles.
• Documentación de Sistemas de Diseño: al documentar un sistema de diseño, usa el convertidor para dar a cada color un nombre CSS legible. Los colores con nombre son más fáciles de comunicar entre equipos y pueden usarse directamente en declaraciones CSS.
• Arte Digital e Ilustración: artistas e ilustradores usan el convertidor de HEX a color con nombre para encontrar el nombre CSS estándar de colores tomados de imágenes de referencia. Esto ayuda a mantener la consistencia de color entre distintas herramientas y plataformas.
• Accesibilidad y Comunicación de Colores: los especialistas en accesibilidad usan colores con nombre para describir elementos de interfaz con claridad en informes y documentación. El convertidor te da el nombre CSS estándar de cualquier color, haciendo la comunicación con las partes interesadas más precisa.
• Educación y Aprendizaje de CSS: quienes aprenden CSS usan el convertidor para entender qué colores del mundo real representan los valores con nombre de CSS. Introduce cualquier código HEX y descubre con qué color con nombre coincide: una forma práctica de aprender la paleta de colores con nombre de CSS.
• Redacción Técnica y Tutoriales: los redactores técnicos usan el convertidor para encontrar el nombre de color CSS correcto al escribir documentación. Usar colores con nombre en tutoriales hace que los ejemplos de código sean más claros y fáciles de entender para los lectores.

La conversión de HEX a color con nombre toma un código de color hexadecimal (como #FF6B6B) y encuentra el color con nombre CSS más cercano entre los 148 colores definidos en la especificación CSS Color Module Level 4. En lugar de mostrar solo el valor hex, obtienes un nombre legible como «Coral» o «Tomato» junto con un porcentaje de similitud que indica lo cerca que está la coincidencia. La herramienta calcula la distancia euclidiana entre tu color de entrada y cada color con nombre en el espacio RGB, los ordena de más cercano a más lejano y muestra las 6 mejores coincidencias con sus puntuaciones de similitud.

1. Introduce tu Color HEX: escribe o pega un valor HEX (por ejemplo, #FF6B6B o #F6B). También puedes usar la muestra del selector de color nativo o hacer clic en cualquier color de muestra. Todo el procesamiento se ejecuta localmente en tu navegador: tus datos de color nunca salen de tu dispositivo.
2. Cálculo de Distancia: la herramienta convierte tanto tu entrada como cada uno de los 148 colores con nombre CSS a valores RGB y calcula la distancia euclidiana con la fórmula √((R₁−R₂)² + (G₁−G₂)² + (B₁−B₂)²). La distancia máxima posible en el espacio RGB es de aproximadamente 441,67, que se usa para calcular el porcentaje de similitud: (1 − distancia / 441,67) × 100.
3. Resultados Mostrados al Instante: la coincidencia más cercana se muestra primero con una insignia de similitud destacada y una franja de comparación de colores. Cada tarjeta de resultado muestra la distancia (Δ), el porcentaje de similitud con una barra de progreso codificada por colores y los valores HEX, RGB y HSL, todos copiables con un clic.

• 100 % de similitud (Δ = 0): tu color HEX coincide exactamente con uno de los 148 colores con nombre CSS. La tarjeta muestra una insignia de «Coincidencia exacta» con un borde resaltado.
• 95-99 % de similitud (Δ = 1-22): prácticamente indistinguible del color con nombre. Estas coincidencias son visualmente idénticas en la mayoría de contextos y se pueden usar indistintamente sin riesgo.
• 80-94 % de similitud (Δ = 23-88): coincidencia cercana con una diferencia perceptible menor. El color mantiene la misma familia de tono pero puede diferir ligeramente en luminosidad o saturación.
• Menos del 80 % de similitud (Δ > 88): diferencia de color notable. El color con nombre comparte características de tono similares pero presenta una variación significativa de brillo o saturación respecto a tu entrada.

Los colores con nombre de CSS son las 148 palabras clave de color definidas en la especificación CSS que pueden usarse directamente en hojas de estilo (por ejemplo, color: CornflowerBlue). Incluyen los 16 colores HTML originales más 132 colores adicionales de CSS2.1 y CSS Color Module Level 4. Representan los únicos nombres de color que funcionan de forma nativa en CSS sin ningún preprocesamiento ni conversión.

A diferencia de otros sistemas de nombres de color como X11 (usado en sistemas Unix/Linux) o Pantone (usado en impresión), los colores con nombre de CSS están garantizados para renderizarse de forma consistente en todos los navegadores modernos. Esto los convierte en la opción más segura para el desarrollo web. El convertidor de HEX a color con nombre se centra exclusivamente en estas 148 palabras clave CSS, garantizando que todas las coincidencias mostradas puedan usarse directamente en tu código CSS.