Como converter cores entre HEX, RGB e HSL
Web designers e desenvolvedores geralmente trabalham com cores em diferentes formatos em projetos, sistemas de design e ferramentas. Esteja você alternando entre um modelo de design em HSL, um arquivo CSS usando RGB ou uma diretriz de marca em HEX, saber como converter entre esses formatos economiza tempo rapidamente e evita erros.
Compreendendo os três principais formatos de cores
A notação HEX (hexadecimal) representa as cores como códigos de seis caracteres, como #FF5733, onde pares de caracteres definem a intensidade do vermelho, verde e azul. RGB (vermelho, verde, azul) usa valores decimais de 0 a 255 para cada canal de cor — por exemplo, rgb(255, 87, 51). HSL (matiz, saturação, luminosidade) descreve a cor usando um ângulo para matiz (0-360°), uma porcentagem para saturação (0-100%) e uma porcentagem para luminosidade (0-100%), escrita como hsl(9, 100%, 60%).
Por que converter entre formatos
Diferentes ferramentas e contextos favorecem diferentes formatos. Os designers costumam trabalhar em HSL porque é intuitivo para ajustar o brilho e a saturação. Os desenvolvedores da Web usam RGB ou HEX em folhas de estilo CSS. A produção impressa pode precisar de um espaço de cores diferente. A conversão permite mover o trabalho entre ferramentas sem especificar novamente as cores manualmente.
Como funciona a conversão
A conversão entre formatos envolve relações matemáticas. HEX para RGB é simples: divida os seis caracteres em três pares e converta cada um de hexadecimal (base 16) para decimal (base 10). RGB para HSL é mais complexo, encontrando os valores máximo e mínimo do canal e, em seguida, derivando matiz, saturação e luminosidade. Os processos inversos aplicam matemática inversa para voltar.
Convertendo cores online
O cálculo manual está sujeito a erros em conversões repetidas. Usar Conversor de cores para transformar entre HEX, RGB e HSL instantaneamente. Cole uma cor em qualquer formato e veja os equivalentes em todas as outras, eliminando a necessidade de você mesmo entender a matemática.
Garanta opções de cores acessíveis
Depois de converter uma cor, verifique se ela atende aos padrões de acessibilidade usando Verificador de contraste para confirmar contraste suficiente com o seu texto. Se você precisa de inspiração de design, Gerador de cores aleatórias produz novas paletas que você pode converter para o formato de sua preferência.
Privacidade: as cores permanecem no seu dispositivo
O conversor de cores processa todas as conversões no seu navegador – nenhum dado é enviado a um servidor. Suas paletas de cores, designs em andamento e especificações de marca permanecem privadas em seu dispositivo. A ferramenta funciona offline após o carregamento da página, para que você possa continuar convertendo cores sem acesso à internet.