O que é um código de cor hexadecimal?

Um código de cor hexadecimal representa uma cor com dígitos hexadecimais, como fazem o CSS e a maioria das ferramentas de design. Em #3b82f6, cada par de dígitos é um canal: 3b é vermelho, 82 é verde e f6 é azul, variando de 00 (desligado) a ff (máxima intensidade). Um quarto par opcional define o alfa, ou a opacidade, portanto #3b82f6cc é o mesmo azul com 80% de opacidade. Os códigos em que cada par repete seu dígito podem ser reduzidos a três ou quatro dígitos, portanto #ff8800 também pode ser escrito como #f80.

Descrição da ferramenta

Esta ferramenta permite editar um par de um código de cor hexadecimal de cada vez. Digite ou cole um código, escolha uma cor ou cole uma cor em RGB, HSL ou outro formato; depois altere os pares vermelho, verde, azul e alfa, ou a opacidade, e veja o resultado em uma grade de transparência. A cor editada é exibida nos formatos hexadecimais usados pelo CSS, pelo Android e pelo código, todos prontos para copiar.

Recursos

  • Edite códigos hexadecimais de 3, 4, 6 e 8 dígitos, com ou sem #
  • Altere cada canal como um par hexadecimal de dois dígitos e o alfa como um par hexadecimal ou uma porcentagem
  • Escolha uma cor ou cole uma cor em RGB, HSL ou outro formato, mantendo o alfa
  • Visualize cores transparentes em um padrão quadriculado
  • Obtenha a cor como HEX de 6 dígitos, HEX de 8 dígitos, HEX curto, rgb() ou rgba(), #AARRGGBB e 0xAARRGGBB
  • Alterne entre dígitos hexadecimais minúsculos e maiúsculos
  • Funciona no seu navegador

Como funciona

Um código de 3 ou 4 dígitos é expandido duplicando cada dígito, e um código sem um par alfa é totalmente opaco (ff). Um único dígito digitado em um campo de canal é interpretado como 0 seguido desse dígito, portanto f se torna 0f. As porcentagens de opacidade são arredondadas para o valor alfa inteiro mais próximo, de 0 a 255; assim, 80% se torna cc (204). A forma curta só existe quando os dois dígitos de cada par são iguais; caso contrário, esse campo permanece vazio.

Dicas

  • O CSS lê o par alfa por último (#RRGGBBAA), mas os recursos de cor do Android e o .NET o colocam primeiro (#AARRGGBB); portanto, escolha os campos ARGB para esses casos.
  • Deixe o alfa como ff para obter um código simples de 6 dígitos; os campos de 8 dígitos e ARGB ainda o exibirão por completo.