Conversor de códigos de cor
Insira uma cor para ver e copiar valores HEX, RGB e HSL.
#624DE3CC
Sobre esta ferramenta
A ferramenta Conversor de códigos de cor mostra a mesma cor em HEX, RGB e HSL ao mesmo tempo e faz a conversão entre esses formatos. Você pode escolher a cor digitando um valor, selecionando um preset ou usando o conta-gotas, além de ajustar a transparência. Ideal para converter um código de cor no formato que você precisa para web design, UI, CSS e edição de imagens.
Como usar
Escolher uma cor
Digite um valor nos campos HEX, RGB ou HSL ou selecione uma cor predefinida. Em ambientes compatíveis, você também pode usar o botão de conta-gotas para capturar uma cor diretamente da tela.
Ajustar a transparência
Use o controle deslizante para definir a opacidade da cor. O ajuste é refletido na prévia, no topo, e nos códigos de cor.
Conferir e copiar o resultado
Confira a cor na prévia e pressione o botão de copiar ao lado do campo HEX, RGB ou HSL para salvar o valor desejado na área de transferência.
Recursos
HEX, RGB e HSL juntos
Digite a cor em um formato e veja os valores em HEX, RGB e HSL de uma vez.
Prévia em tempo real e transparência
A prévia é atualizada na hora conforme você muda os valores ou a transparência, e o controle deslizante permite criar cores semitransparentes.
Conta-gotas e cores predefinidas
Em navegadores compatíveis, use o conta-gotas para capturar uma cor da tela ou clique em uma cor comum para aplicá-la rapidamente.
Copiar cada formato separadamente
Copie o valor HEX, RGB ou HSL individualmente para usar direto no CSS, em ferramentas de design e documentos.
Inserir valores manualmente
Se você já conhece o código, digite-o nos campos para ver o resultado da conversão.
Processamento no navegador
Seus valores de cor e resultados de conversão ficam no seu navegador — nada é enviado a um servidor.
Casos de uso
Converter códigos de cor para CSS
Converta uma cor HEX de um mockup de design em RGB ou HSL para usar nos estilos CSS.
Transferir cores entre ferramentas de design
Quando os formatos variam, converta a mesma cor para o formato exigido por cada programa.
Criar fundos semitransparentes
Ajuste a transparência para gerar cores semitransparentes para sobreposições, fundos, botões e bordas.
Capturar cores da tela
Use o conta-gotas para selecionar uma cor exibida em uma página, imagem ou tela de app e vê-la como código.
Gerenciar cores da marca
Mantenha os valores HEX, RGB e HSL das cores da marca juntos para uso consistente na web, em impressos e documentos de design.
Perguntas frequentes
Qual a diferença entre HEX, RGB e HSL?
HEX representa uma cor em hexadecimal, como #8AD0FF. RGB expressa a intensidade de vermelho, verde e azul em números, enquanto HSL descreve uma cor por matiz, saturação e luminosidade.
Qual formato devo usar?
O HEX é simples e muito usado na web e em documentos de design. O RGB é prático para ajustar canais de cor diretamente, e o HSL é útil para mudar matiz ou luminosidade de forma intuitiva.
Como a transparência aparece no código da cor?
Um valor HEX com transparência é exibido como um código de 8 dígitos, com o valor alpha adicionado após o código normal de 6 dígitos. Por exemplo, em #8AD0FFCC, os dois últimos dígitos representam a transparência.
Qual a diferença entre HEX de 6 e 8 dígitos?
Um HEX de 6 dígitos contém apenas os valores de vermelho, verde e azul. Um HEX de 8 dígitos adiciona um valor alpha no final para representar a transparência.
O que significam transparência de 100% e 0%?
100% significa totalmente opaco e 0% totalmente transparente. Valores intermediários geram cores semitransparentes em que o fundo aparece por trás.
Qual é o intervalo dos valores RGB?
Os valores RGB vão de 0 a 255 para cada um dos componentes: vermelho, verde e azul. Quanto maior o valor, mais forte aquele componente da cor.
O que significam os valores HSL?
H é a matiz, normalmente um valor entre 0 e 359 graus. S é a saturação e L é a luminosidade, cada uma expressa em porcentagem.
O conta-gotas funciona em qualquer navegador?
O suporte depende do navegador e do ambiente. Em ambientes sem suporte, use os campos de cor ou as cores predefinidas.
Posso editar uma cor depois de escolher um preset?
Sim. Depois de escolher a predefinição, ajuste os valores HEX, RGB ou HSL ou a transparência para refinar a cor.
O que o botão de copiar copia?
Cada botão copia o valor atual da cor naquele formato. Você pode copiar apenas o valor HEX, RGB ou HSL que precisar.
Meu valor de cor é enviado a um servidor?
Não. Todo o processamento acontece localmente no seu navegador. Seus valores e resultados nunca são transmitidos a um servidor.
Ferramentas relacionadas
