Cómo convertir colores entre HEX, RGB y HSL
Respuesta rápida
Para convertir un color: abra el Convertidor de colores, ingrese un color en cualquier formato (HEX, RGB, HSL) y la herramienta mostrará el equivalente en todos los demás formatos al instante. Toda la conversión ocurre localmente en su navegador: no se cargan datos.
Introducción
Los colores se pueden representar en múltiples formatos: HEX (#ff6600), RGB (rgb(255, 102, 0)), HSL (hsl(24, 100%, 50%)) y otros. Diferentes herramientas y contextos usan diferentes formatos: CSS a menudo usa HEX o RGB, las herramientas de diseño pueden usar HSL y APIs puede usar cualquiera. La conversión entre formatos le permite utilizar un color definido en un sistema en un contexto que requiere otro. Esta guía le muestra cómo convertir colores en su navegador.
Paso a paso
-
Abra la herramienta Convertidor de colores
Vaya a la página de la herramienta Convertidor de color. La herramienta admite los formatos HEX, RGB, HSL, HSV y CMYK.
-
Introduce tu color
Escriba o pegue un valor de color en cualquier formato compatible. Ejemplos: '#ff6600', 'rgb(255, 102, 0)', 'hsl(24, 100%, 50%)'. La herramienta detecta automáticamente el formato de entrada.
-
Revisar todos los formatos equivalentes
La herramienta muestra el color en todos los formatos simultáneamente: HEX, RGB, HSL, HSV y CMYK. También muestra una muestra de vista previa de color para que pueda verificar que la conversión sea correcta.
-
Copia el formato que necesitas
Haga clic en el botón Copiar junto a cualquier formato para copiar ese valor a su portapapeles. Úselo en su CSS, herramienta de diseño o aplicación.
-
Ajustar el color (opcional)
Algunas herramientas te permiten ajustar el color con controles deslizantes (para HSL: tono, saturación, luminosidad) y ver todos los formatos actualizados en tiempo real. Esto es útil para encontrar colores o tonos relacionados.
Ejemplos
HEX a RGB y HSL
Aporte: #ff6600
Producción: RGB: rgb(255, 102, 0)
HSL: hsl(24, 100%, 50%)
RGB a HEX
Aporte: RGB(0, 128, 255)
Producción: HEX: #0080ff
HSL: hsl(210, 100%, 50%)
HSL a HEX
Aporte: hsl(120, 100%, 50%)
Producción: HEX: #00ff00
RGB: rgb(0, 255, 0)
Problemas comunes
- HEX con vs sin #: algunas herramientas requieren el prefijo #, otras no. Nuestro convertidor acepta ambos.
- HEX de 3 dígitos frente a 6 dígitos: #f60 es la abreviatura de #ff6600. Ambos son válidos; el convertidor se normaliza a 6 dígitos.
- HSL rango de tono: el tono es de 0 a 360 grados (un círculo). 0 y 360 son ambos rojos. Los valores superiores a 360 se ajustan.
- Las diferencias de espacio de color: HEX, RGB y HSL son todas sRGB. CMYK es un espacio de color diferente (impresión) y la conversión es aproximada.
Consejos
- Utilice HSL para crear variaciones de color; ajustar el tono, la saturación o la luminosidad es más intuitivo que RGB.
- Utilice HEX para CSS: es el formato más compacto y ampliamente admitido en hojas de estilo.
- Utilice RGB cuando necesite establecer la transparencia alfa: rgb(255, 102, 0, 0,5) para una opacidad del 50 % (o utilice HEX de 8 dígitos: #ff660080).
- Utilice nuestro Convertidor de colores para una conversión privada e instantánea entre todos los formatos de color.