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. Introduza um código ou use o seletor de cores e veja a pré-visualização atualizar-se de imediato.
Divide cada canal R, G e B por seu valor máximo para obter frações entre zero e um, calcula 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, já que os três canais estão no valor máximo. Em hexadecimal corresponde a #FFFFFF e, em HSL, tem saturação zero com luminosidade máxima.
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.
Cole o código hexadecimal ou os valores RGB em um conversor ou no seletor de cores do seu editor e ele mostra a amostra visual junto com os equivalentes em outros formatos. Nomes CSS como "tomato" ou "teal" também funcionam como entrada.
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 é amarelo, amarelo-alaranjado, laranja, vermelho-alaranjado, vermelho, vermelho-violeta, violeta, azul-violeta, azul, azul-esverdeado, verde e amarelo-esverdeado. Cores opostas nesse círculo são complementares.
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. O suporte a formatos com canal alfa, como RGBA e HSLA, está sendo desenvolvido para versões futuras.