Conversor de Color: HEX, RGB, HSL, CMYK

¿Qué es Color Converter?

Color Converter es una herramienta gratuita en línea que convierte instantáneamente cualquier color entre los cinco formatos de color más comunes: HEX, RGB, HSL, HSB (HSV) y CMYK. Pega o escribe un valor de color en cualquier formato compatible y la herramienta detecta automáticamente lo que ingresaste y muestra todas las demás representaciones simultáneamente en tiempo real. Resuelve la fricción cotidiana de cambiar entre un valor HEX de Figma y una función CSS HSL, o traducir valores RGB de pantalla a porcentajes CMYK de impresión — sin copiar valores a través de una calculadora. Toda la conversión ocurre localmente en el navegador sin necesidad de servidor.

Funciones principales

• Convertir entre HEX, RGB, HSL, HSB y CMYK — los cinco formatos se muestran simultáneamente en el momento en que se ingresa un color válido. El código usa un hook useColorConversion que mantiene los objetos de estado hex, rgb, hsl, hsb y cmyk sincronizados.
• Detección automática de formato — el área de texto detecta HEX (valores que comienzan con # o que coinciden con /^[0-9a-f]{3,8}$/i), RGB (prefijo rgb) y HSL (prefijo hsl) automáticamente, mostrando un badge que dice "Detectado: HEX" (o RGB/HSL/Auto).
• Conversión en tiempo real mientras escribes — cada pulsación de tecla que produce un valor analizable activa un renderizado inmediato de los cinco formatos de salida. No se necesita ningún botón.
• Copiar cualquier formato al portapapeles — cada fila de formato tiene un botón de copia que muestra una marca verde durante 2 segundos tras una copia exitosa. Una notificación toast confirma la acción.
• Vista previa visual del color — un gran cuadro de vista previa se llena con el color actual y muestra el valor hex en texto de contraste automático (negro o blanco según la luminancia).
• Entradas numéricas para RGB, HSL, HSB y CMYK — los paneles de ajuste manual permiten afinar los canales individuales: R, G, B (0–255), H (0–360), S (0–100), L (0–100) para HSL, H (0–360), S (0–100), B (0–100) para HSB, y C, M, Y, K (0–100) para CMYK, todos limitados a rangos válidos.
• URL compartible — la herramienta usa un hook useShareableState para codificar el color actual en la URL, permitiendo enlaces directos a conversiones de colores específicos.
• Funciona offline después de cargar — sin solicitudes de red durante la conversión; la biblioteca de conversión completa está incluida en la página.

Cómo usar

Paso 1: Ingresar el color

Abre el Color Converter. La mitad izquierda de la tarjeta de entrada contiene un campo de texto. Pega cualquiera de los siguientes:

• Un valor hex: #3B82F6
• Una función RGB: rgb(59, 130, 246)
• Una función HSL: hsl(217, 91%, 60%)
• Un string hex sin prefijo: 3b82f6 (sin el #)

Tan pronto como escribas o pegues un valor reconocible, aparece un pequeño badge en la parte superior derecha del campo — por ejemplo "Detectado: HEX". La mitad derecha de la tarjeta muestra una vista previa del color en vivo que se llena inmediatamente con el color detectado.

Alternativamente, usa el selector de color nativo debajo del cuadro de vista previa. Haz clic en el cuadrado de color para abrir el selector de colores de tu navegador; seleccionar un color establece la entrada y actualiza todos los formatos simultáneamente.

Paso 2: Revisar todos los formatos

Debajo de la tarjeta de entrada, la tarjeta "Todos los formatos" lista cinco filas:

Cada fila muestra la etiqueta del formato, el valor formateado en fuente monoespaciada y un botón de ícono para copiar. Haz clic en cualquier botón de copiar para colocar ese valor específico en el portapapeles.

Paso 3: Ajuste fino con entradas numéricas

Debajo del campo de texto, la herramienta proporciona entradas numéricas directas para los cuatro modelos de color ajustables:

• RGB: Tres entradas numéricas con etiquetas R, G, B — cada una acepta valores de 0 a 255 y está limitada a rangos válidos.
• HSL: Tres entradas numéricas con etiquetas H (0–360), S (0–100), L (0–100).
• HSB: Tres entradas numéricas con etiquetas H (0–360), S (0–100), B (0–100).
• CMYK: Cuatro entradas numéricas con etiquetas C, M, Y, K — cada una acepta valores de 0 a 100.

Cambiar cualquier entrada actualiza el estado hex, que se propaga a los cinco formatos de salida al instante. Esto es útil cuando conoces un ángulo de tono objetivo, un porcentaje de saturación o un valor CMYK y necesitas el hex equivalente para CSS.

Paso 4: Copiar y usar los valores convertidos

Haz clic en el botón de copiar junto al formato que necesitas. El ícono del botón cambia de un ícono de portapapeles a una marca verde durante 2 segundos. Aparece un toast de éxito en la parte inferior de la pantalla.

La herramienta también registra un historial de conversiones en el HistoryPanel (Premium). Cuando restauras una entrada del historial, establece la entrada en el valor hex almacenado y vuelve a ejecutar todas las conversiones.

Paso 5: Compartir un color específico

La URL se actualiza automáticamente al cambiar el color (a través de useShareableState). Copia la URL del navegador para compartir un enlace directo a cualquier color específico. Los destinatarios que abran el enlace verán un toast "Cargado desde enlace compartido" y el color compartido precargado en todos los formatos.

Ejemplos prácticos

Traducir un token de diseño de Figma a CSS

Un diseñador proporciona un violeta corporativo como #8467C7. El desarrollador necesita el valor HSL para una función CSS color-mix(). Abriendo Color Converter y escribiendo #8467C7 se muestra inmediatamente hsl(261, 40%, 59%) en la fila HSL — listo para pegar.

Convertir un color de impresión a web

Una imprenta especifica un azul corporativo como cmyk(76%, 47%, 0%, 4%). La detección automática del campo de texto no reconoce la notación CMYK sin procesar, pero puedes ingresar los valores directamente usando el panel de entrada numérica CMYK: establece C en 76, M en 47, Y en 0 y K en 4. Las salidas HEX, RGB y HSL se actualizan en tiempo real, dándote los valores listos para web al instante.

Crear una paleta de modo oscuro

Un desarrollador está creando un tema oscuro y necesita cambiar un color claro a una variante más oscura. Ingresa #E2E8F0 (slate claro), nota que el HSL es hsl(214, 32%, 91%), luego reduce manualmente la entrada del canal L de 91 a 25 para obtener el equivalente oscuro. La salida HEX se actualiza a #253443, que se copia directamente.

Consejos y buenas prácticas

Escribir sin el # para una entrada más rápida. La regex de detección automática reconoce strings hex sin prefijo como 3b82f6 como formato HEX. Puedes pegar directamente desde herramientas de diseño que eliminan el hash.

Usar las entradas RGB para control preciso de canales. Si necesitas un color con un valor rojo exacto de 200, escribe directamente en la entrada R en lugar de buscar el prefijo hex correcto. El límite mín/máx te impide ingresar valores fuera de rango accidentalmente.

Guardar colores como marcadores via la URL compartible. Como el color está codificado en la URL a través de useShareableState, puedes marcar como favoritos los colores corporativos de referencia frecuente y reabrirlos al instante sin volver a ingresar valores.

El badge de detección es una verificación rápida de validez. Si el badge no aparece después de escribir, la entrada no ha sido reconocida como un color válido. Busca errores tipográficos — los errores comunes incluyen un # faltante, usar rgba con un canal alfa (actualmente no se analiza) o ingresar valores RGB basados en porcentaje.

Los cuatro modelos de color tienen entradas editables. RGB, HSL, HSB y CMYK tienen paneles de entrada numérica dedicados. Puedes comenzar desde cualquier modelo ajustando sus valores directamente, y los otros formatos se actualizan en tiempo real.

Problemas comunes y solución de problemas

Nada aparece en las filas de salida después de escribir. El texto de entrada no ha sido reconocido como un color válido. La función parseColorToHex maneja hex con #, hex sin prefijo, strings rgb() y hsl(). Si ingresaste un formato diferente (como un nombre de color CSS cornflowerblue), la detección automática cae a null y no se activa ninguna conversión. Usa un valor hex en su lugar.

Las entradas RGB aceptan valores superiores a 255. El código limita los valores a Math.min(255, Math.max(0, val)) al cambiar, por lo que si escribes 300, se ajusta a 255 tan pronto como la entrada lo procesa. Este es el comportamiento esperado.

La entrada de tono HSL se limita en 360. El campo de tono está limitado a Math.min(360, Math.max(0, val)). Ingresar 361 establece en 360; ingresar -1 establece en 0.

El botón de copiar no responde. Si navigator.clipboard.writeText falla (por ejemplo en un contexto inseguro o restringido), la herramienta recurre al método document.execCommand('copy') usando un elemento textarea temporal. Si ambos fallan, verifica que el navegador tenga permiso de portapapeles para el sitio.

El toast "Cargado desde enlace compartido" aparece inesperadamente. Este toast se muestra una vez cuando isFromUrl es verdadero, lo que significa que un color estaba codificado en el string de consulta de la URL. Si abriste una URL marcada como favorita, esto es esperado. El toast solo aparece una vez por carga de página debido al guard de referencia hasShownShareToast.

Privacidad y seguridad

Color Converter procesa todas las conversiones localmente usando matemáticas JavaScript. Ningún valor de color, texto de entrada o resultado de conversión se transmite a ningún servidor. La URL compartible codifica el color solo en la URL del navegador — nunca se envía a ningún lugar a menos que elijas compartir el enlace. La herramienta usa la Web Clipboard API para operaciones de copia, que también son completamente locales. Funciona completamente offline después de la carga inicial de la página.

Preguntas frecuentes

¿Es Color Converter gratuito?

Sí, completamente gratuito sin necesidad de cuenta. Los cinco formatos de conversión, el selector visual de colores, las entradas manuales RGB y HSL, la copia al portapapeles y las URLs compartibles están disponibles para todos los usuarios sin costo. Las funciones de Supporter como PresetsPanel e HistoryPanel requieren una activación de Ko-fi de $5 por 30 días de acceso.

¿Funciona Color Converter sin conexión?

Sí. Una vez que se ha cargado la página, toda la lógica de conversión se ejecuta completamente en JavaScript sin solicitudes externas. Puedes cerrar tu conexión de red y continuar convirtiendo colores sin interrupción.

¿Están seguros mis datos con Color Converter?

Sí. Los valores de color se procesan solo en la memoria del navegador. Nada se envía a un servidor. La URL compartible codifica el color en el lado del cliente — los servidores de Glyph Widgets nunca registran los colores específicos con los que trabajas.

¿Qué formatos soporta Color Converter?

La herramienta soporta cinco formatos: HEX (strings hex de 3 o 6 dígitos con o sin #), RGB (notación rgb(R, G, B)), HSL (notación hsl(H, S%, L%)), HSB/HSV y CMYK. Los cinco formatos tienen paneles de entrada numérica dedicados para el ajuste directo de valores.

¿Cuál es la diferencia entre HSL y HSB?

Ambos usan Tono (0–360 grados) y Saturación (0–100%), pero el tercer canal difiere. HSL usa Luminosidad, donde 50% es un color completamente saturado y 100% es siempre blanco. HSB (también llamado HSV) usa Brillo/Valor, donde 100% es la versión más pura del tono y 0% es siempre negro. Figma y la mayoría de las herramientas de diseño muestran HSB; CSS usa HSL.

¿Puedo convertir CMYK a HEX?

La detección automática en el campo de texto no analiza notación CMYK sin procesar, pero puedes usar el panel de entrada numérica CMYK para ingresar los valores de C, M, Y y K directamente. Ajustar cualquier valor CMYK actualiza todos los demás formatos en tiempo real, incluido HEX.

¿Por qué la conversión CMYK parece ligeramente diferente de mis valores de impresión?

La conversión de pantalla a impresión depende del perfil de color. La herramienta usa una fórmula matemática estándar de sRGB a CMYK sin corrección de perfil ICC. Para trabajo de producción de impresión, usa una herramienta de gestión de color que aplique los perfiles ICC correctos para tu impresora y papel.

¿Puedo ingresar valores hex abreviados de 3 dígitos como #F0F?

Sí. La función parseColorToHex detecta strings hex que coinciden con /^[0-9a-f]{3,8}$/i, lo que incluye la abreviatura de 3 dígitos. #F0F se trata como equivalente a #FF00FF.

¿Cómo comparto un color específico con un colega?

Cambia el color en la herramienta y copia la URL del navegador. El valor hex actual está codificado en el string de consulta de la URL a través de useShareableState. Cuando tu colega abra el enlace, verá el color precargado con una notificación "Cargado desde enlace compartido".

¿Color Converter soporta alpha (RGBA / HSLA)?

No en la versión actual. El analizador de entrada maneja rgb() y hsl() pero no rgba() o hsla(). Los valores del canal alfa no se conservan en la cadena de conversión. Para soporte completo de alfa, extrae los valores RGB o HSL manualmente y maneja el alfa por separado.

Herramientas relacionadas

• Color Picker — muestra colores directamente desde una imagen cargada o tu pantalla y envía el resultado al convertidor.
• Contrast Checker — verifica que dos colores convertidos cumplan los requisitos de contraste WCAG AA o AAA.
• Próximamente: Palette Generator — genera paletas de colores armoniosas a partir de un color base y convierte cada muestra a tu formato preferido.

Prueba Color Converter ahora: Glyph Widgets Color Converter