Lugares Favoritos da Sua Cidade Favorita
Início
Adicionar às fontes preferidas no Google

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.

Conversor de cores

Alfa: 100%

Digite uma cor HEX, RGB ou HSL

Resultado

Digite uma cor compatível.

A conversão ocorre no navegador sem uploads ou histórico adicionados pela ferramenta. A área de transferência é usada somente quando solicitada. Outros serviços seguem as políticas do site.

Como converter

  1. Digite um HEX com # ou uma função rgb/rgba/hsl/hsla compatível. O exemplo preenche #33669980 sem converter; use ponto decimal.
  2. Clique em Converter. A cor não arredondada e o alfa independente geram cada formato separadamente; editar a entrada remove o resultado anterior.
  3. 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

A ferramenta aceita apenas um subconjunto de valores HEX/RGB/HSL; rejeição não significa CSS inválido.

0.5 × 255 = 127.5 arredonda para 128, ou 80 em hexadecimal; 128/255 não é exatamente 0.5.

Não. Os canais RGB permanecem separados do alfa.

O cinza não tem matiz única; perto de 360°, o arredondamento também pode gerar 0°, com aviso.

O código CSS usa dígitos ASCII e ponto. Copiar tudo usa prefixos HEX, RGB e HSL, linhas LF e nenhuma quebra final.

Não. É uma coordenada do modelo, não luminância relativa, brilho percebido ou avaliação de acessibilidade.

Fontes e método

CSS Color 4 descreve os formatos e cálculos que contextualizam este conversor limitado.

Este conversor implementa um subconjunto limitado e sua própria política de arredondamento, não todo o CSS.

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 PNG

Gerador de filtros CSS

Ordene e repita efeitos CSS, compare uma amostra e copie a declaração exata.

Abrir ferramenta — Gerador de filtros CSS

Calculadora 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 fluido

Gerador de botão CSS

Personalize estados de botão nativo, confira o foco e copie HTML e CSS.

Abrir ferramenta — Gerador de botão CSS

Gerador CSS de border-radius

Edite oito raios, visualize uma caixa e copie o CSS em pixels ou porcentagens.

Abrir ferramenta — Gerador CSS de border-radius

Gerador 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 Grid

Gerador 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 Flexbox

Gerador 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 texto

Gerador 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 CSS

Gerador de sombra CSS

Crie camadas box-shadow ordenadas, visualize e copie o código CSS.

Abrir ferramenta — Gerador de sombra CSS

Marca 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 imagens

Gerador de gradiente CSS

Crie gradientes lineares ou radiais com cores, opacidade e pontos ajustáveis.

Abrir ferramenta — Gerador de gradiente CSS

Imagem 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 imagem

Verificador 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 cores

Calculadora 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ção

Calculadora 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 imagem

Compressor 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 imagens

HEIC 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 JPG

Conversor de imagens

Converta imagens PNG, JPEG e WebP localmente, ajuste transparência, fundo e qualidade e baixe os resultados.

Abrir ferramenta — Conversor de imagens

Criador de colagem de fotos

Organize fotos locais em uma grade e baixe em PNG ou JPEG.

Abrir ferramenta — Criador de colagem de fotos

Girar 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 imagens

Cortar imagem

Corte um JPEG, PNG ou WebP local com precisão em pixels e baixe o resultado em PNG ou JPEG.

Abrir ferramenta — Cortar imagem

Redimensionar imagem

Redimensione JPG, PNG ou WebP em pixels ou porcentagem, confira a prévia e baixe o resultado.

Abrir ferramenta — Redimensionar imagem
Ver todas as ferramentas desta categoria