Saltar al contenido principal
ToolsByUs

Convertir HEX a RGB

HEX a RGB descompone un color hexadecimal en sus tres canales decimales. Cada par de dígitos hex es un canal escrito en base 16, así que #FF8800 es rgb(255 136 0). Un hex de cuatro u ocho dígitos lleva un cuarto par para el alfa, que sale como un valor 0–1 en rgba(). La conversión es exacta en ambas direcciones — no se pierde ningún color, porque ambas notaciones describen los mismos tres bytes.

Solo local
Entrada HEX

Introduce un color a la izquierda. Se aceptan valores hexadecimales con o sin almohadilla, rgb(), hsl(), oklch() y nombres de color CSS.

¿Cómo funciona Convertir HEX a RGB?

Un color hexadecimal son tres bytes escritos en base 16. Cada byte es un canal — rojo, verde, azul — y contiene un valor de 0 a 255, que son exactamente dos dígitos hex, porque 16² es 256. Esa es toda la conversión: leer dos caracteres e interpretarlos en base 16.

Leer un dígito hex

Los dígitos van de 0–9 y luego a–f, donde a es 10 y f es 15. El dígito de la izquierda indica cuántos dieciseis hay y el de la derecha es el resto, así que 88 es 8×16 + 8 = 136 y ff es 15×16 + 15 = 255. Las mayúsculas y minúsculas no importan: #FF8800 y #ff8800 son el mismo color, y CSS nunca los ha distinguido.

El hex de tres dígitos, y por qué no es un redondeo

#f80 es la forma corta de #ff8800 — cada dígito se duplica, no se rellena con un cero. Eso importa: duplicar lleva f a ff = 255, el máximo verdadero, mientras que rellenar daría f0 = 240 y cada color en forma corta saldría ligeramente oscuro. La forma corta solo puede expresar los 4,096 colores cuyos pares de canales resultan ser duplicados, por lo que sobrevive para valores rápidos como #fff y desaparece de cualquier cosa diseñada.

El cuarto par es el alfa

CSS Color 4 añadió el hex de 4 y 8 dígitos, donde el último par es la opacidad en la misma escala 0–255. #ff880080 es rgb(255 136 0 / 0.5), porque 0x80 es 128, y 128/255 es 0.502. La ligera imprecisión es inherente: el alfa en CSS es una fracción y el hex solo puede almacenar 256 pasos de ella, así que un valor escrito como 0.5 en rgba() hace el viaje de ida y vuelta por el hex como 0.502.

Qué sintaxis escribir

El CSS moderno separa los canales con espacios y el alfa con una barra — rgb(255 136 0 / 50%) —, y rgb() ahora acepta el alfa directamente, así que rgba() es un alias heredado que se mantiene por compatibilidad. La forma con comas sigue funcionando en todos los navegadores y seguirá haciéndolo; no hay nada marcado como obsoleto y no hay razón para reescribir una hoja de estilos por esto. Aquí se producen ambas formas para que pegues la que tu base de código ya usa.

Un color hexadecimal

#ff8800

Sus canales RGB

rgb(255 136 0)

ff → 255   (15 × 16 + 15)
88 → 136   (8 × 16 + 8)
00 → 0     (0 × 16 + 0)

¿Qué opciones y casos límite admite Convertir HEX a RGB?

Referencia técnica y opciones
ParámetroTipoValor predeterminadoComportamiento y casos límite
#rgb3 dígitosabreviaturaCada dígito se duplica: #f80 es #ff8800. Solo se pueden representar 4,096 colores de esta forma.
#rgba4 dígitosabreviaturaEl mismo duplicado, con un cuarto dígito para el alfa. #f808 es #ff880088.
#rrggbb6 dígitosestándarUn byte por canal, 0–255 cada uno. 16.7 millones de colores.
#rrggbbaa8 dígitosCSS Color 4El alfa como un cuarto byte. Compatible en todas partes actualmente; en navegadores muy antiguos recurre a opaco en lugar de ser ignorado.
Mayúsculas—ignorado#FF8800 y #ff8800 son idénticos. La convención común es usar minúsculas.
rgb(r g b)modernoespaciosLa sintaxis actual. El alfa va después de una barra: rgb(255 136 0 / 50%).
rgba(r,g,b,a)antiguocomasSigue siendo válido en todas partes y no está obsoleto. rgb() y rgba() son ahora la misma función.
Porcentajes0–100%permitidorgb(100% 53.3% 0%) es el mismo color. Los porcentajes se resuelven en función de 255, no de 100.

Preguntas frecuentes

¿Cómo convierto de hex a RGB a mano?

Separa los seis dígitos en tres pares y lee cada par como base 16: el dígito izquierdo indica cuántos dieciseis hay y el derecho es el resto. Así, 88 es 8×16 + 8 = 136. Las letras continúan la cuenta — a es 10, b es 11, hasta f que es 15 —, así que ff es 15×16 + 15 = 255. Tres pares, tres números, y esa es toda la conversión.

¿Es #f80 lo mismo que #ff8800?

Sí. El hex de tres dígitos duplica cada dígito en lugar de rellenarlo con un cero, así que #f80 se expande a #ff8800. El duplicado es lo que permite que #fff signifique blanco puro; si rellenara en su lugar, #fff sería #f0f0f0 y cada forma corta sería ligeramente oscura.

¿Cómo funciona el alfa en un hex de 8 dígitos?

Los últimos dos dígitos son la opacidad en la misma escala 0–255 que los canales de color, así que #ff880080 es 0x80 = 128, que es un alfa de 128/255 = 0.502. Como el hex solo tiene 256 pasos, un alfa escrito como 0.5 en rgba() vuelve como 0.502 a través del hex. Esa diferencia es invisible en pantalla y aparecerá si comparas cadenas.

¿Debo usar rgb() o rgba()?

rgb() — ahora acepta el alfa, así que rgba() es un alias heredado de la misma función. Ninguna está obsoleta y ambas funcionan en todas partes, así que no hay razón para reescribir el código existente. Para código nuevo, rgb(255 136 0 / 50%) es la sintaxis actual.

¿Por qué mi herramienta de diseño muestra números RGB distintos para el mismo hex?

Casi siempre es un perfil de color. El hex es un valor en un espacio de color, y si el documento está etiquetado como Display P3 o Adobe RGB en lugar de sRGB, los mismos tres bytes describen un color distinto y la herramienta puede mostrarte el equivalente sRGB en vez de los números en bruto. Esta página trata el hex como sRGB, que es lo que un navegador hace con él en CSS.

¿Cómo uso un valor RGB en una propiedad personalizada de CSS?

Guarda los tres canales sin el envoltorio rgb() — --brand: 240 84 30; — y luego escribe color: rgb(var(--brand)) para el color sólido y background: rgb(var(--brand) / 0.12) para un tinte translúcido de él. Una variable sirve entonces para el color y todas sus transparencias, que es la razón por la que los sistemas de diseño almacenan canales en lugar de cadenas de color ya preparadas.

Equipo de ToolsByUs · Cómo comprobamos nuestras herramientas