Conversor HEX RGB
Converta cores entre HEX, RGB(A) e HSL(A) com atualização ao vivo, suporte a alfa e valores CSS prontos para copiar.
🔒 Executa completamente no seu navegador — nada é enviadoConverta formatos de cor sem adivinhar
Os valores de cor costumam passar entre ferramentas que preferem formatos diferentes. Um designer pode entregar um token HEX, uma animação CSS pode precisar de canais RGB e um ajuste de tema pode ser mais fácil em HSL. Este conversor HEX RGB mantém sincronizados os formatos web mais comuns: informe a versão que você tem e copie a que precisa. A pré-visualização ao vivo também torna os erros evidentes: se um canal for digitado incorretamente, a pré-visualização muda imediatamente.
O conversor suporta o fluxo de trabalho CSS do dia a dia: HEX de seis dígitos, RGB, RGBA, HSL e HSLA. O alfa é controlado separadamente porque a opacidade costuma ser uma decisão de design e não parte de um token de cor da marca. Defina o alfa como um para cores opacas, ou reduza-o para criar sobreposições, anéis de foco, sombras e fundos translúcidos que usam o mesmo matiz de base.
Quando usar RGB, RGBA, HSL ou HSLA
RGB é uma descrição direta da cor na tela e é útil quando você compara valores de capturas de tela, saídas de canvas ou ferramentas de design mais antigas. RGBA adiciona transparência, conveniente para sobreposições e bordas sutis. HSL descreve a cor em termos de matiz, saturação e luminosidade, por isso é mais natural quando você quer criar cores relacionadas: gire o matiz para um novo destaque, reduza a saturação para um estado atenuado ou aumente a luminosidade para um tom mais claro. HSLA adiciona o mesmo controle de alfa a esse modelo mais legível.
Valores confiáveis para CSS e design tokens
Conversões consistentes são importantes em design systems. Erros de arredondamento ou erros de digitação copiados podem criar cores quase duplicadas, difíceis de notar, mas trabalhosas de manter. Esta ferramenta limita os canais RGB ao intervalo válido de 0–255, mantém as porcentagens HSL no intervalo de 0–100 e formata a saída como CSS pronto para colar. Como tudo roda localmente, você pode converter com segurança cores de produtos não lançados, paletas de clientes ou tokens internos de marca sem enviá-los a lugar nenhum.
Como usar
- Insira um valorDigite um valor HEX ou ajuste os canais RGB e HSL.
- Revise os formatosO conversor mantém sincronizadas as saídas HEX, RGB(A) e HSL(A).
- Copie o CSSUse os botões de copiar para colar o formato necessário em CSS, design tokens ou documentação.