Conversor de cores CSS
Converta entre HEX, RGB e HSL com uma amostra ao vivo.
Toda cor que você insere é convertida localmente no seu navegador, e nada é enviado para um servidor.
Verificando legibilidade? Experimente o Contrast Checker.
Sobre Conversor de cores CSS
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.
Exemplo
Entrada
#3b82f6
Saída
HEX #3b82f6
RGB rgb(59, 130, 246)
HSL hsl(217, 91%, 60%)
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
Todas as ferramentas de ArrayKit