Conversor de cor

Converta entre HEX, RGB, HSL

Pré-visualização

HEX

#0ea5e9

RGB

rgb(14, 165, 233)

HSL

hsl(199, 89%, 48%)

Tailwind arbitrary

[#0EA5E9]

Editar RGB

Editar HSL

H (0-360)

S (%)

L (%)

Como funciona

Conversor de cor — Converta entre HEX, RGB, HSL. Todo o processamento acontece no seu navegador — sem upload, sem cadastro, sem e-mail. Grátis para sempre.

Última atualização: 2026-05-06

Editor's note

Usamos esta mais em hand-offs de design do que qualquer outra coisa. Designers pensam em matiz, saturação e luminosidade — falam coisas como "um pouquinho mais quente" ou "baixa a saturação um nível". Desenvolvedores pensam em HEX, porque é o que termina no stylesheet. O descompasso devora uma quantidade deprimente de Slack. Por isso colocamos HEX, RGB e HSL no mesmo painel com uma amostra ao vivo, porque a forma mais rápida de encerrar "esse é o verde-azulado certo" é apontar para a cor juntos.

A saída de "arbitrary value" do Tailwind é a parte que não esperávamos usar tanto quanto usamos. Começou como uma pequena conveniência — copiar bg-[#1F2937] de uma vez — e virou silenciosamente a forma padrão de entregar tons únicos que não merecem entrada no config. Resistimos a adicionar uma feature de paleta curada. Curadoria de paleta é um problema de design de verdade e esta ferramenta não é onde ele se resolve; aqui só convertemos o que você já escolheu.

Sobre Conversor de cor

O Conversor de Cor transforma qualquer valor de cor entre representações HEX, RGB e HSL e mostra o resultado lado a lado. Ele também gera uma string Tailwind "arbitrary value" pronta para colar em um className. Conversão HEX RGB é uma das tarefas mais comuns no front-end — esta ferramenta elimina a etapa da calculadora.

Designers a usam para traduzir cores de marca de um arquivo Figma para CSS, desenvolvedores para depurar um tom inesperado e revisores de acessibilidade para verificar se uma cor é lida corretamente quando expressa em HSL para ajustar a luminosidade.

Tudo acontece no seu navegador. Sua paleta, cores de marca e protótipos nunca tocam um servidor remoto.

Como usar Conversor de cor

Clique no swatch de cor para abrir o seletor de cores do sistema operacional, ou digite um valor HEX diretamente.
Use os campos numéricos RGB para ajustar finamente os canais vermelho, verde e azul (0-255 cada).
Mude para o editor HSL para ajustar matiz (0-360), saturação e luminosidade — útil quando você precisa de uma variante levemente mais escura ou quente.
Observe o painel de Pré-visualização para uma renderização instantânea da cor em tamanho real.
Use os botões de copiar ao lado de HEX, RGB, HSL ou Tailwind arbitrary value para enviar diretamente à área de transferência.

Casos de uso comuns

Converter uma cor de marca da especificação HEX do designer no formato rgb() esperado pela sua solução CSS-in-JS.
Gerar strings de classes Tailwind arbitrárias como bg-[#1f2937] sem sair do navegador.
Ajustar o estado hover de um botão movendo a luminosidade em HSL enquanto mantém o matiz constante.
Verificar se um código hex enviado no e-mail de um stakeholder corresponde à cor que ele realmente tinha em mente.
Construir uma variante para o modo escuro lendo o HSL de uma cor clara e reduzindo a luminosidade.

Dicas e erros comuns

HSL é muito mais intuitivo que RGB para ajustar brilho ou saturação — tente editar HSL quando quiser um "azul levemente mais escuro".
Códigos hex podem ter 3 ou 6 dígitos. A forma de 3 dígitos (#abc) expande para #aabbcc, então #f00 e #ff0000 são idênticos.
Ao colar do Figma, atenção aos bytes alpha no final (por exemplo, #1f2937FF). Remova o alpha antes de colar se sua ferramenta espera hex opaco.
Para checagens de acessibilidade, gere dois valores HSL e compare a diferença de luminosidade — pelo menos 50% de diferença em L é uma regra segura para texto corrido.

Perguntas frequentes

Quais espaços de cor são suportados?

HEX, RGB e HSL. Também geramos um formato 'Tailwind arbitrary value' para colar direto nos class names.

Posso salvar uma paleta?

Ainda não. Por enquanto, use os botões de copiar para enviar cada valor à área de transferência. Salvar paletas está no roadmap.

Os canais alfa são tratados?

Atualmente não. Focamos em cores opacas; suporte a HEX-A e RGBA está planejado.

Por que RGB(255, 0, 0) e HSL(0, 100%, 50%) produzem a mesma cor?

Eles descrevem o mesmo ponto no espaço de cores, apenas a partir de eixos diferentes. RGB define proporções de mistura das primárias de luz; HSL descreve matiz, saturação e luminosidade. Os dois levam ao vermelho puro.

Posso colar um nome de cor como "crimson" ou "rebeccapurple"?

Não diretamente. Os navegadores mapeiam ~140 cores nomeadas do CSS para valores hex específicos — pesquise o nome no seu editor e cole o equivalente em hex aqui.

Como aparece a saída Tailwind arbitrary value?

Algo como [#1F2937] — envolva em qualquer classe Tailwind como text-[#1F2937], bg-[#1F2937] ou border-[#1F2937] para usar a cor exata sem precisar estender o tailwind.config.js.