Que tipo de entrada o Conversor de Cores aceita?

Ele recebe um código de cor HEX. Você pode colar com ou sem o

Ele converte RGB ou HSL de volta para HEX?

Por enquanto não. A ferramenta atual lê um código HEX e gera os valores equivalentes em RGB e HSL. Se você só tem RGB ou HSL, precisaria do HEX primeiro para usar este conversor.

Os valores RGB e HSL são adequados para CSS?

Sim. A saída já vem formatada pronta para colar no CSS, por exemplo rgb(43, 89, 255) e hsl(227, 100%, 58%). Os valores são arredondados para números inteiros, igual à forma como os navegadores os exibem.

Algum dado é enviado para um servidor?

Não. A conversão acontece inteiramente no seu navegador com cálculos locais, então seus códigos de cor nunca saem do dispositivo. Isso também significa que funciona offline depois que a página carrega.

Conversor de Cores

Escolha uma cor

Valor da cor

O que o Conversor de Cores faz

Informe um código de cor HEX e ele devolve a mesma cor escrita de três formas: HEX, RGB e HSL. Isso cobre os formatos que designers e desenvolvedores front-end mais usam. Pegou uma amostra como #2b59ff, mas sua variável CSS espera um valor rgb()? Cole aqui e copie a linha que você precisa. É prático para combinar cores de marca, preencher um token de design ou simplesmente conferir como um tom fica em HSL antes de ajustar sua luminosidade.

Como usar

Digite ou cole uma cor HEX na caixa de entrada. O # é opcional, e tanto o formato curto como #2bf quanto o completo como #2b59ff são aceitos.
Clique no botão Converter.
Leia a caixa de saída, que lista as versões HEX, RGB e HSL em linhas separadas.
Copie a linha que você precisa direto para sua folha de estilo ou arquivo de design.

Se você digitar algo que não seja um código HEX válido, a ferramenta avisa e mostra o formato esperado, então você nunca fica no escuro.

Por que converter cores aqui

É rápido. Não há etapa de upload nem espera, porque o cálculo acontece no instante em que você clica em Converter. Também é privado: a conta roda localmente no seu navegador, então seus códigos de cor ficam no dispositivo e a página continua funcionando mesmo sem conexão. E é gratuito, sem conta para criar. Veja mais utilitários na categoria dev.

A saída RGB e HSL já vem formatada do jeito que o CSS quer, com parênteses e sinais de porcentagem incluídos, então você cola sem precisar ajustar nada.

Uma dica rápida

Trabalhar em HSL facilita as variações de tom: converta seu HEX base e depois ajuste o último número (luminosidade) para cima ou para baixo, criando uma versão mais clara ou mais escura do mesmo tom sem perder o caráter da cor.

Perguntas frequentes

Que tipo de entrada o Conversor de Cores aceita?: Ele recebe um código de cor HEX. Você pode colar com ou sem o
Ele converte RGB ou HSL de volta para HEX?: Por enquanto não. A ferramenta atual lê um código HEX e gera os valores equivalentes em RGB e HSL. Se você só tem RGB ou HSL, precisaria do HEX primeiro para usar este conversor.
Os valores RGB e HSL são adequados para CSS?: Sim. A saída já vem formatada pronta para colar no CSS, por exemplo rgb(43, 89, 255) e hsl(227, 100%, 58%). Os valores são arredondados para números inteiros, igual à forma como os navegadores os exibem.
Algum dado é enviado para um servidor?: Não. A conversão acontece inteiramente no seu navegador com cálculos locais, então seus códigos de cor nunca saem do dispositivo. Isso também significa que funciona offline depois que a página carrega.