zippydevtoolsCodificação
Conversor de Cores CSS
Converta cores CSS entre RGB, RGBA, HEX, HEXA, HSL e HSLA no navegador.
Processe a entrada para ver o resultado aqui.
Converte cores CSS entre HEX, RGB, RGBA, HSL e HSLA para padronizar design systems, variáveis CSS e tokens visuais.
Quando usar
Use quando precisar transformar uma cor recebida de um layout, Figma, stylesheet ou design token para outro formato CSS.
Entrada
Escolha o formato de origem e informe uma cor válida, incluindo alpha quando o formato suportar transparência.
Resultado
A saída lista formatos CSS equivalentes prontos para copiar, preservando alpha quando informado.
- Selecione RGB, HEX ou HSL como formato de entrada.
- Cole a cor no padrão correspondente, como #336699, rgb(51 102 153) ou hsl(210 50% 40%).
- 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 acessibilidade ou contraste WCAG; valide separadamente.
RGB para HEX
Entrada: rgb(255, 99, 71)
Saída: #FF6347
HEX com alpha para RGBA
Entrada: #FF634780
Saída: rgba(255, 99, 71, 0.502)
HSL para RGB
Entrada: hsl(9, 100%, 64%)
Saída: rgb(255, 99, 71)
Quais formatos de entrada são aceitos?
Você pode escolher RGB/RGBA, HEX/HEXA ou HSL/HSLA no seletor de formato.
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.
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. Todo o processamento é local no navegador.
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(255, 99, 71) -> #FF6347. Preencha a entrada solicitada, execute a ferramenta e revise mensagens de validação ou avisos antes de copiar o resultado.
Quais entradas e saídas devo conferir?
Confira os campos de entrada, exemplos e saida desta ferramenta antes de usar o resultado: Formato de entrada (select, obrigatorio); Cor (text, obrigatorio). Use os campos, formatos e limites descritos na interface da ferramenta; revise a saída antes de aplicar em fluxos críticos.