Conversor de HEX para RGB

Converta códigos de cor HEX e hexadecimais em valores RGB, RGBA, HSL e CSS na hora, direto no navegador.

Privado por padrão — a conversão de cores acontece no seu navegador

Área de trabalho do conversor de cores

Insira ou edite uma cor

Compatível com #RGB, #RGBA, #RRGGBB e #RRGGBBAA.

Prévia da cor #FF8C42
preview.html

Uma cor se torna útil quando você pode vê-la no contexto.

Valores de cor convertidos

Pronto — insira ou edite uma cor.

Prévia do contraste

Um texto legível deve continuar nítido sobre o fundo.

Relação de contraste 7.75:1
Texto normal AA Atende Texto grande AA Atende

O contraste é calculado depois que a transparência é composta sobre o fundo.

Converta cores HEX e hexadecimais para RGB

Use este conversor de HEX para RGB quando um design fornecer um código de cor hexadecimal, mas o seu fluxo de trabalho com CSS, JavaScript, canvas ou gráficos precisar dos canais vermelho, verde e azul. Insira um valor HEX de 3, 4, 6 ou 8 dígitos, e a conversão de hexadecimal para RGB aparece na hora. O alfa é preservado quando o código inclui transparência. Por exemplo, #ff8c42 é convertido em rgb(255, 140, 66) e hsl(23, 100%, 63%).

Como usar este conversor HEX

  1. Insira uma cor HEX, RGB(A) ou HSL(A), ou escolha uma cor visualmente.
  2. Edite qualquer campo; os resultados HEX, RGB e HSL, o alfa, a prévia e o contraste permanecem sincronizados.
  3. Copie um valor, a propriedade personalizada CSS, todos os formatos ou um link de compartilhamento.

Como todos os formatos são editáveis, a página também funciona como conversor RGB quando você começa com rgb() ou rgba(). Use-a como conversor de código HEX para trechos CSS ou como um conversor de código de cor mais amplo ao levar valores de uma ferramenta de design para outra de desenvolvimento.

Converta HEX para HSL sem perder a transparência

HSL descreve a mesma cor por matiz, saturação e luminosidade, que podem ser mais fáceis de ajustar do que os canais RGB individuais. O resultado de HEX para HSL preserva o alfa de uma entrada #RGBA ou #RRGGBBAA e gera HSLA quando a transparência é menor que 100%. Editar HSL atualiza os valores HEX e RGB correspondentes a partir do mesmo estado de cor, evitando desvios de conversão entre os campos.

HEX, RGB e HSL: qual formato você deve usar?

HEX é compacto e comum em variáveis CSS e especificações de design. RGB expõe os canais individuais vermelho, verde e azul para JavaScript, canvas e APIs gráficas. HSL é prático ao ajustar matiz, saturação ou luminosidade. Esses formatos descrevem a mesma cor com notações diferentes, embora os números exibidos possam variar um pouco por causa do arredondamento.

Como funcionam os códigos de cores hexadecimais

Um código de cor hexadecimal é a forma compacta como o RGB é escrito na programação: dois dígitos hexadecimais por canal, de 00 a FF (0 a 255 em decimal), então #FF8C42 é vermelho FF, verde 8C, azul 42. Valores hexadecimais usam os dígitos 0-9 e as letras A-F, os números hexadecimais não diferenciam maiúsculas de minúsculas, e as cores em hexadecimal também podem ter um quarto par para o alfa. Uma pequena tabela hexadecimal ajuda na leitura de RGB em hexadecimal: #000000 é preto, #FFFFFF é branco, #FF0000 vermelho, #00FF00 verde, #0000FF azul e #808080 cinza médio. O conversor exibe o código hexadecimal, o código de cor RGB e o HSL lado a lado, de modo que a conversão de cor de RGB para hexadecimal e de hexadecimal para RGB não precisa de tabela de consulta.

Verifique o contraste do texto antes de usar uma cor

A pré-visualização compara a cor de primeiro plano selecionada com um fundo e informa sua taxa de contraste após a composição alfa. Use-a como uma verificação rápida ao converter uma cor, não como uma auditoria de acessibilidade completa: tamanho da fonte, peso, estados de interação, bordas, ícones, gradientes e a página renderizada ainda precisam de revisão. Para os limites AAA, de texto grande e de não texto com alternativas acessíveis, abra o verificador de contraste de cores completo.

Conversão privada de cores no seu navegador

A análise, a conversão, o cálculo de contraste e as ações de cópia acontecem nesta aba do navegador. Nenhuma cor é enviada para uma API de conversão, e não é necessário cadastro. Se você criar um link de compartilhamento, a cor selecionada será incluída intencionalmente nesse link para que o mesmo estado possa ser reaberto.

Perguntas frequentes

Como converter uma cor HEX para RGB?

Insira a cor no campo HEX. Os valores RGB e HSL, o alfa, a variável CSS e a prévia são atualizados imediatamente. Por exemplo, #ff8c42 é convertido em rgb(255, 140, 66).

Quais formatos de cor HEX são compatíveis?

O conversor é compatível com #RGB, #RGBA, #RRGGBB e #RRGGBBAA. Os formatos de 4 e 8 dígitos incluem transparência alfa no último dígito ou par.

Posso converter RGB ou HSL de volta para HEX?

Sim. Edite o campo RGB, RGBA, HSL ou HSLA, e o valor HEX equivalente será atualizado automaticamente. Todos os formatos exibidos são derivados da mesma cor RGBA subjacente.

Como HEX é convertido para HSL?

Primeiro, o conversor transforma o valor HEX em canais RGB e depois calcula matiz, saturação e luminosidade a partir do intervalo dos canais. Apenas os valores exibidos são arredondados, mantendo todos os campos sincronizados.

Meus códigos de cor são enviados ou armazenados?

Nenhuma cor é enviada para um serviço de conversão. A conversão e a cópia rodam localmente no seu navegador. Um link de compartilhamento inclui a cor selecionada somente quando você o cria explicitamente.

O que significa RGB em um código HEX?

RGB significa vermelho, verde e azul, os três canais de luz que uma tela mistura para exibir uma cor. Um código HEX de seis dígitos escreve esses mesmos três canais em hexadecimal, dois dígitos cada, na ordem vermelho-verde-azul; um código HEX de oito dígitos adiciona um quarto par para o alfa (opacidade).

Leve a cor para uma página da web funcional

O Phoenix Code oferece edição de HTML e CSS, busca em todo o projeto, Git e Live Preview em um editor de código completo para navegador ou desktop.