Conversor de cores — HEX, RGB, HSL e alfa
Converta uma cor sRGB compatível em HEX, RGB e HSL, com alfa. Confira o arredondamento: este não é um interpretador CSS completo nem garante correspondência entre telas.
Como converter
- Digite um HEX com # ou uma função rgb/rgba/hsl/hsla compatível. O exemplo preenche #33669980 sem converter; use ponto decimal.
- Clique em Converter. A cor não arredondada e o alfa independente geram cada formato separadamente; editar a entrada remove o resultado anterior.
- Copie um código ou as três linhas. Confira os avisos de arredondamento e do byte alfa; a amostra não é calibrada.
Canais e sintaxe
HEX3/4 duplica os dígitos; HEX6/8 usa bytes, com alfa no final. RGB aceita números de 0–255 ou porcentagens de 0–100%. A sintaxe moderna usa espaços e barra; a antiga usa vírgulas e não mistura números e porcentagens.
HSL usa graus, opcionalmente com deg, e porcentagens de saturação e luminosidade. A matiz dá voltas; luminosidade HSL não é luminância relativa. O cálculo usa sRGB codificado.
O alfa é independente dos canais RGB: alfa zero não apaga a cor nem a mistura com um fundo. Em HEX8, 0.5 vira o byte 128, ou 128/255.
Canais RGB iguais usam H=0 e S=0; não é possível recuperar uma matiz original única. Com croma diferente de zero, a matiz matemática é preservada sem limiar de tolerância.
Exemplos e arredondamento
#33669980 tem bytes 51, 102 e 153 e alfa 128/255. Os canais codificados 0.2, 0.4 e 0.6 resultam em HSL 210°, 50%, 40%; o alfa funcional é arredondado a 0.50196078.
hsl(210 100% 50% / .5) resulta em RGB 0, 127.5, 255. Os empates do canal e do alfa arredondam para cima: HEX #0080FF80, enquanto a função mantém alfa 0.5.
rgb(17 34 51 / 99.999999%) mantém alfa funcional 0.99999999, mas o byte arredonda para FF: #112233FF. Com 0.000001%, a função mantém 0.00000001 e o byte vira 00.
Limites
Antes de remover espaços, o texto admite 256 unidades UTF-16 e cada número, 16 caracteres ASCII. RGB numérico e alfa numérico aceitam 8 casas; porcentagens e HSL, 6. Expoentes não são aceitos; a matiz fica entre ±1000000°. Valores fora do intervalo são rejeitados.
Nomes, transparent, currentColor, none, comentários, variáveis, cálculos, outros espaços e unidades angulares não são aceitos. HSL exige porcentagens S/L. Parte dessa sintaxe é válida em CSS.
HEX arredonda ao byte mais próximo, com empates para cima; RGB e alfa funcional usam até 8 casas, HSL até 6. Matiz arredondada a 360 vira 0. Não há garantia de conversão reversa exata.
Não há conversão ICC, CMYK ou ampla gama, classificação de contraste nem certificação de correspondência. A amostra ilustra o RGB gerado; luminosidade HSL não é avaliação de acessibilidade.
Privacidade
O cálculo ocorre no navegador sem upload, conta, histórico, registro de entrada ou link com a cor adicionados pela ferramenta. A cópia é solicitada pelo usuário; se falhar, há texto somente leitura. Os demais serviços seguem as políticas do site.
Perguntas frequentes
Fontes e método
CSS Color 4 descreve os formatos e cálculos que contextualizam este conversor limitado.
- W3Cw3.orgNotação HEXQuantidade de dígitos, ordem dos canais e alfa em hexadecimal.
- W3Cw3.orgFunções RGBSintaxe dos canais RGB e alfa.
- W3Cw3.orgFunções HSLSintaxe de matiz, saturação e luminosidade.
- W3Cw3.orgValores alfaAlfa representa opacidade independentemente dos canais de cor.
- W3Cw3.orgHSL para RGBConversão entre HSL e componentes RGB codificados.
- W3Cw3.orgComponentes sem efeitoQuando um componente não afeta a cor, incluindo a matiz neutra.
Este conversor implementa um subconjunto limitado e sua própria política de arredondamento, não todo o CSS.
Ferramentas relacionadas
SVG para PNG
Converta um ficheiro SVG local ou código colado em PNG, com dimensões definidas, transparência e tipos de letra incluídos.
Abrir ferramenta — SVG para PNGGerador de filtros CSS
Ordene e repita efeitos CSS, compare uma amostra e copie a declaração exata.
Abrir ferramenta — Gerador de filtros CSSCalculadora de tamanho de fonte fluido
Defina o tamanho da fonte em duas larguras de janela. Copie o CSS com unidades relativas à raiz e confira o modelo calculado com os mesmos coeficientes exportados.
Abrir ferramenta — Calculadora de tamanho de fonte fluidoGerador de botão CSS
Personalize estados de botão nativo, confira o foco e copie HTML e CSS.
Abrir ferramenta — Gerador de botão CSSGerador CSS de border-radius
Edite oito raios, visualize uma caixa e copie o CSS em pixels ou porcentagens.
Abrir ferramenta — Gerador CSS de border-radiusGerador CSS Grid
Crie um exemplo de CSS Grid com trilhas, posições e áreas nomeadas. Veja a prévia, copie CSS ou HTML e baixe o exemplo completo.
Abrir ferramenta — Gerador CSS GridGerador CSS Flexbox
Crie um exemplo Flexbox com controles de contêiner e item, eixos de layout explícitos, CSS e HTML correspondentes e um download local de exemplo completo.
Abrir ferramenta — Gerador CSS FlexboxGerador CSS de sombra de texto
Crie sombras de texto ordenadas, visualize texto simples e copie o CSS exato.
Abrir ferramenta — Gerador CSS de sombra de textoGerador de transformação CSS
Componha transformações 2D CSS repetíveis, edite px ou conversão percentual e origem, inspecione uma caixa de referência e copie as declarações atuais exatas.
Abrir ferramenta — Gerador de transformação CSSGerador de sombra CSS
Crie camadas box-shadow ordenadas, visualize e copie o código CSS.
Abrir ferramenta — Gerador de sombra CSSMarca d’água em imagens
Adicione texto ou logotipo a imagens, confira os resultados e baixe arquivos individuais ou um ZIP.
Abrir ferramenta — Marca d’água em imagensGerador de gradiente CSS
Crie gradientes lineares ou radiais com cores, opacidade e pontos ajustáveis.
Abrir ferramenta — Gerador de gradiente CSSImagem para texto (OCR)
Reconheça texto impresso em PNG ou JPEG local, escolha o idioma e confira ou corrija antes de copiar ou baixar.
Abrir ferramenta — Imagem para texto (OCR)Leitor de QR Code em imagem
Leia um QR Code de um PNG ou JPEG local e examine o texto ou os bytes sem abrir links.
Abrir ferramenta — Leitor de QR Code em imagemVerificador de contraste de cores
Compare as cores do primeiro plano e do fundo, ajuste a opacidade e confira os limites numéricos de contraste WCAG para texto e detalhes essenciais da interface.
Abrir ferramenta — Verificador de contraste de coresCalculadora de tamanho de impressão e resolução
Calcule o tamanho da impressão, os pixels necessários e o PPI efetivo com margens ou corte.
Abrir ferramenta — Calculadora de tamanho de impressão e resoluçãoCalculadora de proporção de imagem
Calcule a proporção entre largura e altura ou novas dimensões em pixels a partir de um lado definido.
Abrir ferramenta — Calculadora de proporção de imagemCompressor de imagens
Tente ajustar um JPEG, PNG ou WebP ao tamanho de arquivo desejado, com resultado medido e opção de reduzir as dimensões.
Abrir ferramenta — Compressor de imagensHEIC para JPG
Converta fotos HEIC compatíveis localmente em JPGs no tamanho original, ajuste a qualidade e o fundo e baixe os resultados verificados individualmente ou em ZIP.
Abrir ferramenta — HEIC para JPGConversor de imagens
Converta imagens PNG, JPEG e WebP localmente, ajuste transparência, fundo e qualidade e baixe os resultados.
Abrir ferramenta — Conversor de imagensCriador de colagem de fotos
Organize fotos locais em uma grade e baixe em PNG ou JPEG.
Abrir ferramenta — Criador de colagem de fotosGirar e espelhar imagens
Gire ou espelhe um lote local de imagens estáticas PNG, JPEG e WebP e confira e baixe os resultados processados.
Abrir ferramenta — Girar e espelhar imagensCortar imagem
Corte um JPEG, PNG ou WebP local com precisão em pixels e baixe o resultado em PNG ou JPEG.
Abrir ferramenta — Cortar imagemRedimensionar imagem
Redimensione JPG, PNG ou WebP em pixels ou porcentagem, confira a prévia e baixe o resultado.
Abrir ferramenta — Redimensionar imagem