Cómo convertir un color HEX a RGB y HSL

Para convertir un código hexadecimal a otros modelos cromáticos en diseño web, introduce un valor HEX de tres o seis dígitos, selecciona el formato de salida deseado y obtén al instante las equivalencias en HEX, RGB y HSL junto con el cálculo de brillo ponderado.

Formatos compatibles y requisitos de entrada

Al trabajar con hojas de estilo CSS o interfaces digitales, es habitual necesitar la equivalencia exacta de un color en distintos formatos. La herramienta en línea permite transformar códigos hexadecimales estándar en representaciones RGB y HSL de forma inmediata.

La entrada admite valores de tres o seis caracteres hexadecimales válidos (del 0 al 9 y de la «a» a la «f»). El símbolo de almohadilla inicial es opcional, y los espacios en blanco situados en los extremos se eliminan de forma automática. Cuando introduces una notación abreviada de tres dígitos, el sistema expande cada carácter por duplicado para formar la estructura completa de seis dígitos antes de procesar el cálculo.

Instrucciones para realizar la conversión paso a paso

El procedimiento para transformar un color se completa en pocos pasos mediante el Selector y conversor de color HEX:

1. Escribe o pega el código hexadecimal en el campo de texto principal, con o sin el signo almohadilla inicial (por ejemplo, #3498db o 3ab).
2. Escoge el formato de salida en el menú desplegable. Puedes mantener la opción para mostrar todos los formatos o limitar el resultado a una codificación concreta entre Hexadecimal, RGB o HSL.
3. Pulsa el botón de ejecución para procesar el código y generar los valores numéricos correspondientes.
4. Copia los canales RGB enteros, los valores porcentuales de HSL o la cadena HEX resultante directamente en tu código o archivo de diseño.

Si necesitas explorar combinaciones complementarias o tonos alternativos para tu interfaz, también puedes apoyarte en el Selector de color HEX.

Interpretación del resultado y cálculo de brillo

El conversor genera representaciones claras y listas para usar en proyectos web:

• HEX: Devuelve el código con almohadilla y caracteres en minúsculas.
• RGB: Muestra los canales rojo, verde y azul como números enteros en un rango de 0 a 255.
• HSL: Presenta el tono en grados junto con la saturación y la luminosidad redondeadas a números enteros porcentuales.
• Brillo ponderado: Ofrece un índice numérico en una escala de 0 a 255 calculado mediante la ponderación de los canales rojo, verde y azul.

Ejemplo práctico de conversión

Imagina que estás maquetando un componente web y dispones del color azul #3498db. Al introducir este código en la herramienta con la opción de visualización completa, obtendrás:

• Código HEX normalizado: #3498db.
• Canales RGB: rojo 52, verde 152 y azul 219 (formato rgb(52, 152, 219)).
• Valores HSL: tono 204°, saturación 70% y luminosidad 53% (formato hsl(204, 70%, 53%)).
• Brillo ponderado: valor calculado de 129,691 sobre 255.

Limitaciones del sistema

• No admite códigos hexadecimales con canal alfa de 4 u 8 caracteres.
• No procesa entradas en formato funcional como rgb() o hsl(), ni nombres de colores CSS como blue o tomato.
• El brillo calculado es una referencia numérica proporcional y no sustituye a una auditoría completa de contraste de accesibilidad web (WCAG).

Errores frecuentes al introducir colores

• Incluir caracteres no hexadecimales: Escribir letras fuera del rango a-f (como la letra «g» o «z») produce un aviso de error de color no válido.
• Añadir transparencias en la entrada: Pegar códigos de ocho cifras con canal alfa impide que el sistema reconozca la estructura de color.

Preguntas frecuentes

¿Es obligatorio incluir el signo almohadilla en el código?

No. Puedes escribir el código con o sin el carácter inicial #. La herramienta lo normaliza automáticamente antes de calcular las conversiones.

¿Qué ocurre si introduzco un código corto de tres dígitos?

El sistema expande la notación corta duplicando cada dígito. Por ejemplo, la entrada #3ab se transforma internamente en #33aabb antes de calcular los valores RGB y HSL.

¿La herramienta convierte nombres de colores en inglés?

No. La herramienta solo procesa valores numéricos hexadecimales válidos de 3 o 6 dígitos.