Seletor de Cores Online
Escolha uma cor visualmente e receba os códigos HEX, RGB e HSL em um só lugar.
Este seletor de cores online deixa você escolher uma cor no olho, arrastando por um campo de saturação e um slider de matiz, e entrega o código dela em todos os formatos comuns de uma vez: HEX para CSS, RGB para scripts e trabalho com canvas, HSL quando você quer raciocinar em termos de luminosidade e saturação.
É o jeito mais rápido de sair de 'mais ou menos esse azul' para um valor exato que dá para usar. Designers usam para afinar um tom antes de fixá-lo na paleta; desenvolvedores usam para pegar uma cor de destaque rápida sem abrir um app de design; qualquer pessoa escrevendo HTML ou montando uma apresentação encontra um código sem chutar.
O seletor roda inteiramente no seu navegador. Não há nada para instalar nem conta para criar, e as suas escolhas não são enviadas para lugar nenhum. Cole um código HEX existente para carregar uma cor e ajustar a partir dela — prático para criar variações mais claras ou mais escuras de uma cor de marca.
Como usar o seletor de cores
- Arraste o slider de matiz para escolher a família de cor base.
- Clique ou arraste dentro da área de tons para definir saturação e brilho.
- Ajuste fino editando os valores HEX, RGB ou HSL diretamente se precisar de um alvo preciso.
- Copie o formato que precisar com o botão de copiar correspondente.
- Cole um código hex existente na entrada a qualquer momento para partir de uma cor conhecida.
O que este seletor de cores faz
O seletor deixa você escolher uma cor no olho, arrastando por um campo de saturação e brilho e um slider de matiz, e informa essa cor exata em todos os formatos comuns de uma vez: HEX, RGB e HSL. Em vez de chutar códigos, você chega ao tom visualmente e copia a notação de que o seu projeto precisa.
Ele funciona nos dois sentidos. Cole um código HEX existente e o seletor salta para essa cor, para você ajustar a partir de um ponto de partida conhecido — a maneira rápida de construir uma tonalidade mais clara ou um tom mais escuro de uma cor de marca sem sair da página. Tudo roda no seu navegador, sem nada para instalar.
HEX, RGB ou HSL: qual código copiar?
Todos descrevem a mesma cor. HEX é o padrão compacto para folhas de estilo e design tokens. RGB é o que APIs de canvas e muitas bibliotecas esperam, e rgba() dá transparência fácil. HSL é o mais amigável para ajustes: mantenha o matiz fixo e mude a luminosidade para construir uma escala consistente de tons.
Uma ressalva pequena: as cores podem aparecer levemente diferentes de uma tela para outra, porque os monitores variam na calibração. O código é exato; o vidro em que ele é exibido, não.
Como o seletor se mapeia em valores reais
Os dois controles se mapeiam diretamente no modelo HSL. O slider de matiz percorre o círculo cromático de 0 a 360 graus, enquanto o campo quadrado define a saturação em um eixo e o brilho no outro. Por isso o HSL costuma ser o mais intuitivo de conduzir: a interface é essencialmente um editor visual de HSL.
Nos bastidores, cada posição corresponde a valores sRGB precisos, então as saídas HEX e RGB são a tradução exata de onde você largou o cursor. Mude um número HSL e o HEX e o RGB se atualizam em conjunto, porque os três são notações da mesma cor subjacente.
Usos do dia a dia
Designers recorrem a um seletor para afinar um tom antes de fixá-lo na paleta, ou para derivar tonalidades e tons que compartilham um matiz por uma UI consistente. Desenvolvedores o usam para pegar uma cor de destaque rápida sem abrir um app de design completo e depois colar o HEX direto no CSS.
É igualmente útil fora do código. Qualquer pessoa montando uma apresentação, estilizando um e-mail, escolhendo a cor de um gráfico ou o fundo de um documento pode encontrar aqui um valor exato, em vez de se contentar com uma cor nomeada aproximada.
Construindo paletas e variações
Uma forma confiável de criar uma escala de cores é travar o matiz e a saturação e variar apenas a luminosidade em HSL: o mesmo matiz a 90%, 70%, 50% e 30% de luminosidade dá um conjunto coerente de tons que parecem pertencer uns aos outros. O seletor facilita isso porque você pode ler e editar os números HSL diretamente.
Para cores de destaque ou complementares, gire o slider de matiz por um valor fixo — 30 graus para uma cor análoga ou 180 para uma complementar — mantendo saturação e luminosidade estáveis. Assim a família fica visualmente equilibrada, em vez de uma coleção aleatória de cores.
Escolhendo cores acessíveis
Escolher uma cor é só metade do trabalho; ela também precisa ser legível. As diretrizes de acessibilidade pedem uma razão de contraste de pelo menos 4,5:1 entre texto normal e o seu fundo, e 3:1 para texto grande. A luminosidade do HSL é uma alavanca prática aqui: escurecer ou clarear um matiz escolhido costuma bastar para passar do limite sem abandonar a cor.
Como o seletor dá valores RGB exatos, você pode colá-los direto em um verificador de contraste para conferir uma combinação. Quando uma cor fica no limite, ajuste a luminosidade no seletor e teste de novo, em vez de partir para um matiz completamente diferente.
Ferramentas de cor relacionadas
Se você já tem códigos fixos para traduzir, em vez de uma cor para escolher, os conversores dedicados de HEX para RGB e de RGB para HEX fazem exatamente esse trabalho, com matemática exata e sem perdas e uma prévia ao vivo.
Depois de definir as suas cores, o gerador de gradiente CSS as combina em fundos lineares ou radiais prontos para copiar. Todas essas ferramentas rodam localmente no seu navegador, então as suas escolhas de cor nunca saem da sua máquina.
Perguntas frequentes
Este seletor de cores é grátis?
Sim, completamente grátis, sem cadastro e sem limites. Escolha e copie quantas cores quiser.
Posso pegar uma cor de uma imagem ou da minha tela?
Esta ferramenta seleciona a partir de uma paleta, não de imagens. Para amostrar um pixel da tela, use o conta-gotas das dev tools do navegador ou um utilitário do sistema, e depois cole o código resultante aqui para ajustar e converter entre formatos.
Qual é a diferença entre HEX e HSL?
HEX codifica vermelho, verde e azul diretamente; HSL descreve matiz, saturação e luminosidade. HSL é mais fácil para humanos: 'mesmo matiz, 10% mais claro' é a mudança de um número em HSL, mas uma mudança opaca em HEX.
Alguma cor que eu escolho é rastreada ou enviada?
Não. O seletor é JavaScript puro no lado do cliente. As suas escolhas de cor nunca saem do navegador.
Funciona em telas de toque?
Sim. O slider de matiz e a área de tons respondem ao toque, então funciona no iPhone, no Android e em tablets, além do mouse.
Por que a cor parece um pouco diferente em outra tela?
O código é exato, mas os monitores variam em calibração, brilho e perfil de cor, então o mesmo valor HEX pode aparecer um pouco diferente de uma tela para outra. Para trabalhos em que a cor é crítica, confira o seu design em mais de uma tela e, se possível, em uma calibrada.