zippydevtoolsCodificação
Conversor de Cores CSS
Detecte e converta cores CSS entre RGB, RGBA, HEX, HEXA, HSL e HSLA, incluindo sintaxe moderna.
- A conversão é local e não envia a cor informada para processamento no servidor.
- A ferramenta normaliza apenas HEX, RGB e HSL; ela não valida contraste WCAG, nomes de cores ou espaços de cor wide-gamut.
Processe a entrada para ver o resultado aqui.
Detecta e converte cores CSS entre HEX, RGB, RGBA, HSL e HSLA, incluindo canais percentuais, unidades de matiz e sintaxe moderna.
Quando usar
Use quando precisar transformar uma cor recebida de um layout, Figma, stylesheet ou design token para outro formato CSS.
Entrada
Use a detecção automática para valores completos com # ou funções CSS; escolha o formato manual para listas de canais sem prefixo.
Resultado
A saída lista formatos clássicos e modernos equivalentes prontos para copiar, preservando alpha quando informado.
- Mantenha o modo automático para valores como #336699, rgb(20% 40% 60%) ou hsl(0.5turn 50% 40%).
- Escolha RGB, HEX ou HSL manualmente apenas para uma lista de canais sem prefixo.
- Execute a conversão e copie o formato necessário para seu CSS.
- Revise alpha, contraste e arredondamentos antes de aplicar em produção.
- Design tokens: Converta valores HEX para RGB/HSL ao criar variáveis CSS e tokens de tema.
- Transparência: Transforme RGBA ou HSLA mantendo alpha para overlays, estados hover e backgrounds.
- Debug de stylesheet: Leia cores vindas de CSS computado e converta para o formato usado pelo projeto.
- Faixas inválidas: RGB precisa estar entre 0 e 255; saturação, luminosidade e alpha devem respeitar seus intervalos.
- Arredondamento: Conversões entre HSL e RGB podem arredondar canais, então compare visualmente em tokens críticos.
- Alpha opcional: Quando alpha não é informado, a ferramenta assume opacidade total.
- Contraste não é validado: A conversão não calcula contraste WCAG nem interpreta nomes de cores ou espaços wide-gamut; valide essas propriedades separadamente.
RGB percentual para HEX
Entrada: rgb(100% 38.8% 27.8%)
Saída: #FF6347
HEX com alpha para RGBA
Entrada: #FF634780
Saída: rgba(255, 99, 71, 0.502)
HSL com unidade de matiz para RGB
Entrada: hsl(0.025turn 100% 64%)
Saída: rgb(255, 99, 71)
Quais formatos de entrada são aceitos?
O modo automático reconhece funções RGB/RGBA e HSL/HSLA com parênteses, além de HEX/HEXA iniciado por #. Valores sem prefixo continuam disponíveis ao escolher o formato manualmente.
A ferramenta aceita HEX curto?
Sim. Valores como #0FA e #0FA8 são expandidos internamente para o formato completo.
Como informar transparência (alpha)?
Use alpha entre 0 e 1 ou percentual entre 0% e 100%, conforme o formato informado.
Posso usar porcentagens e unidades CSS modernas?
Sim. Canais RGB aceitam números de 0 a 255 ou percentuais de 0% a 100%. A matiz HSL aceita graus, gradianos, radianos e voltas com deg, grad, rad ou turn.
Quando recebo erro de cor inválida?
Quando canais ficam fora das faixas válidas, como RGB fora de 0-255 ou HSL com saturação/luminosidade fora de 0-100%.
A conversão é feita no servidor?
Não. A entrada e os formatos convertidos permanecem no navegador; a ferramenta não envia o valor da cor para processamento no servidor.
Como usar esta ferramenta com segurança?
Use a ferramenta em um fluxo curto: revise a entrada esperada, execute o processamento e valide a saida: Campos: Formato de entrada (select, obrigatorio); Cor (text, obrigatorio). Exemplo de fluxo: rgb(100% 38.8% 27.8%) -> #FF6347. Preencha a entrada solicitada, execute a ferramenta e revise mensagens de validação ou avisos antes de copiar o resultado.