Convertidor de HEX a RGBA: rgb() y rgba() listos para pegar en tu CSS

Cómo funciona

R = HEX[0:2] en base 16 · G = HEX[2:4] en base 16 · B = HEX[4:6] en base 16 (cada canal va de 0 a 255) · alfa = opacidad % ÷ 100

Un color hexadecimal guarda tres canales de 8 bits en seis dígitos: el primer par es el rojo, el segundo el verde y el tercero el azul, y cada uno va de 00 a FF (de 0 a 255 en decimal). El formato corto de tres dígitos, como #39f, se expande duplicando cada dígito (#3399ff). Pasar a rgb() consiste simplemente en leer cada par como un número en base 16, que es justo lo que hace el navegador por dentro: las dos notaciones describen exactamente el mismo color. Para la transparencia, rgba() añade un cuarto valor entre 0 y 1 que sale de dividir la opacidad entre 100.

Ejemplo resuelto

Luis quiere usar el azul #3498db con 60% de opacidad en el fondo de un botón. Separa el código en 34, 98 y db: 34 en hexadecimal es 3 × 16 + 4 = 52, 98 es 9 × 16 + 8 = 152 y db es 13 × 16 + 11 = 219. El color queda como rgb(52, 152, 219) y, con 60% de opacidad, como rgba(52, 152, 219, 0.60).

Fuentes: CSS Color Module — sRGB

Preguntas frecuentes