Seletor de cores (Color Picker)

Escolha cores e copie valores prontos para usar

Um seletor de cores confiável deve fazer mais do que mostrar um quadrado bonito. Designers, desenvolvedores e criadores de conteúdo muitas vezes precisam da mesma cor em vários formatos, conforme o destino. O CSS aceita HEX, RGB e HSL, os sistemas de design podem documentar tokens em HEX, e ajustes rápidos em protótipos costumam ser mais fáceis em HSL, pois matiz, saturação e luminosidade mudam de forma independente. Esta ferramenta mostra esses formatos lado a lado para que você escolha a cor uma vez e copie o valor que combina com o seu fluxo de trabalho.

Tudo acontece localmente no navegador. A entrada de cor, os cálculos de conversão e os botões de copiar funcionam com JavaScript no lado do cliente, portanto não há conta, envio de arquivos nem processamento remoto. Isso torna a ferramenta útil para paletas de marca privadas, temas de produtos ainda não lançados, trabalhos para clientes e experimentos rápidos de interface que não devem sair do seu computador.

Usando tons claros e escuros em interfaces

Tons claros e escuros ajudam uma única cor da marca a sustentar uma interface completa. Os tons mais claros funcionam em fundos sutis, estados de hover, painéis de notificação e linhas selecionadas. Os tons mais escuros podem fornecer bordas, estados pressionados, destaques do modo escuro ou texto de alta ênfase quando a cor original é brilhante demais. As amostras aqui mantêm o matiz e a saturação constantes enquanto alteram a luminosidade, criando uma escala simples que parece relacionada à cor base.

Trate a escala gerada como ponto de partida, e não como um sistema de design final. A percepção humana não é perfeitamente linear, e alguns matizes precisam de ajuste manual para parecerem igualmente espaçados. Azuis e roxos costumam tolerar grandes variações de luminosidade, enquanto amarelos podem exigir tons mais escuros para um texto legível. Copie os valores, teste-os no componente real e refine as etapas mais importantes.

Escolhendo entre HEX, RGB e HSL

O HEX é compacto e comum na entrega de design, o que o torna uma boa escolha padrão para documentação. O RGB é útil quando uma ferramenta pede canais numéricos de vermelho, verde e azul ou quando você pensa diretamente na luz da tela. O HSL costuma ser o formato mais amigável para pequenos ajustes: mude o matiz para girar pelo círculo cromático, reduza a saturação para um tom mais calmo ou altere a luminosidade para obter um tom claro ou escuro. Manter os três visíveis reduz erros ao alternar entre ferramentas de design, arquivos CSS e bibliotecas de componentes.