./prontouso.com

CONVERSORES

Conversor de Cores

Digite ou escolha uma cor e veja o resultado instantaneamente em HEX, RGB, HSL e HSB, cada um com seu próprio botão de copiar.

Status da ferramentaRoda no seu navegador
Prévia

Opções

Escolha uma cor, digite uma ou gere uma aleatória.

Resultados

Como funciona

  1. Informe os dados

    Preencha os valores, cole o texto ou envie o arquivo que esta ferramenta usa.

  2. Veja o resultado na hora

    A maioria das ferramentas atualiza enquanto você digita; algumas usam um único botão. De qualquer forma, o resultado aparece aqui mesmo.

  3. Use o resultado

    Copie, baixe ou compartilhe o que a ferramenta gerar — o controle é sempre seu.

Privacidade e processamento — Roda localmente no seu navegador. Esta ferramenta não faz upload da sua entrada.

O que é Conversor de Cores?

O Conversor de Cores é uma ferramenta para converter uma cor entre HEX, RGB, HSL e HSB, mantendo alfa quando possível e facilitando o uso em CSS, design e documentação.

ENTENDA A FERRAMENTA

Como converter cores entre formatos

Use este guia para entender HEX, RGB, HSL e HSB, colar valores existentes e copiar o formato certo para design ou código.

Os formatos explicados

  • HEX representa vermelho, verde e azul como três pares de dígitos hexadecimais, com um quarto par opcional para o alfa.
  • RGB lista vermelho, verde e azul como números de 0 a 255.
  • HSL descreve uma cor por matiz, saturação e luminosidade, geralmente mais intuitivo para escolher um tom.
  • HSB (também chamado de HSV) é parecido com o HSL, mas usa brilho em vez de luminosidade, como funcionam muitos seletores de cor em ferramentas de design.

Digitando uma cor diretamente

O campo de texto aceita HEX (#335A9C ou #335A9C80 com alfa), rgb()/rgba() e hsl()/hsla(). Um valor inválido continua no campo para você seguir editando, enquanto a amostra e os resultados continuam mostrando a última cor válida.

Como usar

  • Escolha uma cor, digite uma diretamente ou clique em Cor aleatória.
  • Leia o valor convertido em qualquer um dos quatro campos de formato.
  • Escolha Copiar ao lado do formato que precisar.

Exemplo de conversão

HEX para RGB, HSL e HSB

#335a9c é lido como 51 vermelho, 90 verde e 156 azul, depois formatado nos outros modelos de cor. Alpha aparece só quando a entrada inclui transparência.

#335a9c -> rgb(51, 90, 156) -> hsl(218, 51%, 41%)

Notas de formato de cor

O alfa é preservado nos formatos que o suportam. HSB entra para comparação com ferramentas de design, enquanto CSS normalmente usa HEX, RGB(A) ou HSL(A).

Perguntas frequentes

Isso suporta transparência?

Sim. Um valor HEX de 8 dígitos ou um rgba()/hsla() com canal alfa é interpretado e refletido em todos os formatos que o suportam.

Por que o seletor de cor só mostra HEX?

O seletor de cor nativo do navegador só funciona com valores HEX opacos. O alfa é preservado separadamente e mostrado nos campos RGB(A) e HSL(A).

Qual a diferença entre HSL e HSB?

Os dois descrevem matiz e saturação da mesma forma. O terceiro valor do HSL é luminosidade, onde 50% é a versão mais pura da matiz; o terceiro valor do HSB é brilho, onde 100% é a versão mais pura. A mesma cor tem números diferentes em cada um.

Posso colar HEX curto como #369?

Sim. HEX de três dígitos é expandido para seis, então #369 vira #336699. Use HEX de oito dígitos quando também precisar de alfa.

Ferramentas relacionadas