Ir para o conteúdo principal
Bethemesh
Imagens e gráficos

Conversor de cores

Passe rapidamente de uma notação de cor para outra entre HEX, RGB e HSL e obtenha os valores correspondentes para os seus projetos Web.

  • Área de transferência

Integrar este widget

Personalize o resultado, verifique a pré-visualização e copie o código.

Pré-visualização

Tipo de código de integração

Código a copiar

Responsivo e redimensionado automaticamente pela Bethemesh.

Cor

Código HEX (#3366FF, #36F), rgb(51, 102, 255) ou hsl(225, 100%, 60%), com transparência opcional.

Resultado

Esta ferramenta foi útil?

Como funciona esta ferramenta?

A mesma cor pode escrever-se de várias formas em CSS: #3366FF, rgb(51, 102, 255) ou hsl(225, 100%, 60%). Este conversor lê qualquer uma destas notações e mostra de imediato as outras duas, transparência incluída, para passar de uma maqueta ao código, uniformizar uma folha de estilos ou descobrir o tom e a luminosidade de um código hexadecimal.

Introduza uma cor no campo: código HEX com 3, 4, 6 ou 8 dígitos (#36F, #3366FF80), rgb() ou rgba() com vírgulas ou espaços, ou hsl() e hsla() com o tom em graus, voltas (turn) ou radianos. Também pode clicar na amostra para escolher uma cor no seletor do sistema.

A conversão é imediata. O HEX aparece em maiúsculas, o RGB em inteiros de 0 a 255 e o HSL com uma casa decimal no máximo. Uma transparência inferior a 100 % acrescenta um quarto byte ao código HEX e dá rgba() e hsla(). Os valores fora do intervalo são ajustados ao limite: rgb(300, 0, 0) passa a rgb(255, 0, 0).

Cada resultado tem o seu botão Copiar. Os nomes de cores CSS como «red» ou «navy» não são reconhecidos: introduza o respetivo código.

Como usar esta ferramenta

  1. Introduza a cor

    Escreva um código HEX, um valor rgb() ou hsl(), ou escolha-a no seletor.

  2. Leia as equivalências

    Os campos HEX, RGB e HSL atualizam-se a cada tecla; uma mensagem assinala uma entrada não reconhecida.

  3. Copie o resultado

    Clique no ícone Copiar ao lado da notação de que precisa.

De RGB para HSL

Os três canais são levados para 0–1; o máximo M, o mínimo m e a diferença Δ = M − m dão a luminosidade, a saturação e o tom.

Luminosidade

L = (M + m) ÷ 2

Média do canal mais forte e do mais fraco.

Saturação

S = Δ ÷ (1 − |2L − 1|)

Nula quando os três canais são iguais (cinzento).

Tom

H = 60° × ((G − B) ÷ Δ mod 6, (B − R) ÷ Δ + 2 ou (R − G) ÷ Δ + 4)

A fórmula depende do canal mais forte; o resultado é levado para 0–360°.

R, G, B
canais vermelho, verde e azul divididos por 255
M, m
maior e menor dos três canais
Δ
diferença M − m

Casos de uso

Da maqueta ao CSS

Converta o código HEX de uma maqueta em hsl() para criar facilmente variantes mais claras ou mais escuras.

Uniformizar uma folha de estilos

Torne coerentes cores escritas umas vezes em HEX e outras em rgb() no mesmo projeto.

Perceber uma cor

Leia o tom, a saturação e a luminosidade de um código para perceber porque parece baça ou demasiado viva.

Exemplos

Um azul de marca em três notações

33, 66 e FF em hexadecimal valem 51, 102 e 255. O azul domina: tom 225°, saturação máxima, luminosidade 60 %.

Entrada

#3366FF

Resultado

HEX #3366FF; RGB rgb(51, 102, 255); HSL hsl(225, 100%, 60%)

Uma cor HSL com transparência

A cor HSL é convertida em canais de 0 a 255 arredondados e a opacidade de 50 % passa a ser o byte 80 em hexadecimal (128 em 255).

Entrada

hsl(210 70% 50% / 50%)

Resultado

HEX #2680D980; RGB rgba(38, 128, 217, 0.5); HSL hsla(210, 70%, 50%, 0.5)

Dicas e boas práticas

  • Para clarear ou escurecer uma cor sem mudar o tom, passe para HSL e altere apenas a luminosidade.
  • Um código HEX de 3 dígitos duplica cada dígito: #36F equivale a #3366FF.
  • O HEX de 8 dígitos (#RRGGBBAA) funciona nos navegadores atuais, mas alguns programas de design só aceitam 6 dígitos.
  • Converter HSL em HEX arredonda os canais a inteiros: dois valores HSL muito próximos podem dar o mesmo código HEX.

Fontes e referências

Perguntas frequentes

Que notações posso introduzir?

HEX com 3, 4, 6 ou 8 dígitos, com ou sem #, rgb() e rgba(), hsl() e hsla(), com vírgulas ou com a sintaxe moderna de espaços e «/» para a opacidade.

Nomes de cores como «tomato» são aceites?

Não. Só são lidas notações numéricas; procure o código HEX do nome da cor e introduza-o.

Porque é que o tom vale 0 num cinzento?

Um cinzento não tem tom: os três canais são iguais, a saturação é nula e o tom é fixado em 0 por convenção.

Como é convertida a transparência?

A opacidade de 0 a 1 é multiplicada por 255 e forma o quarto byte do código HEX: 0,5 dá 80 e, com 1, o byte é omitido.

A conversão é exata?

HEX e RGB são equivalentes bit a bit. O HSL é calculado sem arredondamentos intermédios e mostrado com uma casa decimal; a passagem para HEX arredonda cada canal a inteiro.

A cor é enviada para algum lado?

Não. A conversão é um cálculo feito no seu navegador, sem qualquer pedido de rede.

Ferramentas relacionadas

Continue com estas ferramentas

Ferramentas semelhantes ou complementares a esta.

Ferramentas semelhantes

Gerador de paleta de cores

Crie uma paleta complementar, análoga, triádica ou monocromática a partir de uma cor.

Imagens e gráficosUtilizar esta ferramenta

Extrator de cores de imagem

Extraia uma paleta dominante de uma imagem sem a enviar para um servidor.

Imagens e gráficosUtilizar esta ferramenta

Simulador de daltonismo

Visualize uma imagem como pode ser percecionada com diferentes tipos de daltonismo.

Imagens e gráficosUtilizar esta ferramenta

Leia também

ReferênciaConceitos e tecnologiasIniciante

RGB, HEX ou HSL: que notação escolher?

Compreenda como RGB, HEX e HSL descrevem cores sRGB para escolher uma notação CSS legível e converter valores sem confusão.

31 de agosto de 20263 min
GuiaBoas práticasIniciante

Contraste WCAG: como tornar as cores acessíveis?

Compreenda os limites de contraste WCAG, meça uma combinação de cores e corrija casos que dificultam leitura ou utilização da interface.

31 de agosto de 20263 min
GuiaFormatosIniciante

SVG: compreender o formato vetorial

Descubra como um ficheiro SVG descreve formas, utiliza viewBox e se integra numa página Web, com boas práticas de responsive, acessibilidade e segurança.

31 de agosto de 20263 min