DevTools

Los colores en el desarrollo web se pueden representar en varios formatos, cada uno con sus ventajas específicas. HEX es el formato más compacto y utilizado, ideal para escribir colores rápidamente en CSS. RGB es más intuitivo para entender la composición de luz de un color y es necesario cuando se trabaja con opacidad (rgba). HSL es considerado el formato más natural para los humanos porque separa el color en tres componentes comprensibles: tono (el color en sí), saturación (intensidad del color) y luminosidad (brillo). Los diseñadores suelen preferir HSL para ajustar colores porque es más fácil crear variaciones de un mismo tono. Esta herramienta convierte instantáneamente entre HEX, RGB y HSL. Incluye un preview visual en tiempo real que muestra el color ingresado, y te permite copiar cualquier formato con un solo clic. Es indispensable para diseñadores y desarrolladores frontend que necesitan convertir colores entre formatos rápidamente mientras trabajan en CSS, mockups o prototipos. Todo el procesamiento es local.

¿Cómo usar?

1. Ingresa un color en cualquiera de los formatos soportados: HEX (ej: #6c5ce7), RGB (ej: rgb(108,92,231)) o HSL (ej: hsl(252,73%,63%)).
2. Haz clic en 'Ejecutar' para convertir automáticamente a los otros dos formatos.
3. Observa el preview visual en la barra superior que muestra el color ingresado en tiempo real.
4. Revisa los valores convertidos en los tres formatos: HEX, RGB y HSL.
5. Copia el formato que necesites para tu proyecto haciendo clic sobre el valor o seleccionándolo.

Casos de Uso Reales

• Traducir colores de Figma a CSS. Los diseñadores trabajan en HEX, pero muchas veces necesitas el equivalente rgb() para agregar canal alfa: rgba(108, 92, 231, 0.5).
• Crear variantes con HSL. HSL facilita generar paletas: mantén el matiz y ajusta luminosidad para hover states, bordes y fondos del mismo color.
• Construir temas claro/oscuro. Convierte tus colores base a HSL y deriva superficies coherentes modificando solo la luminosidad.
• Documentar design systems. Unifica tokens de color mostrando HEX, RGB y HSL juntos para que todo el equipo use el mismo lenguaje visual.
• Traducir colores entre diseño y código. El diseñador entrega #6C5CE7 en Figma, pero tu framework pide RGB para generar sombras con transparencia, o HSL para crear variantes más claras/oscuras programáticamente. Convertir entre formatos mantiene la paleta exacta en todos los contextos.
• Crear escalas de color accesibles. Con HSL puedes variar solo la luminosidad manteniendo el tono: perfecto para estados hover, disabled y bordes de un mismo color base. Verifica luego el contraste WCAG ajustando lightness hasta alcanzar 4.5:1.

Ejemplos Prácticos

HEX a RGB

#6c5ce7
→ rgb(108, 92, 231)

HEX a HSL

#6c5ce7
→ hsl(247, 74%, 63%) — subiendo la luminosidad obtienes lavandas más claras del mismo matiz

HEX a RGB/HSL

#6C5CE7
→ rgb(108, 92, 231) — hsl(247, 75%, 63%)

RGBA con transparencia

rgb(108, 92, 231) + alpha 0.4
→ rgba(108, 92, 231, 0.4)

Preguntas Frecuentes