Como funciona
Fixe cada canal em 0-255, arredonde-o e escreva dois dígitos hexadecimais por canal atrás de #. O HSL é derivado das proporções RGB: matiz do canal dominante, saturação da distância entre máximo e mínimo, luminosidade da média.
- HEX aceita 3 ou 6 dígitos; os valores são fixados em 0–255.
Por que isso importa
As ferramentas de design exportam diferentes formatos e o CSS espera formatos específicos. A conversão manual provoca erros de arredondamento, e a mesma cor escrita de três maneiras é fácil de verificar quando você vê todas as representações lado a lado.
Um exemplo trabalhado
rgb(99, 91, 255) é #635BFF e hsl(244, 100%, 68%). O formato HEX é o que os autores de CSS colam com mais frequência; HSL é mais fácil de escurecer ou dessaturar sem adivinhar novos canais.
Erros comuns
- Supondo que o mesmo HEX pareça idêntico em todos os lugares sem gerenciamento de cores.
- Esquecer que o HEX de três dígitos expande cada mordida duas vezes.
- Editando canais RGB quando você pretendia ajustar a luminosidade.
Dicas práticas
Projete em HSL quando precisar de tonalidades e tonalidades sistemáticas: mantenha o matiz e a saturação, varie a luminosidade em etapas. Armazene o HEX para saída, mas mantenha as notas HSL no arquivo de design para ajustes futuros.
Como usar
- Abra a ferramenta. Tudo roda na aba do seu navegador.
- Cole ou digite sua entrada e escolha a ação necessária.
- Verifique o resultado e copie-o com um clique.
Perguntas comuns
Por que meu valor HEX é diferente em outra ferramenta?
Os valores são fixados em 0-255 e arredondados, depois escritos em HEX maiúsculo. Algumas ferramentas mantêm entradas em letras minúsculas ou inválidas.
O que é HSL?
Uma representação alternativa: matiz em graus, saturação e luminosidade em porcentagem. É útil para ajustar cores.
Ele verifica o contraste?
Não. Isso converte formatos de cores; a verificação de contraste é uma ferramenta diferente.
Esta ferramenta é realmente gratuita?
Sim. Não há conta, acesso pago e limite de uso. O Tools App é financiado pela aumenso, o estúdio por trás dele.
Alguma coisa que eu inseri foi carregada?
Não. A ferramenta é executada na aba do seu navegador; o que você insere nunca é enviado para nós e nunca é armazenado.