Conversor RGB a HEX

Cómo convertir RGB a HEX

Convertir RGB a HEX (el "rgb to hex" de las búsquedas) es pasar cada canal de decimal a hexadecimal y juntar los tres pares después de un #. A mano, divide el canal entre 16: el cociente es el primer dígito y el resto es el segundo.

82  = 5 × 16 + 2    →  5, 2   →  52
113 = 7 × 16 + 1    →  7, 1   →  71
255 = 15 × 16 + 15  →  F, F   →  FF
rgb(82 113 255)  →  #5271FF

Un cociente o un resto de 10 a 15 se convierte en letra: 10 es A, 11 es B, 12 es C, 13 es D, 14 es E y 15 es F. Un segundo ejemplo, con un canal en cero:

255 = 15 × 16 + 15  →  FF
128 = 8 × 16 + 0    →  80
0   = 0 × 16 + 0    →  00
rgb(255 128 0)  →  #FF8000

Un canal cero sigue ocupando dos dígitos (00). El HEX con transparencia, de 8 dígitos, tiene su propia sección más abajo. Y cuando los dos dígitos de cada par son iguales, se puede acortar: rgb(255 0 0) pasa a #F00. La herramienta muestra el HEX corto siempre que existe.

El cero a la izquierda

El bug clásico de quien arma HEX a mano es toString(16). No completa con cero: el canal 15 da f, y no 0f. Con un canal así, el código pierde un dígito y se convierte en otro color, sin ningún error:

(15).toString(16);                  // "f"
(15).toString(16).padStart(2, "0");  // "0f"

"#" + [15, 0, 0].map((c) => c.toString(16)).join("");
// "#f00"  (and not "#0f0000")

Fíjate en que #f00 es un HEX corto válido, igual a #ff0000. El navegador lo acepta, pero el color es otro. La solución es padStart(2, '0'), que completa con ceros a la izquierda hasta tener dos dígitos.

Transparencia en HEX

Para la transparencia, multiplica el alfa (de 0 a 1) por 255, redondea y convierte el resultado a hexadecimal. El par va al final del código y forma el HEX de 8 dígitos. En el campo, el alfa puede ser 0.5, .5 o 50%: los tres dan el mismo resultado.

alpha = 0.5
0.5 × 255 = 127.5  →  128
128 = 8 × 16 + 0   →  80
rgb(82 113 255 / 50%)  →  #5271FF80

¿Por qué 50% da 80 y no 7F? Porque 0,5 × 255 es 127,5, y el redondeo sube a 128 (80). Quien trunca en lugar de redondear llega a 127 (7F). La diferencia es de 1 en 255, invisible en pantalla, pero aparece si comparas byte a byte el resultado de dos herramientas.

En el camino de vuelta, el HEX de 8 dígitos se convierte en alfa dividiendo el último par entre 255 (80 da 0,5). El conversor de HEX a RGB hace esa cuenta y muestra el rgba() listo.

Tabla de opacidad en HEX

Los pares para poner al final del código, de 100% a 0%, de 5 en 5. La tercera columna muestra el resultado sobre #5271FF.

Para usarlo, añade el par al HEX de seis dígitos: 40% de opacidad sobre #5271FF queda #5271FF66. Vale en background, color, border-color, box-shadow e incluso en las paradas de un linear-gradient.

Convertir RGB a HEX en código

En JavaScript, combina toString(16) con padStart(2, '0') para no perder el cero a la izquierda:

const toHex = (value) =>
  Math.round(value).toString(16).padStart(2, "0");

function rgbToHex(r, g, b, a) {
  const alpha = a === undefined ? "" : toHex(a * 255);

  return `#${toHex(r)}${toHex(g)}${toHex(b)}${alpha}`.toUpperCase();
}

rgbToHex(82, 113, 255);       // "#5271FF"
rgbToHex(82, 113, 255, 0.5);  // "#5271FF80"
rgbToHex(15, 0, 0);           // "#0F0000"

En Python, el f-string con :02X ya completa con ceros y deja las letras en mayúsculas. hex(255) devuelve '0xff', con prefijo y sin cero a la izquierda, así que el f-string suele ser más práctico:

def rgb_to_hex(r: int, g: int, b: int) -> str:
    if not all(0 <= channel <= 255 for channel in (r, g, b)):
        raise ValueError("channel out of range 0-255")

    return f"#{r:02X}{g:02X}{b:02X}"

rgb_to_hex(82, 113, 255)  # '#5271FF'
rgb_to_hex(15, 0, 0)      # '#0F0000'

La trampa es no validar el rango de 0 a 255. Sin esa comprobación, el canal 300 da 12c, que tiene tres dígitos, y el código entero sale desalineado:

(300).toString(16);   // "12c"
(-1).toString(16);    // "-1"

Si el valor viene de un campo de texto, conviértelo con Number() y compruébalo con Number.isInteger. La cadena "82" funciona, pero "8 2" da NaN.

Qué acepta CSS en rgb()

La herramienta lee los mismos formatos que el rgb() de CSS, así que puedes pegar directamente desde tu hoja de estilos:

• Porcentajes: rgb(100% 0% 0%) es lo mismo que rgb(255 0 0).
• Decimales: rgb(82.4 113 255) es válido en CSS. Aquí el canal se redondea al entero más cercano.
• Valor fuera de 0-255: CSS no da error y limita al máximo o al mínimo, así que rgb(300 0 0) pasa a rgb(255 0 0). La herramienta, en cambio, avisa, porque casi siempre es un error de escritura.
• Separadores: 82,113,255 y 82 113 255 funcionan, y un cuarto número suelto se lee como transparencia de 0 a 1.

La sintaxis con espacio y barra para la transparencia, y la diferencia con rgba() con comas, están explicadas en el conversor de HEX a RGB.

Más herramientas de color

Para el camino inverso, usa el conversor de HEX a RGB. Si necesitas una imagen de prueba con color de fondo y de texto en HEX, el generador de imágenes placeholder acepta los códigos que acabas de convertir.