HEX to RGBA

O CSS começou com exatamente 16 cores nomeadas herdadas das cores VGA do DOS — `black`, `white`, `red` e afins. A notação hexadecimal veio depois, emprestada do sistema de cores do X11 no Unix, e foi adotada pelo HTML 3.2 em 1997 com o atributo `color`. Por muito tempo, se você queria uma cor semitransparente na web, suas opções eram criativas e nada elegantes: um PNG de 1x1 pixel repetido como background, `filter: alpha(opacity=50)` para Internet Explorer, elementos `div` sobrepostos com `position: absolute`. O `rgba()` chegou no CSS2.1 mas só se tornou confiável em todos os browsers relevantes por volta de 2010 — antes disso, qualquer efeito de transparência era um exercício de paciência.

O hexadecimal virou a língua franca das cores em design porque ferramentas como Adobe Photoshop, Illustrator, Sketch e Figma sempre o usaram como formato de exportação primário. A notação curta `#RGB` — onde `#F0A` expande para `#FF00AA` — vem do HTML 3.2. A variante `#RGBA` com 4 dígitos nunca foi muito usada mas existe. A versão completa `#RRGGBBAA` com 8 dígitos é a mais recente: faz parte do CSS Color Level 4, publicado por volta de 2017, e adiciona o canal alpha diretamente ao hex. O suporte nos browsers modernos é bom, mas ainda há ambientes — emails HTML, SVGs inline, alguns parsers de CSS — que só entendem os formatos de 3 ou 6 dígitos sem alpha.

Esta ferramenta interpreta todos esses formatos — `#RGB`, `#RGBA`, `#RRGGBB` e `#RRGGBBAA` — e converte para `rgba()` com canal alpha explícito. Quando você usa formatos de 3 ou 6 dígitos, pode aplicar um fator de transparência adicional pelo slider; no formato de 8 dígitos, o alpha embutido tem prioridade. Um uso prático pouco óbvio: variáveis CSS com `rgba()` permitem sobrescrever apenas o canal alpha em JavaScript sem precisar repassar os valores RGB inteiros. Definir `--cor-primaria: rgba(26, 115, 232, 0.8)` e depois alterar só a opacidade via `style.setProperty` é mais limpo do que decompor o hex toda vez.

CSS started with exactly 16 named colors inherited from DOS VGA — `black`, `white`, `red`, and similar. Hexadecimal notation came later, borrowed from the X11 color system on Unix, and was adopted by HTML 3.2 in 1997 through the `color` attribute. For a long time, if you wanted a semi-transparent color on the web, your options were creative and far from elegant: a 1x1 PNG tile repeated as a background, `filter: alpha(opacity=50)` for Internet Explorer, stacked `div` elements with `position: absolute`. The `rgba()` function arrived in CSS2.1 but only became reliably supported across all relevant browsers around 2010 — before that, any transparency effect was an exercise in patience.

Hexadecimal became the lingua franca for design colors because tools like Adobe Photoshop, Illustrator, Sketch, and Figma have always used it as the primary export format. The short `#RGB` notation — where `#F0A` expands to `#FF00AA` — dates back to HTML 3.2. The 4-digit `#RGBA` variant with an alpha channel has never been widely used but exists. The full 8-digit `#RRGGBBAA` format is the newest: it is part of CSS Color Level 4, published around 2017, adding the alpha channel directly to the hex value. Browser support is solid in modern environments, but there are still contexts — HTML emails, inline SVGs, some CSS parsers — that only understand the 3 or 6-digit formats without alpha.

This tool interprets all of those formats — `#RGB`, `#RGBA`, `#RRGGBB`, and `#RRGGBBAA` — and converts them to `rgba()` with an explicit alpha channel. When you use 3 or 6-digit formats, you can apply an additional transparency factor through the slider; with the 8-digit format, the embedded alpha takes priority. One non-obvious practical use: CSS variables with `rgba()` let you override just the alpha channel in JavaScript without having to pass all three RGB values again. Defining `--primary-color: rgba(26, 115, 232, 0.8)` and then changing only the opacity via `style.setProperty` is cleaner than decomposing the hex every time.

CSS empezó con exactamente 16 colores nombrados heredados de los colores VGA del DOS — `black`, `white`, `red` y similares. La notación hexadecimal llegó después, tomada del sistema de colores de X11 en Unix, y fue adoptada por HTML 3.2 en 1997 a través del atributo `color`. Durante mucho tiempo, si querías un color semitransparente en la web, tus opciones eran creativas y poco elegantes: un PNG de 1x1 píxel repetido como fondo, `filter: alpha(opacity=50)` para Internet Explorer, elementos `div` superpuestos con `position: absolute`. La función `rgba()` llegó en CSS2.1 pero solo se volvió confiable en todos los navegadores relevantes alrededor de 2010 — antes de eso, cualquier efecto de transparencia era un ejercicio de paciencia.

El hexadecimal se convirtió en la lengua franca de los colores en diseño porque herramientas como Adobe Photoshop, Illustrator, Sketch y Figma siempre lo han usado como formato de exportación principal. La notación corta `#RGB` — donde `#F0A` se expande a `#FF00AA` — viene de HTML 3.2. La variante `#RGBA` de 4 dígitos con canal alpha nunca fue muy utilizada pero existe. El formato completo `#RRGGBBAA` de 8 dígitos es el más reciente: forma parte del CSS Color Level 4, publicado alrededor de 2017, y añade el canal alpha directamente al valor hex. El soporte en navegadores modernos es sólido, pero todavía hay contextos — correos HTML, SVGs inline, algunos parsers de CSS — que solo entienden los formatos de 3 o 6 dígitos sin alpha.

Esta herramienta interpreta todos esos formatos — `#RGB`, `#RGBA`, `#RRGGBB` y `#RRGGBBAA` — y los convierte a `rgba()` con canal alpha explícito. Cuando usas formatos de 3 o 6 dígitos, puedes aplicar un factor de transparencia adicional mediante el control deslizante; con el formato de 8 dígitos, el alpha incorporado tiene prioridad. Un uso práctico poco obvio: las variables CSS con `rgba()` permiten sobrescribir solo el canal alpha en JavaScript sin necesidad de pasar de nuevo los tres valores RGB. Definir `--color-primario: rgba(26, 115, 232, 0.8)` y luego cambiar solo la opacidad mediante `style.setProperty` es más limpio que descomponer el hex cada vez.