Convertidor de colores en línea gratuito — HEX, RGB, HSL, CMYK

Convierte colores instantáneamente entre los formatos HEX, RGB, HSL y CMYK. Esta herramienta gratuita de conversión de colores ofrece una previsualización en vivo y conversión bidireccional para flujos de trabajo de diseño web, impresión y diseño gráfico.

¿Qué es un convertidor de colores?

Un convertidor de colores traduce valores de color entre diferentes formatos utilizados en el diseño digital y en impresión. Los desarrolladores web utilizan HEX y RGB, los diseñadores suelen trabajar en HSL para ajustes de color intuitivos, y la producción en impresión depende de CMYK.

En lugar de calcular conversiones manualmente o abrir una herramienta de diseño, este convertidor te ofrece todos los formatos a la vez — con una previsualización en vivo para que veas exactamente con qué color estás trabajando.

Cómo usar este convertidor de colores

1. Ingresa un color — Escribe un valor HEX, o introduce números RGB, HSL o CMYK.
2. Ve todos los formatos — Cada otro formato se actualiza instantáneamente.
3. Copia lo que necesitas — Haz clic en el botón de copiar junto a cualquier formato.
4. Usa la previsualización — El cuadro de color muestra el color exacto con una etiqueta de contraste.

Características clave

Característica	Beneficio
Soporte para 4 formatos	HEX, RGB, HSL, CMYK — todos a la vez
Conversión bidireccional	Edita cualquier formato y el resto se actualiza
Previsualización en vivo	Ve el color exacto con su etiqueta HEX
Botones de copia por formato	Copia con un solo clic para cada formato
CMYK listo para impresión	Obten valores CMYK precisos para la producción en impresión

Entendiendo los formatos de color

HEX

La notación hexadecimal utiliza seis caracteres (0-9, A-F) para representar los valores de rojo, verde y azul:

• #FF0000 = rojo al 100% de intensidad
• #3B82F6 = azul-500 de Tailwind CSS

Común en CSS, HTML y herramientas de diseño. Siempre comienza con #.

RGB (Rojo, Verde, Azul)

Modelo aditivo de color donde cada canal varía de 0 a 255:

• rgb(255, 0, 0) = rojo puro
• rgb(59, 130, 246) = azul-500 de Tailwind

Utilizado en CSS (rgb() función) y en la mayoría de los contextos de programación.

HSL (Tono, Saturación, Luminosidad)

Un modelo más intuitivo para ajustar colores:

• Tono (0-360): Posición en la rueda de colores (0=rojo, 120=verde, 240=azul)
• Saturación (0-100%): Intensidad del color (0%=gris, 100%=color completo)
• Luminosidad (0-100%): Brillo (0%=negro, 50%=normal, 100%=blanco)

Utilizado en CSS (hsl() función) y preferido por diseñadores para crear paletas de colores.

CMYK (Cian, Magenta, Amarillo, Negro)

Modelo de color sustractivo utilizado en producción de impresión:

• Cada valor varía del 0% al 100%
• Representa la cobertura de tinta en el papel
• No es directamente usable en CSS (los navegadores usan RGB internamente)

Esencial para preparar diseños para impresión profesional.

Comparación de formatos de color

Formato	Caso de uso	Ejemplo	Rango
HEX	CSS web, HTML	#3B82F6	00-FF por canal
RGB	CSS web, programación	rgb(59, 130, 246)	0-255 por canal
HSL	Diseño, CSS	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%
CMYK	Producción de impresión	cmyk(76%, 47%, 0%, 4%)	0-100% por canal

Casos de uso en el mundo real

Desarrollo web

Copia valores HEX o rgb() directamente en tu CSS. HSL es excelente para generar escalas de color (por ejemplo, variar la luminosidad para estados de hover).

Sistemas de diseño

Convierte colores de marca entre formatos. Un diseñador te da HSL desde Figma — necesitas HEX para CSS. Hecho en un solo clic.

Producción en impresión

Convierte colores de pantalla a CMYK antes de enviarlos a una impresora. Tenga en cuenta que algunos colores vibrantes en RGB no se pueden reproducir perfectamente en CMYK (el "gamut" es más pequeño).

Accesibilidad

Utilice el valor de luminosidad HSL para verificar si un color cumple con los requisitos de contraste de WCAG. Los colores con luminosidad cercana al 50% tienden a tener el mayor contraste percibido.

Consejos para trabajar con colores

Consejo	Explicación
Use HSL para paletas	Fije el tono, varíe la saturación y la luminosidad para crear escalas de color armónicas.
El HEX corto funciona	#3BF es abreviatura de #33BBFF. Esta herramienta acepta ambos.
Observe el gamut de CMYK	Los azules y verdes brillantes suelen cambiar al convertirse a CMYK. Siempre imprima una muestra de colores.
CSS acepta todos los formatos	CSS moderno acepta HEX, rgb(), hsl() e incluso hwb(). Use lo que sea más legible.
Transparencia alfa	Para la transparencia, use rgba() o HEX de 8 dígitos (#3B82F680).

Preguntas frecuentes

¿Por qué mi color CMYK se ve diferente en pantalla?

Las pantallas muestran colores en RGB (aditivo), mientras que la impresión usa CMYK (sustractivo). La representación puede variar.

¿Qué significa "previsualización en vivo"?

Significa que ves el color en tiempo real mientras haces cambios, sin necesidad de recargar la página.

¿Puedo usar este convertidor en dispositivos móviles?

Sí, el convertidor es compatible con dispositivos móviles y tablets.

¿Es gratuito usar este convertidor?

Sí, el convertidor es totalmente gratuito y no requiere registro.

¿Qué hacer si no veo el color correcto?

Asegúrese de que su dispositivo tenga una calibración de color adecuada y que esté usando una conexión a internet estable.