Ferramentas de Cor
Convert colors between HEX, RGB and HSL with a live preview — the quick way to grab the exact value you need for CSS and design.
Sobre Ferramentas de Cor
As ferramentas de cor resolvem um problema pequeno, mas constante: o valor que você tem não está no formato que você precisa. Um guia de marca dá um código hexadecimal, um arquivo de design informa RGB, uma variável CSS quer HSL, e em algum ponto no meio você tem que converter. Esta categoria tem quatro ferramentas exatamente para isso — o conversor de HEX para RGB para a conversão mais comum de todas, o conversor de cores mais amplo para transitar entre formatos, o verificador de contraste de cores para acessibilidade, e o gerador de tons de cor para montar uma paleta. Elas são voltadas a desenvolvedores front-end, designers e qualquer pessoa montando uma folha de estilo ou uma apresentação.
Escolher entre elas é simples. Se você tem um valor e precisa de outro, use o HEX para RGB quando essa for exatamente a direção que você quer, ou o conversor de cores geral quando você estiver indo no sentido inverso ou precisar de HSL. Vale a pena aprender o HSL aqui, porque é o formato que torna uma cor fácil de raciocinar: a matiz diz qual cor é ela, e ajustar apenas a luminosidade fornece um conjunto consistente de tons claros e escuros. Quando você precisa de uma faixa inteira em vez de um único valor — um estado de hover, um estado desabilitado, um fundo que fica discreto atrás do texto — o gerador de tons de cor faz isso em uma única etapa. E antes de publicar qualquer combinação de texto e fundo, passe-a pelo verificador de contraste de cores, que mede a razão de contraste para que você saiba se a sua combinação é confortavelmente legível ou apenas tecnicamente visível.
Todas as quatro ferramentas são gratuitas, não precisam de conta e rodam inteiramente no seu navegador — os seus valores de cor nunca são enviados, e a pré-visualização ao vivo se atualiza conforme você digita, sem uma ida e volta a um servidor. Isso as torna rápidas o suficiente para usar como um rascunho enquanto você trabalha: ajuste um valor, observe a amostra, copie o resultado. Se você está construindo CSS em vez de escolher valores, a categoria de geradores CSS tem um construtor de gradiente e um construtor de sombra de caixa que produzem código pronto para copiar, e a categoria de geradores inclui um gerador de cor aleatória se você só precisa de um ponto de partida.
Perguntas frequentes
Qual razão de contraste devo buscar?
A amplamente usada orientação WCAG pede uma razão de pelo menos 4,5 para 1 para texto de corpo normal e 3 para 1 para texto grande, com um valor mais rigoroso de 7 para 1 para o nível mais alto. O verificador de contraste mostra a razão para que você possa julgar em relação ao padrão que se aplica ao seu projeto.
HEX, RGB e HSL são intercambiáveis?
Para cores opacas comuns, sim. HEX e RGB descrevem o mesmo valor em notações diferentes, e HSL mapeia para as mesmas cores sRGB. O arredondamento ao converter para HSL e de volta pode deslocar um valor em um ponto ou dois, o que é invisível na prática, mas pode fazer dois códigos parecerem ligeiramente diferentes.
Estas ferramentas funcionam com transparência?
O alfa é expresso por formatos como RGBA, HSLA e hexadecimal de oito dígitos. Tenha em mente que a razão de contraste de uma cor semitransparente depende do que estiver atrás dela, então verifique a cor final mesclada em vez da transparente.
Meus dados de cor são armazenados em algum lugar?
Não. Todas as quatro ferramentas rodam no seu navegador, portanto nada do que você insere é enviado, salvo ou registrado. Elas são gratuitas, sem conta.