Conversor de RGB a Hex: Códigos de Color para Diseño CSS con Conversión a HSL en Vivo

Qué es y para quién

El conversor de RGB a Hex traduce el mismo color entre los tres formatos que se usan en diseño y desarrollo web: RGB (tres números de 0 a 255), hexadecimal (como #1A2B3C, el más común en CSS) y HSL (tono, saturación y luminosidad, muy cómodo para crear variantes de un color).

Lo usan diseñadores, maquetadores, desarrolladores front-end y cualquiera que prepare una paleta para una web, una presentación o una identidad sencilla.

Cómo se usa

Escribe en el grupo que tengas: si cambias los números RGB, se actualizan el hex y el HSL; si escribes un código hexadecimal (vale también el corto de 3 dígitos, como #F00), se rellenan los demás; y si ajustas el HSL, obtienes el RGB equivalente. La franja de color muestra el resultado en todo momento y el panel final trae el color en los tres formatos más dos propiedades CSS listas para pegar. Si un valor no es válido — un número fuera de rango o un hex con caracteres raros — la herramienta te lo dice en lugar de mostrar un color equivocado.

Ejemplo resuelto

El color de partida de la herramienta es el RGB (26, 43, 60). Al convertirlo se obtiene:

HEX: #1A2B3C — porque 26 en hexadecimal es 1A, 43 es 2B y 60 es 3C.
HSL: hsl(210, 40%, 17%) — un azul grisáceo oscuro.
CSS: color: #1A2B3C;

Y al revés: si escribes el atajo #F00, la herramienta lo expande a #FF0000 y te devuelve el RGB (255, 0, 0) y el HSL (0, 100%, 50%), el rojo puro.

Casos de uso

• Pasar de Figma o Photoshop a CSS: la maqueta da el color en RGB y tu código necesita el hex.
• Crear variantes: con el HSL, baja la luminosidad 10 puntos y tienes el tono para el estado hover del botón.
• Unificar una paleta: convierte todos los colores del proyecto al mismo formato para documentarlos.
• Comprobar un color heredado: pegas el hex de un CSS antiguo y ves al instante qué color es.

Limitaciones y consejos

El conversor trabaja en el espacio de color sRGB, el estándar de la web. No convierte a CMYK ni a Pantone, que son sistemas de impresión con gamas distintas: un color de pantalla puede no tener equivalente exacto en papel. Los valores se redondean a enteros, así que una doble conversión RGB → HSL → RGB puede diferir en una unidad en algún canal, algo inapreciable a simple vista. Tampoco gestiona transparencia (canal alfa): si necesitas RGBA o HEX con alfa, tendrás que añadir ese cuarto valor a mano.

Preguntas frecuentes

¿Qué significan las letras de un código hex como #1A2B3C?

Son tres pares en hexadecimal: 1A para el rojo (26), 2B para el verde (43) y 3C para el azul (60). Cada par va de 00 (nada) a FF (máximo, 255).

¿Para qué sirve el formato corto de 3 dígitos?

Es un atajo CSS: cada dígito se duplica, así #F00 equivale a #FF0000. Solo funciona cuando los dos dígitos de cada par son iguales, como #333 o #ABC.

¿Por qué existe HSL si ya tengo RGB?

Porque es más intuitivo para ajustar: el tono elige el color, la saturación su intensidad y la luminosidad lo claro u oscuro que es. Crear un hover o una versión desaturada es cuestión de mover un número.

¿El color se verá igual en todas las pantallas?

El código será el mismo, pero cada monitor muestra con ligeras diferencias según su calibración y gama. Para trabajo crítico de marca se usan perfiles de color y pruebas físicas.