Este conversor de cores CSS transforma qualquer valor de cor em HEX, RGB e HSL ao mesmo tempo, com uma amostra ao vivo para você ver o tom exato enquanto digita. Cole um código hex, um valor rgb() ou hsl(), ou um nome de cor CSS comum como blue, teal ou gold, e ele normaliza instantaneamente a entrada nos três formatos. Ele também lida com transparência, incluindo rgba(), hsla() e hex de 8 dígitos com canal alfa. Seja fazendo a conta de hex para rgb de um token de design, convertendo rgb para hex em uma folha de estilo, ou conferindo um valor hsl ao ajustar uma paleta, ele mantém todos os formatos em sincronia. Feito para desenvolvedores front-end, designers e engenheiros de QA que lidam com formatos de cor diariamente. Tudo roda localmente no seu navegador, então os valores que você insere nunca saem do seu dispositivo.
Recursos
Converte HEX, RGB e HSL ao mesmo tempo a partir de uma única entrada
Reconhece nomes de cores CSS comuns como blue, teal e gold
Suporta transparência via rgba(), hsla() e hex de 8 dígitos com alfa
Amostra de cor ao vivo atualiza instantaneamente enquanto você digita
Aceita códigos hex abreviados de 3 e 4 dígitos
Normaliza valores de canal RGB em porcentagem e de 0 a 255
Mostra um erro inline claro quando um valor não pode ser interpretado
Processado localmente no seu navegador
Como usar Conversor de cores CSS
Digite ou cole uma cor na caixa de entrada de cor.
Use um código hex, rgb(), hsl() ou um nome de cor CSS como blue.
Leia os valores HEX, RGB e HSL convertidos nas linhas de resultado.
Confira a amostra ao lado da entrada para visualizar a cor exata.
Um valor hex convertido em RGB e HSL com uma amostra ao vivo correspondente.
Erros comuns e solução de problemas
"Couldn't parse that color" aparece após digitar um valor. — Use um código hex válido, rgb()/rgba(), hsl()/hsla() ou um nome de cor CSS suportado; caracteres soltos ou parênteses faltando quebram a interpretação.
Um nome de cor CSS como "salmon" não é reconhecido. — Apenas um conjunto selecionado de nomes comuns é suportado. Insira o valor hex ou rgb() equivalente em vez disso.
O alfa é perdido após a conversão. — Inclua o canal alfa na entrada, como rgba(0,0,0,0.5) ou um hex de 8 dígitos como #00000080, e ele será mantido em todos os formatos.
Valores RGB acima de 255 ou porcentagens ficam errados. — Os canais são limitados ao intervalo válido; passe números de 0 a 255 ou porcentagens de 0% a 100% para obter o resultado esperado.
Perguntas frequentes
O que é o Conversor de Cores CSS?
É uma ferramenta no navegador que lê qualquer HEX, rgb()/rgba(), hsl()/hsla() ou nome de cor CSS comum e o converte em HEX, RGB e HSL junto com uma amostra ao vivo.
Como converto HEX para RGB e HSL com esta ferramenta?
Cole um código hex como #3b82f6 na caixa de cor, e o Conversor de Cores CSS mostra instantaneamente os valores rgb() e hsl() correspondentes nas linhas de resultado.
O Conversor de Cores CSS suporta transparência e canais alfa?
Sim. rgba(), hsla() e hex de 8 dígitos com valor alfa são todos interpretados, e o alfa é preservado em cada formato de saída.
Posso colar um nome de cor CSS em vez de um código?
Sim, nomes padrão como blue, teal, gold e indigo são reconhecidos e convertidos para HEX, RGB e HSL.
Ele aceita códigos hex abreviados?
Sim, hex abreviado de 3 e 4 dígitos como #f00 ou #f00a são expandidos automaticamente antes da conversão.
Os valores de cor que insiro são enviados para algum lugar?
Não. O Conversor de Cores CSS roda inteiramente no seu navegador, então os valores que você insere são processados localmente e nunca saem do seu dispositivo.
Ferramentas relacionadas
Verificador de contraste — Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
Formatador de CSS / SCSS — Embeleze ou minifique CSS/SCSS/LESS, ordene propriedades e remova duplicatas.
Otimizador de SVG — Minifique SVG: remova comentários, metadados e restos do editor, e colapse espaços.