Web design e CSS
Converta uma cor de um arquivo de design ou de um seletor de captura de tela no código hexadecimal necessário para sua folha de estilo.
Conversor de RGB para HEX — Transforme valores RGB em códigos hexadecimais e códigos hexadecimais em RGB, com visualização em tempo real.
Insira valores em vermelho, verde e azul, escolha uma cor ou cole um código hexadecimal e veja todos os formatos de uma só vez: HEX, RGB e HSL. Uma visualização em tempo real e uma verificação de contraste mostram qual cor de texto funciona melhor. Tudo funciona diretamente no seu navegador.
Converter uma cor
Suas cores permanecem no seu navegador
Escolha ou digite uma cor
Aa
Códigos de cores
HEX
–RGB (CSS)
–HSL (CSS)
––Qual é a melhor cor para o texto?
–Relação de contraste
O guia
Guia de conversão de RGB para HEX: códigos de cores, HSL e contraste
Saiba como funcionam os códigos de cores e como escolher combinações de cores fáceis de distinguir.
O que um conversor de RGB para HEX faz?
As telas reproduzem todas as cores misturando luz vermelha, verde e azul. O sistema RGB representa essa mistura por meio de três números de 0 a 255. O sistema HEX representa esses mesmos três números na base 16 como um código curto, como #1F3A5F, que é o que o CSS, as ferramentas de design e os guias de marca costumam usar.
Digite os três números, escolha uma cor com o seletor ou cole um código hexadecimal. Todos os formatos são atualizados simultaneamente, e você também recebe uma versão em HSL e uma indicação de qual cor de texto fica mais legível nessa cor.
Por que as pessoas convertem RGB para HEX
Marca e documentos
Mantenha a consistência das cores da marca entre o arquivo do logotipo, uma apresentação de slides e um site.
Acessibilidade
Verifique qual cor de texto fica bem em um determinado fundo e analise a relação de contraste antes de publicar.
Como o RGB se transforma em HEX
Cada um dos três números é convertido em um valor de dois dígitos na base 16; em seguida, os três pares são unidos.
RGB: 31, 58, 95
31 = 1F (1 × 16 + 15)
58 = 3A (3 × 16 + 10)
95 = 5F (5 × 16 + 15)
HEX: #1F3A5F
A base 16 utiliza os algarismos de 0 a 9 e as letras de A a F, sendo que A corresponde a 10 e F a 15. Um código abreviado como #FA0 é uma forma resumida: cada algarismo é duplicado, portanto, significa #FFAA00.
Cores comuns em RGB e HEX
| Cor | RGB | HEX |
|---|---|---|
| Preto | 0, 0, 0 | #000000 |
| Branco | 255, 255, 255 | #FFFFFF |
| Vermelho | 255, 0, 0 | #FF0000 |
| Verde | 0, 255, 0 | #00FF00 |
| Azul | 0, 0, 255 | #0000FF |
| Amarelo | 255, 255, 0 | #FFFF00 |
| Laranja | 255, 165, 0 | #FFA500 |
| Cinza | 128, 128, 128 | #808080 |
Como usar o conversor de RGB para HEX
- Digite os valores de vermelho, verde e azul ou clique na amostra para usar o seletor de cores.
- Ou cole um código hexadecimal no campo “Hex” para fazer o contrário.
- Leia os códigos HEX, RGB e HSL e verifique a relação de contraste e a melhor cor para o texto.
- Clique em “Copiar” ao lado do formato desejado.
Dicas simples para trabalhar com cores
- Para garantir a legibilidade do texto, procure manter uma relação de contraste de pelo menos 4,5 : 1 para texto normal e de 3 : 1 para texto em tamanho grande.
- Os códigos hexadecimais não diferenciam maiúsculas de minúsculas; portanto, #1f3a5f e #1F3A5F são a mesma cor.
- O símbolo # no início é necessário no CSS, mas aqui é opcional. Você pode colar os códigos com ou sem ele.
- As telas e as impressoras exibem as cores de maneira diferente; portanto, a cor impressa pode não corresponder à que você vê na tela.
Limitações e Privacidade
Privacidade
Suas cores são convertidas no seu navegador. Nada é enviado ao nosso servidor nem armazenado. Apenas a opção em letras minúsculas é lembrada no seu dispositivo.
Limitações
A ferramenta funciona com cores sRGB padrão de 8 bits, de 0 a 255 por canal. Ela não suporta transparência (RGBA ou hexadecimal de 8 dígitos), CMYK para impressão nem espaços de cor de gama ampla.
Perguntas frequentes
Perguntas frequentes sobre o conversor de RGB para HEX
Como faço para converter RGB para HEX?
Insira os valores de vermelho, verde e azul, cada um entre 0 e 255. A ferramenta converte cada número em dois dígitos na base 16 e os une, de modo que 31, 58, 95 se torna #1F3A5F.
Como faço para converter HEX para RGB?
Cole o código hexadecimal no campo “Hex”. Os três valores RGB são preenchidos automaticamente. Por exemplo, #FF8800 corresponde a 255, 136, 0.
O código hexadecimal precisa do símbolo #?
Não. Você pode digitá-lo com ou sem o #, e códigos abreviados como #FA0 também funcionam. O resultado sempre inclui o #, de modo que fica pronto para o CSS.
O que significam os três valores RGB?
São os valores da luz vermelha, verde e azul, que variam de 0 (nenhuma) a 255 (máxima). 0, 0, 0 é preto e 255, 255, 255 é branco.
Para que serve o valor HSL?
O HSL descreve uma cor por meio do matiz, da saturação e da luminosidade. Muitas vezes, é mais fácil fazer ajustes manualmente, por exemplo, para deixar uma cor um pouco mais clara, e isso funciona diretamente no CSS.
O que a taxa de contraste me diz?
Isso mostra o quanto o texto em preto ou branco se destaca na cor de fundo. Uma proporção de 4,5 : 1 ou mais é o mínimo habitual para texto normal, de acordo com as diretrizes de acessibilidade WCAG.
Posso incluir transparência?
Aqui não. Essa ferramenta lida apenas com cores opacas, sem canal alfa. Para obter transparência, adicione você mesmo um valor alfa na função rgba() no seu CSS.
Meus dados são salvos ou enviados para algum lugar?
Não. A conversão é feita no seu navegador e nenhuma informação sai do seu dispositivo. Apenas a sua escolha de letras minúsculas é lembrada para a próxima vez.
De pessoas que utilizam essa ferramenta
Avaliações
Carregando avaliações…
Continue
Mais ferramentas na caixa
A página inicial apresenta dezenas de outras ferramentas gratuitas que não exigem uma chave de API.
Gerador de UUID
Crie UUIDs aleatórios nos formatos v4, v7 e v5 em massa.
Abrir ferramentaRemovedor de espaços em branco
Remova espaços, tabulações e linhas em branco em excesso.
Abrir ferramentaConversor de unidades
Converta comprimento, peso, velocidade e muito mais.
Abrir ferramentaConversor de algarismos romanos
Converta números em algarismos romanos e vice-versa.
Abrir ferramenta