Conversor de Colores HEX, RGB, HSL, HSV y CMYK Online

Convierte colores entre HEX, RGB, HSL, HSV, CMYK y otros formatos, ve vista previa en vivo, copia código CSS y compara contraste entre colores.

Usa la herramienta

Vista previa

#7c3aed

Tailwind: violet-600

Formatos

HEX#7c3aed
HEX8#7c3aedff
RGBrgb(124, 58, 237)
RGBArgba(124, 58, 237, 1)
HSLhsl(262, 83%, 58%)
HSLAhsla(262, 83%, 58%, 1)
HSVhsv(262, 76%, 93%)
CMYKcmyk(48%, 76%, 0%, 7%)

Contraste

5.7:1

Relación de contraste

WCAG AA
Texto de ejemplo

Escala de tonos

Paletas

Complementario

Análogos

Triádica

Favoritos

Sin favoritos

🔒 Procesamiento 100% local. Ningún dato se envía al servidor.

Extraer colores de imagen →

Guía rápida y contexto de uso

Conversor de colores con vista previa y múltiples formatos

Esta herramienta convierte colores automáticamente entre los formatos más usados en CSS, diseño, frontend y branding. Solo ingresa un color en cualquier formato y todos los equivalentes aparecen al instante.

Además de la conversión, puedes comparar contraste entre colores, generar escalas de tonalidad estilo Tailwind, encontrar colores complementarios, análogos y triádicos, y copiar el código CSS listo para usar.

Formatos soportados y cuándo usar cada uno

HEX es el formato más común en CSS y diseño. RGB es nativo de los monitores y útil para manipulación programática. HSL facilita ajustes intuitivos de tono, saturación y luminosidad. HSV se usa en software de edición como Photoshop. CMYK está orientado a impresión.

La herramienta convierte entre todos estos formatos y también muestra el nombre CSS más cercano y la clase Tailwind aproximada cuando está disponible.

  • HEX: #7c3aed — formato estándar en CSS y herramientas de diseño.
  • RGB: rgb(124, 58, 237) — modelo nativo de pantallas digitales.
  • HSL: hsl(262, 83%, 58%) — ideal para ajustar tono y saturación.
  • HSV: hsv(262, 75%, 93%) — usado en software de edición de imagen.
  • CMYK: cmyk(47%, 75%, 0%, 7%) — aproximación para impresión.

Contraste y accesibilidad

La sección de contraste permite verificar si la combinación de color de texto con color de fondo cumple criterios de legibilidad. El cálculo sigue la fórmula de luminancia relativa usada en las directrices WCAG.

La herramienta sugiere automáticamente si debes usar texto claro u oscuro sobre el color elegido, facilitando decisiones de UI y accesibilidad.

Privacidad y procesamiento local

Toda la conversión ocurre localmente en el navegador. Ningún color, dato o imagen se envía al servidor. Puedes usar la herramienta offline después de cargar la página.

Preguntas frecuentes

¿Qué es un color HEX?

HEX es una representación hexadecimal de color usada en CSS y diseño. Comienza con # seguido de 6 caracteres (o 3 abreviados). Ejemplo: #7c3aed representa un púrpura vibrante.

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

RGB define color por rojo, verde y azul (modelo de pantalla). HSL define por tono, saturación y luminosidad, siendo más intuitivo para ajustes visuales.

¿Puedo copiar el color en CSS?

Sí. Cada formato tiene un botón de copiar individual. También puedes copiar como variable CSS o copiar todos los formatos a la vez.

¿Funciona en el celular?

Sí. La interfaz es totalmente responsiva y funciona en cualquier dispositivo con navegador moderno.

¿Se envía el color a algún servidor?

No. Todo el procesamiento es local en el navegador. Ningún dato sale de tu dispositivo.

¿El CMYK generado es exacto?

No. La conversión de RGB a CMYK es una aproximación matemática. Para resultados exactos de impresión, consulta el perfil ICC del equipo.

¿Cómo elegir un color de texto con buen contraste?

Usa la sección de contraste. Calcula la relación de contraste e indica si la combinación cumple los criterios WCAG de legibilidad.

Enlaces útiles para continuar tareas parecidas sin empezar de cero.

Privacidad y procesamiento local

Las herramientas de esta página se ejecutan en el navegador y no envían automáticamente el contenido ingresado a un backend. Esto mejora privacidad y reduce latencia.

Conversor HEX, RGB, HSL Online | Convertir Colores CSS | Tools Lucasqc