Conversor de cores

Uma cor, três dialetos

Em um dia de trabalho normal, a mesma cor chega em três fantasias: o manual de marca te dá um código HEX, um canvas ou uma biblioteca de gráficos quer os números RGB, e o CSS moderno é mais gostoso de ajustar em HSL. Esta página mantém os três sincronizados — digite no campo que corresponde ao que você recebeu, e os outros dois se reescrevem enquanto você digita, com a amostra mostrando como os números realmente ficam. O HEX abreviado também funciona: cole #f80 e ele se expande para #ff8800, exatamente como um navegador leria. Não há seletor de cores para brigar; o objetivo aqui é traduzir um valor que você já tem, com precisão.

Construindo uma paleta com HSL

O HSL se justifica no momento em que você precisa de variações de uma cor, e não da cor em si. Mantenha o matiz fixo e mexa só na luminosidade: baixe dez pontos para um estado de hover, suba quarenta para um fundo com tonalidade, e cada variante continua reconhecivelmente a mesma cor — algo quase impossível de fazer editando os dígitos do HEX diretamente. Reduzir a saturação dá a versão dessaturada e acinzentada, que funciona bem para botões desativados e bordas discretas. Como os campos se atualizam mutuamente ao vivo, um fluxo de trabalho rápido é colar o HEX da sua marca, ler o HSL, ajustar um número e copiar o HEX renovado de volta — uma pequena paleta em menos de um minuto, sem nenhum software de design envolvido.

Limites honestos, e um truque vizinho

Há duas coisas que este conversor deliberadamente não faz. Ele não tem canal alfa — o campo RGB fala rgb(), não rgba() — então a transparência é algo que você adiciona depois no seu CSS, onde ela pertence. E os valores de HSL são arredondados para números inteiros, para facilitar a leitura, o que significa que uma ida e volta de HEX para HSL e de volta para HEX pode desviar em um único ponto; invisível na tela, mas vale a pena saber se você compara arquivos de estilo. A ferramenta é gratuita e sem limites, como todas as nossas ferramentas de desenvolvedor. Uma combinação que vale a pena lembrar: assim que esta página te disser exatamente qual cor é o fundo de um logotipo, a nossa ferramenta de transparência de imagem pode remover exatamente essa cor da imagem — um bom passo a passo em dois tempos ao preparar gráficos para um site.

Três formas de descrever a mesma cor

HEX e RGB descrevem uma cor pela intensidade de luz vermelha, verde e azul (só que em notações diferentes) — o HSL a descreve, em vez disso, por matiz, saturação e luminosidade, o que costuma ser mais intuitivo para escolher ou ajustar um tom manualmente.