O que esta ferramenta faz
Como funciona a roda de cores
Como os tipos de paleta são calculados
Recursos explicados
Seletor de cores com marcador arrastável
Arraste o marcador pela roda para alterar o matiz e a saturação em tempo real. A paleta é recalculada a cada movimento, permitindo comparar as combinações antes de escolher uma cor.
Campo HEX com validação
Digite ou cole um código HEX diretamente (3 ou 6 dígitos, com ou sem #). Valores inválidos são sinalizados imediatamente.
Controles de matiz, saturação e luminosidade
Para ajustes precisos que são difíceis de fazer com o mouse em uma roda pequena, o painel de edição oferece um controle deslizante para cada valor da cor.
Cinco tipos de paleta
Alterne entre os tipos complementar, monocromático, análogo, triádico e tetrádico sem escolher novamente a cor base. A ferramenta mantém o mesmo matiz e altera apenas a rotação na roda.
Cópia com um clique
Clique em qualquer amostra para copiar seu código HEX ou use os botões abaixo da paleta para copiar todas as cores de uma vez, como uma lista de códigos HEX ou propriedades personalizadas CSS prontas para colar (--color-1, --color-2 e assim por diante).
Cada amostra pode ser editada separadamente
As cores geradas não ficam presas à fórmula. Arraste qualquer marcador na roda ou passe o cursor sobre uma amostra e clique no ícone de ajuste para abrir os controles de matiz, saturação e luminosidade daquela cor. Depois do ajuste, a cor permanece na posição escolhida e só volta ao cálculo ao alterar o tipo de paleta.
Fundo que acompanha a cor escolhida
A área atrás do seletor recebe um tom suave e discreto da cor base selecionada, ajudando você a avaliar como ela fica em uma superfície maior, e não apenas em uma amostra pequena.
Baixe a paleta como imagem
Além de copiar códigos HEX, você pode baixar a paleta como um cartão de imagem nos formatos PNG, JPG ou SVG. É útil para compartilhar a paleta fora de um editor de código, em documentos ou em briefings de design.
Para que você pode usar esta ferramenta?
Escolher cores para um site ou aplicativo
Escolha primeiro a cor principal da marca e gere uma paleta complementar ou triádica para botões, links e detalhes.
Criar uma paleta para um sistema de design
Copie a paleta como variáveis CSS e insira-a diretamente em uma folha de estilos como ponto de partida para um tema.
Verificar se duas cores destoam
Defina uma cor base e veja a posição da outra na roda em relação a ela. Cores próximas, com pequeno ângulo entre si, são mais difíceis de distinguir; cores quase opostas criam mais contraste.
Explorar tons e variações de uma cor
Selecione o tipo monocromático para gerar um tom mais escuro e outro mais claro do mesmo matiz, úteis para estados de foco, bordas ou versões desativadas de uma cor de interface.
Informações da ferramenta
| Entrada | Código de cor HEX digitado ou clique/arraste na roda |
|---|---|
| Saída | Códigos HEX e propriedades personalizadas CSS copiadas para a área de transferência, ou cartão de paleta para baixar em PNG, JPG ou SVG |
| Tipos de paleta | Complementar, monocromática, análoga, triádica e tetrádica |
| Processamento | Inteiramente no navegador — sem envio, conta ou comunicação com servidor |
| Modelo de cor | HSL (matiz, saturação e luminosidade), convertido de e para HEX |
Benefícios
- Não é necessário criar uma conta — a roda funciona assim que a página carrega.
- A paleta é atualizada instantaneamente ao arrastar o marcador, facilitando a comparação de opções.
- Copiar como variáveis CSS evita renomear e reformatar códigos HEX manualmente.
- As regras matemáticas de cada tipo de paleta são fixas e consistentes, tornando os resultados previsíveis.
Limitações
- A roda mostra apenas matiz e saturação; a luminosidade precisa ser ajustada separadamente pelo controle deslizante.
- A ferramenta gera paletas com base na teoria das cores, mas não verifica proporções de contraste nem conformidade com as diretrizes de acessibilidade WCAG.
- A cópia para a área de transferência exige um navegador compatível com a Clipboard API; os botões podem não funcionar em navegadores muito antigos.
- Os arquivos PNG, JPG e SVG baixados mostram um cartão simples de paleta, com blocos de cor e rótulos HEX, e não uma imagem da própria roda interativa.
- Arrastar o marcador de uma amostra altera diretamente apenas o matiz e a saturação; a luminosidade mantém o valor calculado até ser ajustada pelo controle Luminosidade.
Privacidade
Nenhuma cor, código HEX ou paleta criada é enviada a qualquer lugar. Todos os cálculos são feitos localmente na aba do navegador; ao fechar ou atualizar a página, os dados são apagados.
Tratamento de dados
Esta ferramenta não usa cookies, não armazena suas paletas e não exige login.
Dicas
- Se duas cores da paleta parecerem muito parecidas, experimente um tipo mais amplo, como triádico ou tetrádico, em vez de análogo.
- Para interfaces, use uma saturação mais baixa (40–60%) se preferir uma paleta mais suave.
- Use o tipo monocromático para criar variações de foco, estado ativo e desativado de uma única cor da marca.
Perguntas frequentes
Esta ferramenta salva minhas paletas?
Não. Nada é armazenado. Se você atualizar a página ou fechar a aba, a paleta será apagada, a menos que já a tenha copiado para outro lugar.
Qual é a diferença entre a roda e os controles deslizantes?
A roda controla o matiz e a saturação ao mesmo tempo, de acordo com o ponto escolhido. Os controles do painel de edição permitem definir separadamente matiz, saturação e luminosidade, facilitando ajustes precisos.
Posso usar códigos HEX de 3 dígitos, como #1ec?
Sim. O campo HEX aceita códigos de 3 ou 6 dígitos, com ou sem o símbolo # no início.
Por que a roda parece ter cores vivas, mas a cor escolhida está suave?
O fundo da roda mostra a saturação máxima na borda como referência visual. A saturação da cor escolhida é indicada pela distância do marcador ao centro, e a luminosidade é um valor separado, ajustado pelo controle Luminosidade.
Se eu mover uma amostra, isso afeta as outras?
Não. Mover ou editar uma amostra altera apenas aquela cor. As demais continuam nas posições calculadas até que você as mova ou altere o tipo de paleta, o que redefine todos os ajustes manuais.
Qual é a diferença entre os downloads PNG/JPG e SVG?
Todos mostram o mesmo cartão de paleta. PNG e JPG são imagens de resolução fixa; o SVG permanece nítido em qualquer tamanho e pode ser editado posteriormente em um programa vetorial.