Convertidor de Código de Color (HEX/RGB/HSL)

Convierte colores entre formatos HEX, RGB y HSL con vista previa en vivo.

Formato de entrada
#

Valores de color

HEX#3B82F6
RGBrgb(59, 130, 246)
HSLhsl(217, 91%, 60%)

Use la calculadora Convertidor de Código de Color (HEX/RGB/HSL) de arriba para calcular sus resultados. Ingrese sus valores y vea resultados instantáneos — todos los cálculos se ejecutan en su navegador.

Aviso: Esta calculadora es solo para fines informativos. Los resultados son estimaciones basadas en la información que proporciona y en los supuestos descritos en esta página.

Cómo funciona

Pasar un color entre HEX, RGB y HSL es una necesidad habitual para diseñadores, desarrolladores y artistas digitales, y este convertidor se mueve con fluidez entre los tres formatos.

La conversión se basa en algoritmos bien establecidos. HEX a RGB implica analizar los pares hexadecimales en sus equivalentes decimales para los componentes rojo, verde y azul. RGB a HSL utiliza una serie de fórmulas matemáticas para transformar los valores RGB en matiz, saturación y luminosidad.

Un error común es olvidar que la saturación y luminosidad HSL son porcentajes, no valores absolutos como RGB. Además, la entrada HEX puede tener los 6 dígitos completos (por ejemplo, #FF0000) o la forma abreviada de 3 dígitos que también admite CSS, como #F00, equivalente a #FF0000: el convertidor duplica cada dígito.

Fuente: W3C CSS Color Module Level 4 — HEX and HSL notation, HSL/sRGB conversion · Última actualización: septiembre de 2026

Preguntas frecuentes

¿Cómo se convierte HEX a RGB?
Divide el código hexadecimal de 6 dígitos en 3 pares. Convierte cada par de hexadecimal a decimal. Por ejemplo, #FF5733 se convierte en R=255 (FF), G=87 (57), B=51 (33).
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX usa un código de 6 caracteres (#RRGGBB), RGB especifica valores de rojo/verde/azul (0-255 cada uno), y HSL usa tono (0-360°), saturación (0-100%) y luminosidad (0-100%). HSL es el más intuitivo para ajustar colores.
¿Cómo se encuentra el código HEX para un color?
Usa una herramienta de selección de color o las herramientas de desarrollo del navegador (inspeccionar elemento, haz clic en la muestra de color). También puedes usar este convertidor para ingresar valores RGB o HSL y obtener el equivalente HEX al instante.