🎨 Seletor de Cores
Selecione uma cor e obtenha instantaneamente valores HEX, RGB e HSL.
O que é esta ferramenta?
Um seletor de cores é um utilitário que lhe permite escolher uma cor a partir de uma paleta visual e ver instantaneamente os seus valores nos três formatos de cor mais comuns usados na web: HEX, RGB e HSL. Designers, desenvolvedores e artistas movem-se constantemente entre estas representações porque diferentes ferramentas e contextos esperam diferentes formatos. As folhas de estilo CSS frequentemente aceitam qualquer um dos três, mas software de design como Figma ou Photoshop pode exibir HEX por defeito, enquanto bibliotecas de visualização de dados frequentemente pedem tuplos RGB ou HSL. Esta ferramenta preenche essas lacunas mostrando os três valores lado a lado e mantendo-os sincronizados enquanto ajusta a cor, para que nunca tenha de procurar um conversor separado. A entrada de cor integrada abre o seletor nativo do seu sistema operativo, que suporta uma seleção fina em todo o espetro, enquanto o campo HEX manual lhe permite colar um código existente para o inspecionar ou converter. A grande amostra de pré-visualização mostra a cor exata num tamanho generoso para que a possa julgar com precisão, e os botões de copiar com um clique enviam cada valor para a sua área de transferência pronto a colar numa folha de estilo, biblioteca de componentes ou ficheiro de design. Como as conversões são realizadas com matemática padrão de espaço de cor, os valores são precisos e consistentes entre navegadores. Esteja a construir uma paleta de marca, a escolher uma cor de destaque para um botão ou a traduzir o código HEX de um designer no HSL que a sua biblioteca de gráficos precisa, esta ferramenta dá-lhe o valor certo no formato certo sem qualquer atrito.Como funciona
A ferramenta mantém uma única fonte de verdade para a cor atual e converte-a entre formatos sempre que a fonte muda. Quando usa a entrada de cor visual, o navegador retorna uma string HEX como #3b82f6, que a ferramenta lê e divide nos seus componentes vermelho, verde e azul analisando os pares hexadecimais. Esses três valores, cada um variando de zero a duzentos e cinquenta e cinco, formam o tuplo RGB que é exibido. Para produzir a representação HSL, a ferramenta normaliza os canais RGB para um intervalo de zero a um e encontra os valores máximo e mínimo para calcular a luminosidade, depois deriva a saturação da diferença entre eles, e finalmente calcula a matiz como um ângulo em torno da roda de cores baseado em qual canal é o maior. Quando digita um código HEX manualmente, a ferramenta valida a entrada, aceita códigos com ou sem o cardinal inicial, e expande a abreviatura de três dígitos, depois executa o mesmo processo de conversão para que as saídas RGB e HSL se atualizem instantaneamente. A amostra de pré-visualização da cor é atualizada definindo o seu fundo para o valor HEX atual, dando-lhe uma renderização precisa e em tamanho completo da cor escolhida. Cada conversão ocorre localmente em JavaScript, pelo que a ferramenta é rápida, privada e funciona offline, sem necessitar de chamadas de rede para qualquer um dos cálculos.Como usar
Selecionar e converter uma cor demora apenas um momento.
- Clique no quadrado colorido para abrir o seletor de cor nativo do seu sistema e escolher qualquer cor visualmente. Alternativamente, digite um código HEX de seis dígitos no campo de entrada HEX, com ou sem o cardinal inicial.
- À medida que muda a cor, a amostra de pré-visualização atualiza-se instantaneamente e os valores HEX, RGB e HSL recalculam em tempo real.
- Reveja os três valores exibidos sob a pré-visualização. Cada um é mostrado no formato exato pronto a colar em CSS ou numa ferramenta de design.
- Clique no botão Copiar ao lado do formato que precisa para enviar esse valor para a sua área de transferência, depois cole-o na sua folha de estilo, componente ou documento. Pode mudar de cor tantas vezes quanto quiser, e cada valor permanece perfeitamente sincronizado.
Perguntas Frequentes
Perguntas Frequentes
Qual é a diferença entre HEX, RGB e HSL?
HEX expressa uma cor como uma string hexadecimal de seis dígitos como #FF5733, onde cada par de dígitos representa os canais vermelho, verde e azul. RGB lista esses mesmos três valores de canal como números decimais de 0 a 255, por exemplo rgb(255, 87, 51). HSL descreve uma cor por matiz, saturação e luminosidade, o que frequentemente parece mais intuitivo porque pode escurecer ou saturar uma cor ajustando um único valor.
Posso introduzir um código HEX manualmente?
Sim. Digite qualquer código HEX válido de seis dígitos, com ou sem o cardinal inicial, no campo HEX e a ferramenta atualiza instantaneamente a pré-visualização e mostra os valores RGB e HSL correspondentes. A abreviatura de três dígitos como #3b5 também é aceite e expandida para a sua forma de seis dígitos.
Que formato devo usar no meu CSS?
Os três formatos são válidos em CSS moderno, por isso a escolha é sobretudo uma questão de conveniência. HEX é compacto e amplamente usado em folhas de estilo. RGB é claro quando precisa de ajustar a opacidade com a notação rgba(). HSL é especialmente útil quando quer criar tons e sombras da mesma matiz, porque pode mudar apenas a luminosidade mantendo a matiz e a saturação fixas.
Os valores convertidos são precisos?
Sim. As conversões usam matemática padrão de espaço de cor, por isso os valores HEX, RGB e HSL são precisos e consistentes entre navegadores. Como estes formatos descrevem todos o mesmo espaço de cor sRGB, converter entre eles nunca perde informação.
Dicas e Conselhos
Ao construir uma paleta de cores, comece a partir de uma única cor de marca e use a leitura HSL para gerar variantes harmoniosas ajustando a luminosidade e a saturação enquanto mantém a matiz constante, o que produz tons e sombras que parecem pertencer juntos. Para interfaces acessíveis, verifique sempre a razão de contraste entre a sua cor escolhida e o texto ou fundo sobre o qual se situa, porque uma cor que parece impactante ainda pode falhar os padrões de legibilidade. Lembre-se de que a luminosidade HSL de cinquenta por cento não é o mesmo que o brilho percetual, por isso amarelos muito brilhantes e azuis muito escuros na mesma luminosidade HSL podem parecer bastante diferentes. Se estiver a entregar cores a um desenvolvedor, forneça o código HEX como o valor canónico e inclua os equivalentes RGB e HSL como referências. Finalmente, armazene a sua paleta final num ficheiro de tokens partilhado para que cada membro da equipa referencie os mesmos valores, o que previne o desvio subtil que ocorre quando as cores são copiadas a olho de uma ferramenta para outra.