Conversor de Color
Tendencia 🔥Convertir colores entre HEX, RGB, HSL
Cómo usar Conversor de Color
- 1Elige un color con el selector de color o escribe un valor en cualquier formato
- 2Todos los demás formatos se actualizan instantáneamente
- 3Haz clic en Copiar junto a cualquier formato
Acerca de Conversor de Color
El conversor de colores convierte instantáneamente colores entre todos los formatos CSS comunes — HEX, RGB, RGBA, HSL y HSLA. Introduce un valor en cualquier formato admitido y todas las demás representaciones se actualizan al instante, junto con una vista previa visual del color.
Los diseñadores y desarrolladores front-end necesitan regularmente traducir entre formatos de color: las herramientas de diseño exportan HEX, las propiedades CSS prefieren RGBA para transparencia, y HSL es ideal para manipulación programática de colores. Esta herramienta elimina el cálculo manual y suprime una fuente común de errores de conversión.
Toda la conversión se ejecuta completamente en tu navegador sin necesidad de servidor.
Características principales de Conversor de Color
- Convertir instantáneamente entre HEX, RGB, RGBA, HSL y HSLA
- Introducir cualquier formato y todos los demás se actualizan simultáneamente
- La muestra de vista previa del color se actualiza en tiempo real
- Selector de color del navegador para selección interactiva de colores
- Admite formatos HEX de 3 dígitos (#RGB) y 6 dígitos (#RRGGBB)
- Maneja canal alfa/transparencia en RGBA y HSLA
- Copia con un clic para cada formato de color
- Funciona completamente en el navegador — sin solicitudes al servidor
Formatos compatibles
Formatos de entrada
Formatos de salida
Introduce un valor en cualquier formato y todos los demás formatos se actualizan instantáneamente. Los colores CSS con nombre (como "cornflowerblue") no se admiten actualmente como entrada.
Ejemplos
Convertir un color HEX de Figma a HSL para CSS
Traducir un valor HEX de herramienta de diseño a HSL para uso en propiedades personalizadas CSS.
Entrada
#3B82F6
Salida
RGB: rgb(59, 130, 246) | HSL: hsl(217, 91%, 60%) | HSLA: hsla(217, 91%, 60%, 1)
Añadir transparencia a un color RGB
Obtener el equivalente RGBA de un color sólido con 50% de opacidad para una superposición semitransparente.
Entrada
rgb(0, 0, 0) with alpha 0.5
Salida
RGBA: rgba(0, 0, 0, 0.5) | HEX con alfa: #00000080
Casos de uso comunes
- Traducir colores HEX de herramientas de diseño (Figma, Sketch) a valores CSS RGB o HSL
- Convertir colores sólidos a RGBA para superposiciones semitransparentes
- Usar valores HSL para aclarar y oscurecer programáticamente en CSS
- Conectar formatos de color entre código front-end y APIs back-end
- Verificar que diferentes representaciones de formato de un color son equivalentes
- Verificar rápidamente los valores RGB de un color HEX en una especificación de diseño
Solución de problemas
El valor HEX produce un color diferente al esperado
Solución
Los valores HEX deben ser exactamente 3 o 6 dígitos hexadecimales después del #. #FF0 (3 dígitos) y #FF0000 (6 dígitos) son ambos rojo válido.
El valor de tono HSL está fuera de rango
Solución
El tono HSL es un valor de 0 a 360 grados. La saturación y la luminosidad son porcentajes (0-100%).
El valor alfa en RGBA/HSLA no funciona
Solución
El alfa es un valor de 0 (completamente transparente) a 1 (completamente opaco). Usa un decimal entre 0 y 1, no un porcentaje.
Preguntas frecuentes
¿Qué formatos de color están admitidos?
HEX (#RRGGBB y #RGB), RGB, RGBA, HSL y HSLA. Introduce cualquier formato y todos los demás se calculan instantáneamente.
¿Cuál es la diferencia entre RGB y HSL?
RGB define los colores como intensidades de luz roja, verde y azul. HSL define los colores por matiz (0-360°), saturación (0-100%) y luminosidad (0-100%).
¿Cuándo debería usar RGBA en lugar de HEX?
Usa RGBA cuando necesites transparencia (canal alfa). RGBA es el formato más universalmente compatible para colores transparentes en CSS.
¿Qué representa el valor alfa en RGBA?
El alfa representa la opacidad: 0 es completamente transparente, 1 es completamente opaco. Valores como 0.5 dan un 50% de transparencia.
¿Puedo convertir colores CSS con nombre como 'cornflowerblue'?
Los colores CSS con nombre no están admitidos actualmente como entrada. Encuentra el valor HEX en una referencia CSS e introdúcelo para convertir.
¿Hay diferencia entre la abreviatura HEX (#RGB) y el HEX completo (#RRGGBB)?
#RGB es abreviatura donde cada dígito se duplica. #F80 equivale a #FF8800. La abreviatura solo es válida cuando ambos dígitos de cada par son idénticos.
¿Se envían mis datos a un servidor?
No. Todas las conversiones se realizan localmente en tu navegador usando matemáticas JavaScript.
¿Puedo usarlo para encontrar la luminosidad HSL de un color?
Sí. Introduce el valor HEX o RGB y la salida HSL muestra el porcentaje de luminosidad.