Saltar al contenido principal

Convertir RGB a HEX

El conversor de RGB a HEX transforma tres canales decimales en un color hex. Cada canal se divide por 16: el cociente es el primer dígito hex y el resto es el segundo, así que 136 se convierte en 88 y 255 en ff. Un valor alfa se añade como cuarto par, redondeado al más cercano entre 256 pasos — que es el único punto donde la ida y vuelta no es exacta.

Solo local
Entrada RGB

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 RGB a HEX?

Cada canal es un número entero de 0 a 255, y dos dígitos hex cubren exactamente ese rango. Divide por 16: el cociente es el primer dígito, el resto es el segundo. 136 ÷ 16 es 8 con resto 8, así que 88. 255 ÷ 16 es 15 con resto 15, y 15 es f, así que ff.

Los canales de un solo dígito necesitan el cero inicial

Un canal por debajo de 16 produce un dígito, y descartar el cero desplaza todos los dígitos posteriores. rgb(255 8 0) es #ff0800, no #ff800 — el segundo tiene cinco dígitos y no es un color en absoluto. Es el bug clásico de un conversor hecho a mano, y solo aparece en colores oscuros, que es donde nadie mira.

Qué pasa con un canal no entero

CSS permite rgb(255.6 136 0), y el hex no puede guardar una fracción. El valor se redondea al entero más cercano, que es lo que hace también el navegador. Si tus canales salieron de un cálculo — un color aclarado, un paso interpolado — el hex que recibes es la versión redondeada, y convertirlo de nuevo hacia adelante no devolverá la fracción con la que empezaste.

Alfa, y el único paso con pérdida

Un alfa de 0.5 se convierte en 80, porque 0.5 × 255 es 127.5 y se redondea a 128. Convertir eso de vuelta da 0.502. Todos los canales de color hacen la ida y vuelta de forma exacta; el alfa no, porque es una fracción guardada en 256 pasos. La diferencia está muy por debajo de todo lo visible y aparecerá en el momento en que compares dos cadenas en un test.

Porcentajes

rgb(100% 53.3% 0%) es el mismo color que rgb(255 136 0) : los porcentajes en rgb() se resuelven contra 255, no contra 100. Esto atrapa a quienes convierten desde una herramienta de diseño que exporta valores de 0–100, donde 53% significa 135, no 53.

Canales RGB

rgb(255 136 0)

El color hex

#ff8800

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

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

Referencia técnica y opciones
ParámetroTipoValor predeterminadoComportamiento y casos límite
0canal00El mínimo. Los dos dígitos son cero.
8canal08Menor que 16, así que el cero inicial es obligatorio. Si lo quitas, se corrompe el valor entero.
128canal80El punto medio, y exactamente 8 × 16.
136canal888 × 16 + 8.
255canalffEl máximo. 15 × 16 + 15.
alfa 0.5fracción80127.5 se redondea a 128. Al convertir de nuevo se obtiene 0.502 — el único paso de esta conversión que no es exacto.
255.6no enteroffSe redondea, igual que lo redondea el navegador. Un canal fraccional no puede sobrevivir en hex.
100%porcentaje255Los porcentajes se resuelven contra 255. 53% es 135, no 53.

Preguntas frecuentes

¿Cómo convierto RGB a hex a mano?

Divide cada canal por 16. El cociente es el primer dígito y el resto es el segundo, con 10–15 escrito como a–f. 136 ÷ 16 = 8 con resto 8, así que 88. Escribe los tres pares en orden — rojo, verde, azul — con una # delante. La única trampa es un canal por debajo de 16: tiene que seguir siendo de dos dígitos, así que 8 es 08, no 8.

¿Por qué mi color hex tiene cinco dígitos?

A un canal por debajo de 16 se le perdió el cero inicial. rgb(255 8 0) es #ff0800; escrito como #ff800 tiene cinco caracteres, lo cual no es un color hex válido y los navegadores ignorarán toda la declaración. Este es el bug más común en código de conversión escrito a mano y solo aparece en colores oscuros.

¿Convertir de RGB a hex pierde información de color?

No, en cuanto al color en sí — ambas notaciones guardan los mismos tres bytes, así que la ida y vuelta es exacta. El alfa es la excepción: es una fracción en CSS y el hex lo guarda en 256 pasos, así que 0.5 se convierte en 80 y vuelve como 0.502. Invisible en pantalla, visible en una comparación de cadenas.

¿A qué se convierte rgb(100% 50% 0%)?

#ff8000. Los porcentajes en rgb() son fracciones de 255, no de 100, así que 50% es 127.5, que se redondea a 128 — hex 80. Si una herramienta de diseño exportó esos números como valores de 0–100 significan otra cosa, y vale la pena comprobar ese desfase antes de pegar.

¿Debería escribir rgba() o usar un hex de 8 dígitos?

Cualquiera; ambas están soportadas en todo lo actual. El hex de 8 dígitos es más compacto y mantiene el color completo en un solo token, lo que va bien con design tokens y variables. rgba() es más fácil de leer y de editar a mano, y es lo que ya contienen la mayoría de las hojas de estilo existentes. El único argumento real es la consistencia con el código de alrededor.

¿Por qué el hex de un diseñador no coincide con el RGB que reporta el cuentagotas de mi pantalla?

Gestión de color. Un cuentagotas de pantalla muestrea píxeles después de aplicar el perfil del monitor, así que un monitor de gama amplia reporta números distintos para el mismo color de origen sRGB. Muestrea desde el archivo de diseño en lugar de desde una captura de pantalla, o configura el cuentagotas en sRGB, y los dos volverán a coincidir.