Conversor de cores — HEX para RGB para HSL online

Cole uma cor em qualquer formato — HEX, RGB ou HSL — e obtenha instantaneamente os três formatos, além de uma amostra de pré-visualização em tempo real. Também pode selecionar uma cor visualmente com o seletor de cores integrado. Perfeito para transferir cores entre CSS, ferramentas de design e código.

O que é esta ferramenta?

As cores na Web são representadas em vários formatos equivalentes. O formato HEX (#4f46e5) é a forma compacta utilizada em todo o lado no CSS e nas entregas de projetos de design. O formato RGB (rgb(79, 70, 229)) indica diretamente os componentes de vermelho, verde e azul, o que é frequentemente necessário na programação. O HSL (hsl(243, 75%, 59%)) descreve a matiz, a saturação e a luminosidade — o formato mais intuitivo para ajustar uma cor, por exemplo, tornando-a mais escura ou menos saturada.

Todas elas descrevem a mesma cor; esta ferramenta faz a conversão entre elas com precisão e apresenta uma pré-visualização para que possa confirmar se é mesmo a cor que pretendia.

Por que usar?

Aceita qualquer formato de entrada — HEX (3 ou 6 dígitos), RGB ou HSL — e gera resultados em todos os formatos.
Amostra de pré-visualização em tempo real para que possa ver a cor, e não apenas números.
Seletor de cores visual para quando preferir escolher a olho nu.
Cópia com um clique por formato, pronta para CSS ou código.
Gratuito, instantâneo, sem necessidade de fazer upload.

Como usar

Digite ou cole uma cor: #4f46e5, rgb(79, 70, 229) ou hsl(243, 75%, 59%) — todas funcionam.
Ou clique no seletor de cores e escolha visualmente.
Leia os três formatos apresentados nos resultados e verifique a amostra de pré-visualização.
Clique em «Copiar» ao lado do formato que precisa.

Exemplo

Entrada

#4f46e5

Resultado

HEX: #4f46e5
RGB: rgb(79, 70, 229)
HSL: hsl(243, 75%, 59%)

Três notações, uma cor idêntica.

Que formato deve utilizar?

As três expressões descrevem exatamente a mesma cor — a escolha depende de qual delas é mais fácil de utilizar para a tarefa em questão, e não da precisão.

Formato	Ideal para	Porquê
Hexadecimal (#4f46e5)	CSS, transferência de designs, copiar e colar rapidamente	O mais rápido de escrever e colar; o formato universal em ferramentas de design como o Figma.
Vermelho, Verde, Azul (79, 70, 229)	Código que manipula canais diretamente, trabalho com canvas/imagens	Corresponde à forma como as APIs gráficas e os dados de píxeis das imagens armazenam efetivamente a cor.
HSL (hsl(243,75%,59%))	Ajustar uma cor — mais clara, mais escura, mais ou menos saturada	A luminosidade e a saturação são valores distintos que pode ajustar diretamente, ao contrário do HEX/RGB, em que todos os canais se alteram em simultâneo.

Casos de utilização comuns

Escolher uma cor visualmente numa ferramenta de design e, em seguida, convertê-la para o valor HEX ou RGB exato necessário no CSS ou no código.
Gerar um conjunto de tons relacionados (variantes mais claras/mais escuras) através da conversão para HSL, do ajuste da luminosidade e da conversão de volta.
Harmonizar a cor de uma marca em diferentes ferramentas, cada uma das quais requer um formato distinto — um arquivo de logótipo em RGB, um guia de estilo em HEX, uma variável CSS que necessita de HSL para a personalização do tema.
Verificar se uma cor extraída de uma captura de tela ou de um arquivo de design (geralmente indicada em RGB) corresponde ao valor HEX numa folha de estilos.

Perguntas frequentes

Quando devo utilizar o HSL em vez do HEX ou do RGB?

Quando se pretende analisar uma cor. Tornar uma cor 10% mais escura no HSL significa reduzir a luminosidade em 10 pontos; no HEX ou no RGB, seria necessário recalcular todos os canais. Os sistemas de design definem frequentemente as paletas no HSL precisamente por esta razão.

A ferramenta suporta valores HEX de 3 dígitos, como #fff?

Sim. #fff é uma forma abreviada de #ffffff — cada dígito é duplicado. Ambas as formas são aceites e o resultado apresenta a forma completa de 6 dígitos.

E quanto ao alfa (transparência)?

Esta ferramenta converte cores opacas (os valores RGB/HSL). Se precisar de transparência, adicione você mesmo o alfa: rgba(79, 70, 229, 0,5) ou #4f46e580 — a parte da cor permanece a mesma.

Por que razão os meus valores de HSL diferem em 1 dos de outra ferramenta?

Arredondamento. A conversão HSL↔RGB produz valores fracionários, e as ferramentas arredondam de forma diferente. Uma diferença de ±1 na matiz ou na porcentagem é impercetível e normal.

Os nomes de cores como «vermelho» são suportados?

Não na Fase 1 — a ferramenta centra-se nos três formatos numéricos que os programadores mais utilizam. Insira o valor HEX/RGB/HSL da cor ou selecione-a visualmente com o seletor.

Conversor de cores HEX / RGB / HSL