Tabela de opacidade hex + seletor de cor RGBA (#RRGGBBAA) | We.Inc
Adicione transparência a qualquer cor hex. Escolha uma opacidade, copie o hex de 8 dígitos, o valor rgba, hsla ou Android e veja o resultado sobre fundos claro, escuro e xadrez. Tabela completa de alpha de 0 a 100%.
Para deixar uma cor hex transparente, adicione mais dois dígitos hex para o alpha: #RRGGBBAA. O par é a opacidade vezes 255, escrita em hex, então 50% é 80, 75% é BF e 25% é 40. Escolha uma cor e uma opacidade abaixo para obter o hex de 8 dígitos e os valores rgba e hsla correspondentes.
Valores de opacidade mais usados
Opacidade
Par alpha
Exemplo com #4F98FB
BF
Escolha uma cor, arraste o controle de opacidade e copie o formato de que o seu código precisa. A prévia mostra a cor sobre branco, preto e um fundo xadrez, junto com a cor sólida resultante da mistura em cada um.
Digite ou escolha uma cor base. Hex de três, seis e oito dígitos funcionam; um par alpha já existente define a posição do controle.
Arraste o controle ou digite uma porcentagem de 0 a 100.
Copie o hex de 8 dígitos, rgba(), o rgb() moderno com barra, hsla() ou o formato Android #AARRGGBB.
Confira a cor misturada sobre branco e sobre preto se precisar de um fallback sólido ou quiser testar o contraste do texto.
Os pares alpha são arredondados, então uma porcentagem nem sempre volta igual. 80 em hex é 128 de 255, ou seja, 50.2%, perto o bastante para qualquer tela.
Os recursos de cor do Android colocam o alpha primeiro (#AARRGGBB), ao contrário do CSS. Inverter os dois é um motivo comum de uma cor parecer errada em um app.
Para texto, confira o contraste com a cor misturada, não com a transparente. Um preto a 60% sobre branco se lê de um jeito muito diferente de um preto a 60% sobre uma foto.
Use a propriedade opacity só quando o elemento inteiro, com os filhos, deve esmaecer. Para um fundo translúcido com texto sólido, coloque o alpha na cor de fundo.
Perguntas frequentes
Todos os navegadores suportam cores hex de 8 dígitos?
Sim. Os formatos #RRGGBBAA e #RGBA vêm do CSS Color Level 4 e funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari. Navegadores muito antigos os ignoram, então adicione um fallback em rgba() só se você ainda der suporte a eles.
Como converter opacidade para hex?
Multiplique a opacidade (de 0 a 1) por 255, arredonde para um número inteiro e escreva com dois dígitos hex. Para 30%: 0.3 vezes 255 dá 76.5, que arredonda para 77, que é 4D em hex. A tabela completa nesta página lista cada passo de 5%.
#RRGGBBAA é a mesma coisa que rgba()?
Os dois descrevem a mesma cor. rgba(79, 152, 251, 0.5) e #4F98FB80 são renderizados de forma idêntica, tirando o pequeno arredondamento do alpha em hex. Use o que o seu código já usa.
E o hex de 4 dígitos?
Lendo o par alpha
Um par hex conta de 00 a FF, ou seja, de 0 a 255. O par alpha usa a mesma escala, em que 00 é totalmente transparente e FF é totalmente opaco. Por isso os valores comuns parecem estranhos no começo: metade de 255 é 127.5, então 50% arredonda para 128, que é 80 em hex.
Designers muitas vezes exportam cores de um arquivo de design com um número de opacidade separado. Transformar isso em um único valor de 8 dígitos facilita colocá-lo em um design token ou em uma configuração do Tailwind.
Cores transparentes no Tailwind
O Tailwind adiciona opacidade com uma barra depois do nome da cor, por exemplo bg-sky-500/50, o que funciona para qualquer cor do tema. Para uma cor personalizada, um valor arbitrário como bg-[#4F98FB80] aceita o hex de 8 dígitos diretamente.
Por baixo dos panos, o Tailwind 4 mistura a cor com transparent usando color-mix(), e versões mais antigas usam rgb() com alpha. O resultado na tela é o mesmo do valor hex que esta ferramenta fornece.