Calculadoras online grátis
Converter cores: HEX ↔ RGB ↔ HSL com pré-visualização
Este conversor de cores transforma instantaneamente valores entre os formatos HEX, RGB e HSL, ideal para designers e programadores web. Utiliza fórmulas matematicamente precisas para converter entre os três modelos de cor em tempo real. Digite um código ou use o seletor de cores e veja a pré-visualização atualizar-se de imediato.
Todos os campos são editáveis: HEX, seletor, R, G, B ou H, S, L — os outros valores se ajustam na hora.
Obrigado pelo feedback!
Divida cada canal R, G e B por seu valor máximo para obter frações entre zero e um, calcule o preto (K) a partir do maior desses valores e depois deriva ciano, magenta e amarelo descontando K. É um cálculo puramente matemático, sem gestão de perfil de cor, então o resultado serve como referência e não substitui a conversão feita por um perfil ICC na gráfica.
Use um conta-gotas (disponível em editores de imagem, no navegador ou nas ferramentas do sistema) para capturar o pixel e ler o código hexadecimal ou RGB correspondente. Com esse código em mãos, dá para converter para HSL, CMYK ou HSV e comparar com paletas.
É o branco puro: os três canais estão no máximo, 255. Em hexadecimal corresponde a #FFFFFF e, em HSL, a saturação é 0 % com luminosidade 100 %. O oposto é RGB 0 0 0, o preto, e RGB 128 128 128 fica no meio, um cinza médio.
Os formatos mais usados são o hexadecimal (#RRGGBB), o RGB/RGBA, o HSL/HSLA, o HSV/HSB, o CMYK para impressão e os nomes de cor definidos no CSS. Todos descrevem a mesma cor de maneiras diferentes e podem ser convertidos entre si.
Nesta página, cole o código hexadecimal no campo HEX ou digite os valores RGB ou HSL nos campos correspondentes: ela mostra a amostra visual e os equivalentes nos outros formatos. Nomes CSS como "tomato" ou "teal" não são aceitos aqui; procure o HEX correspondente na lista de cores do CSS (tomato é #FF6347) e cole esse código.
Correspondem ao círculo cromático ampliado: às primárias, secundárias e terciárias somam-se os matizes intermediários entre cada par vizinho, criando uma escala contínua do vermelho ao violeta. Em RGB, esses matizes ficam distribuídos em passos regulares do canal de matiz (hue) do modelo HSL.
A sequência do círculo cromático de doze cores é amarelo, amarelo-alaranjado, laranja, vermelho-alaranjado, vermelho, vermelho-violeta, violeta, azul-violeta, azul, azul-esverdeado, verde e amarelo-esverdeado. Cores opostas no círculo são complementares — amarelo e violeta, por exemplo, separados por 180° ou seis posições.
São uma subdivisão ainda mais fina do círculo cromático, com um matiz a cada dez graus de hue no modelo HSL, cobrindo toda a volta do vermelho de volta ao vermelho. Paletas assim são usadas para escolher gradações suaves entre tons vizinhos.
Um conjunto comum é vermelho, laranja, amarelo, verde, azul, anil, violeta, rosa, marrom, bege, cinza, preto e branco. Cada uma tem um código hexadecimal próprio que pode ser convertido para RGB, HSL ou CMYK.
Se você trabalha com design web, desenvolvimento front-end ou criação visual, sabe que lidar com diferentes formatos de cor é parte essencial do dia a dia. O nosso Conversor de Cores gratuito permite converter instantaneamente entre os formatos HEX, RGB e HSL, com prévia ao vivo e um seletor de cores intuitivo. Economize tempo e elimine erros na hora de trabalhar com paletas de cores.
No mundo do design e desenvolvimento digital, as cores são representadas em diferentes sistemas. Cada formato tem suas vantagens e contextos específicos de uso. Entender as diferenças é fundamental para trabalhar com eficiência.
O formato HEX representa cores usando um código hexadecimal de seis dígitos, precedido pelo símbolo #. Por exemplo, #1A73E8 representa o azul característico do Google. É o formato mais comum em CSS e HTML, amplamente adotado no desenvolvimento web. Cada par de dígitos corresponde a um canal de cor: vermelho, verde e azul, respectivamente.
O RGB (Vermelho, Verde, Azul) define cores com três valores numéricos entre 0 e 255. Por exemplo, rgb(26, 115, 232) corresponde exatamente ao código HEX #1A73E8. Esse formato é amplamente utilizado em linguagens de programação, software de edição de imagens e CSS moderno. É intuitivo para quem trabalha diretamente com código.
O HSL (Matiz, Saturação, Luminosidade) representa cores de maneira mais próxima à percepção humana. O matiz varia de 0 a 360 graus, enquanto saturação e luminosidade são expressas em porcentagem. Por exemplo, hsl(214, 80%, 51%) descreve um azul vibrante de forma descritiva e compreensível. Designers costumam preferir esse formato ao criar e ajustar paletas de cores.
A ferramenta foi desenvolvida para ser simples e eficiente. Veja como utilizar cada funcionalidade:
Todos os campos são sincronizados automaticamente: ao alterar qualquer valor, os demais formatos são atualizados instantaneamente.
Imagine que você recebeu do designer um arquivo com cores em RGB, mas precisa usá-las em um arquivo CSS que utiliza HEX. Com o nosso conversor, essa tarefa leva apenas segundos. Por exemplo, converter rgb(255, 99, 71) para #FF6347 é feito automaticamente assim que você digita os valores. Isso agiliza o fluxo de trabalho entre design e desenvolvimento.
Plataformas como Android e iOS frequentemente especificam cores em formatos distintos. Desenvolvedores de apps precisam garantir consistência entre o protótipo no Figma ou Sketch e a implementação final no código, e o conversor de cores é a ferramenta ideal para essa tarefa.
Ao criar uma marca, as cores precisam ser documentadas em múltiplos formatos para uso em diferentes mídias: web, impressão, redes sociais. O conversor garante que a mesma cor seja representada corretamente em todos os contextos.
Designers de interface utilizam o HSL para criar variações harmoniosas de uma mesma cor, como tons mais claros ou mais escuros de uma cor primária. Com o conversor, é fácil ajustar a luminosidade de uma cor e obter imediatamente o código HEX correspondente para uso no projeto.
O seletor de cores integrado permite escolher visualmente qualquer tom sem precisar conhecer os códigos. Basta clicar na cor desejada no painel e todos os valores HEX, RGB e HSL serão gerados automaticamente. É perfeito para explorar combinações de cores e encontrar a tonalidade exata que você procura.
A funcionalidade de prévia ao vivo exibe a cor selecionada em tempo real, facilitando a comparação entre diferentes tonalidades. Você pode visualizar imediatamente se a cor está correta antes de aplicá-la no seu projeto, evitando retrabalho.
HEX é uma representação hexadecimal compacta de uma cor, muito usada em HTML e CSS. RGB expressa a mesma cor com três valores numéricos separados, representando os canais vermelho, verde e azul. Ambos descrevem as mesmas cores, apenas em formatos diferentes.
O HSL é mais intuitivo para ajustar cores visualmente. Se você quiser tornar uma cor mais clara ou mais saturada, basta modificar os valores de luminosidade ou saturação no HSL, algo muito menos óbvio no RGB ou HEX.
Sim, o Conversor de Cores é completamente gratuito. Não é necessário criar conta ou fazer qualquer pagamento para utilizá-lo sem limitações.
Sim, a ferramenta é totalmente responsiva e funciona em smartphones, tablets e computadores com qualquer navegador moderno.
Atualmente, a ferramenta suporta HEX, RGB e HSL. Formatos com canal alfa, como RGBA e HSLA, não são suportados; para transparência, use o valor RGB e acrescente o alfa manualmente, por exemplo rgba(255, 99, 71, 0.8).