Seletor de cores

O que é um seletor de cores?

Um seletor de cores é uma ferramenta online para escolher visualmente as cores usadas em design para web, peças gráficas e interfaces, além de converter o resultado para formatos como HEX, RGB e HSL. Com a roda de cores e o painel de saturação e luminosidade, você encontra o tom desejado de forma intuitiva e ainda pode ajustar a opacidade para gerar códigos RGBA e HSLA.

Como tudo roda direto no navegador, você não precisa instalar nenhum programa. Em navegadores compatíveis com a EyeDropper API, também é possível capturar uma cor de qualquer ponto da tela, o que agiliza muito a reprodução de referências visuais, imagens e layouts.

Quando usar esta ferramenta

• Desenvolvimento web – Encontre e copie rapidamente códigos de cor precisos para usar no CSS
• Design de interfaces – Monte paletas harmoniosas para botões, fundos, cartões e textos
• Design gráfico – Escolha combinações de cores para banners, posts, apresentações e peças promocionais
• Identidade visual – Registre as cores da marca em vários formatos para manter consistência
• Testes de acessibilidade – Confira os valores antes de validar o contraste entre texto e fundo
• Extração de referências – Capture uma cor diretamente de um site, imagem ou layout usando a pipeta
• Trabalho em equipe – Compartilhe valores HEX, RGB e HSL já prontos com designers e desenvolvedores

Principais recursos

• Escolha de matiz na roda de cores – Navegue por 360° de tons e defina a cor base com o mouse ou com o toque.
• Seletor 2D de saturação e luminosidade – Ajuste intensidade e brilho ao mesmo tempo, de tons suaves a cores mais densas e escuras.
• Controle de opacidade – Ajuste a transparência de 0% a 100% para criar sobreposições, estados hover e gradientes.
• Vários formatos em tempo real – Veja HEX, RGB e HSL instantaneamente, com troca automática para RGBA e HSLA quando houver opacidade.
• Captura de cor da tela – Em navegadores compatíveis, você pode apontar para qualquer área da tela e trazer a cor direto para a ferramenta.
• Geração automática de harmonias – Crie paletas complementares, análogas, triádicas e monocromáticas a partir da cor escolhida.
• Cópia de código CSS em um clique – Copie a declaração no formato color: #D4AF37; em HEX, RGB ou HSL sem editar nada.
• Histórico local de cores – As últimas 20 cores ficam salvas no navegador para você reutilizar depois.

Como usar

1. Escolha a matiz – Clique ou arraste na roda de cores para definir a família principal de cor.
2. Ajuste saturação e luminosidade – No painel quadrado, mova o ponto na horizontal para mudar a saturação e na vertical para ajustar a luminosidade.
3. Defina a opacidade – Se quiser um efeito semitransparente, use o controle Alpha. 100% é totalmente opaco e 0% é totalmente transparente.
4. Confira e copie os valores – O painel da direita mostra HEX, RGB e HSL, cada um com seu botão de cópia.
5. Use o código CSS – Na seção inferior, escolha HEX, RGB ou HSL e use o botão “Copiar CSS” para colar a declaração pronta no seu projeto.

Teoria da cor e harmonias

Como funciona a roda de cores

A roda de cores nasceu dos estudos de Isaac Newton com a decomposição da luz. No ambiente digital, os modelos RGB e HSL ajudam a representar os tons de forma previsível, usando o matiz em um círculo de 0° a 360°. Isso facilita encontrar relações visuais e montar paletas de maneira intencional.

Diferenças entre HSL, RGB e HEX

• HEX – É o formato mais comum na web. Usa seis caracteres em #RRGGBB e é prático para copiar e documentar.
• RGB – Mostra separadamente os canais vermelho, verde e azul com valores de 0 a 255. É útil quando você quer controlar cada componente da cor.
• HSL – Separa matiz, saturação e luminosidade, o que facilita clarear, escurecer ou suavizar a mesma cor sem mudar o tom principal.

Tipos de harmonia de cores

• Complementares – Ficam em lados opostos da roda e criam contraste forte, ótimo para destaque.
• Análogas – Estão lado a lado na roda, formando transições suaves e naturais.
• Triádicas – Distribuem três cores com distância equilibrada, gerando contraste com sensação de equilíbrio.
• Monocromáticas – Variam dentro do mesmo matiz, mexendo principalmente na luminosidade e na saturação para manter unidade visual.

Para que serve a opacidade

O canal Alpha controla o quanto a cor deixa o fundo aparecer. Ele é muito útil em sobreposições, sombras, gradientes e estados interativos. Quando você reduz a opacidade, a ferramenta já entrega o formato RGBA ou HSLA correspondente para uso imediato no CSS.

Sobre a EyeDropper API

A EyeDropper API é um recurso do navegador que permite capturar uma cor diretamente da tela. Hoje ela funciona principalmente nas versões mais recentes do Chrome e do Edge, enquanto Firefox e Safari ainda não oferecem suporte completo.

Com isso, você pode pegar cores não só da aba atual, mas também de imagens, aplicativos e referências abertas na tela. É uma forma rápida de transportar paletas entre a inspiração e a execução do projeto.

Dicas práticas

• Documente as cores da marca – Depois de escolher a cor principal, registre também HEX, RGB e HSL para manter consistência em todos os materiais.
• Pense em acessibilidade – Ao escolher texto e fundo, garanta diferença suficiente de luminosidade e confirme depois a taxa de contraste em uma ferramenta específica.
• Monte paletas completas – Comece por uma cor base e use as harmonias para definir tons de apoio e de destaque.
• Use camadas semitransparentes – Em imagens de fundo, uma sobreposição com opacidade ajuda a melhorar a leitura sem perder o contexto visual.

Detalhes

Os resultados em O que é um seletor de cores? são gerados a partir dos valores e opções que você escolhe.

Antes de aplicar a cor em definitivo, confirme o resultado com as diretrizes do projeto ou com a revisão de um especialista.

Perguntas frequentes