Convierte HEX y RGBA sin perder la transparencia

Si un color translúcido se vuelve sólido al copiarlo, revisa qué salida copiaste. Un color HEX de seis dígitos contiene rojo, verde y azul; no tiene canal alfa. En el convertidor de color, usa HEX · con alfa, RGBA, HSLA o CSS moderno cuando quieras conservar la transparencia.

Prueba rgba(255, 136, 0, 0.5) en Color a convertir. La vista previa muestra el mismo naranja sobre un tablero de ajedrez, blanco y un fondo oscuro. Las salidas sólidas y translúcidas están juntas, así que la elección importa.

Copia la salida que conserva el alfa

Para esa entrada, la herramienta produce:

/* Opaque: alpha is omitted */
#FF8800
rgb(255, 136, 0)

/* Keeps the decimal alpha */
rgba(255, 136, 0, 0.5)
rgb(255 136 0 / 50%)

/* Alpha rounded to one byte */
#FF880080

Usa el botón de copiar junto al formato que necesites. Copiar variables CSS proporciona dos variables: --color es opaca y --color-alpha conserva la transparencia en sintaxis RGB moderna. Elegir la primera variable para una superposición la hará sólida, aunque la segunda variable esté presente en el mismo fragmento.

Puedes descargar los ejemplos CSS y probarlos en tu propia hoja de estilos. La notación no elige tu elemento ni tu propiedad CSS por ti.

Por qué 50% se convierte en aproximadamente 50.2% en HEX

CSS usa los dos últimos dígitos de un color HEX de ocho dígitos para el alfa. 00 es completamente transparente y FF es completamente opaco; la referencia HEX de MDN documenta el orden y la sintaxis abreviada.

Hay 256 posibles valores de byte alfa. A mitad de camino entre 0 y 255 está 127.5, así que este convertidor redondea 50% a 128, escrito como 80. Leer ese byte de vuelta da 128 ÷ 255, o aproximadamente 50.1961%.

Pega #FF880080 de nuevo en la entrada. La herramienta muestra rgba(255, 136, 0, 0.501961). Ese pequeño cambio es cuantización, no un segundo ajuste de opacidad. Conserva la forma decimal de alfa cuando necesites retener exactamente 0.5; los valores decimales mostrados pueden redondearse para otras entradas.

HEX corto puede ocultar una diferencia mayor

Estas entradas son fáciles de confundir:

Cada dígito en HEX de cuatro dígitos se duplica. El último 8 se convierte en 88, no en 80, así que la forma corta anterior no es una abreviatura de 50%. Los resultados de conversión incluyen las tres entradas y el ejemplo naranja.

Revisa el fondo antes de publicar

Valores de color coincidentes no garantizan la misma apariencia en cada superficie. Las vistas previas en blanco y oscuro del convertidor te ayudan a detectar que una superposición depende de lo que hay detrás. Para texto, verifica también el par texto/fondo real; nuestra guía de contraste explica esa comprobación por separado.

Este convertidor maneja las entradas HEX, RGB, HSL y HSV listadas. No resuelve variables CSS, colores con nombre distintos de transparent, ni espacios de color de gama amplia. Su salida CMYK es una aproximación sin perfil de impresión, y la notación HSV/CMYK no es un valor CSS para pegar en una hoja de estilos.

Comprobamos estos ejemplos con la herramienta el 21 de octubre de 2026. El registro de resultados conserva los canales analizados y las salidas formateadas; no es una prueba de calibración de pantalla ni de color de impresión.