Descubre cómo convertir colores en formato hexadecimal (#RRGGBB) a rgba para agregar transparencia a tus diseños.

En este artículo aprenderás:

1. ¿Qué es hex?
2. ¿Qué es rgba?
3. Convertidor
4. Caso de uso

¿Qué es hex?

En diseño gráfico y programación web, un valor hexadecimal es una representación numérica de un color en formato hexadecimal (#RRGGBB). Este valor está compuesto por dos dígitos para cada uno de los componentes de color rojo, verde y azul (RGB), con valores que van desde 00 hasta FF. Cuando se combinan estos valores, se obtiene un color único que se utiliza para definir el aspecto visual de elementos en una página web o en una imagen digital.

¿Qué es rgba?

RGBA por otro lado es una notación de color que representa rojo, verde y azul (RGB) junto con un valor de opacidad (alfa) adicional, expresado como un número decimal entre 0 y 1. La opacidad controla cuánto de un objeto se muestra a través del color de fondo, lo que permite crear efectos de transparencia y superposición. El valor "a" en rgba es una medida de la opacidad, donde 0 indica completa transparencia y 1 indica opacidad total.

Convertidor

// Nota, el input hex debe empezar con #
function hexToRgba(hex: string, opacity: number) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);

  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}

Caso de uso

Cambiar la opacidad del color un elemento en el DOM (Document Object Model)

Un caso de uso común para convertir un valor hex a rgba es cuando queremos agregar transparencia a un color específico en un diseño. Los valores hex no contienen información acerca de la opacidad de un color, lo que significa que si queremos crear un efecto de transparencia, debemos convertir el valor hex a rgba para incluir un valor de opacidad.