Roda das Cores

O que faz a Roda das Cores

Roda das Cores transforma uma cor base numa paleta organizada por relações do círculo cromático. Em vez de escolher tons ao acaso, seleciona uma cor no disco visual, confirma o formato do valor e escolhe uma regra de harmonia para ver cores relacionadas com uma lógica clara. O resultado combina uma pré-visualização visual com valores de cor que podem ser copiados ou exportados para trabalho de design, interface, ilustração ou desenvolvimento.

A leitura começa pela cor ativa. O painel mostra o valor escolhido e permite alternar entre HEX, RGB, HSL, HSV, OKLCH e CMYK. Depois, a harmonia escolhida define a relação entre a cor base e as restantes amostras. Análogo mantém cores próximas, Complementar procura contraste direto, Triádico reparte a paleta em três pontos, e as opções Retângulo, Tetrádico, Duplo dividido e Complementar dividido criam conjuntos mais amplos para projetos que precisam de várias funções cromáticas.

Roda das Cores é mais útil quando a decisão principal não é apenas “que cor usar”, mas “que cores funcionam em conjunto”. Uma cor isolada pode parecer boa num cartão, mas uma interface completa precisa de acentos, fundos, estados, variações e contraste. Ao juntar o disco, as harmonias, as variações, a simulação de daltonismo, a conversão de formatos e a verificação de contraste, o resultado ajuda a passar de uma ideia cromática para escolhas mais testáveis.

Como usar Roda das Cores

1. Escolha a cor base no disco interativo ou use os controlos de cor disponíveis para ajustar a seleção.
2. Confirme o formato de valor que pretende copiar: HEX, RGB, HSL, HSV, OKLCH ou CMYK.
3. Use a lista de harmonia para escolher Análogo, Complementar, Triádico, Retângulo, Duplo dividido, Tetrádico ou Complementar dividido.
4. Veja a faixa de paleta gerada e selecione uma amostra se quiser transformar essa cor numa nova base.
5. Abra as secções de variações cromáticas, harmonias cromáticas, simulação de daltonismo, conversão de cores ou verificação de contraste conforme a decisão que precisa de validar.
6. Use o botão de copiar junto ao valor ativo quando precisa de um código individual.
7. Use Exportar cores para abrir os formatos de exportação e copiar listas em HEX, RGB, HSL ou OKLCH.

Os passos devem ser feitos com uma intenção definida. Para uma identidade visual, comece pela cor principal e teste harmonias que criem acentos claros. Para uma interface, verifique se as cores escolhidas continuam legíveis em fundos claros e escuros. Para um gráfico, compare regras com mais pontos de cor, como Triádico, Retângulo ou Tetrádico, antes de exportar a lista final.

Como escolher a harmonia certa

A escolha da harmonia muda o tipo de resultado. Uma paleta análoga tende a ser coesa porque usa cores próximas na roda. Uma paleta complementar tende a ser mais forte porque usa uma relação oposta. Uma paleta triádica cria separação suficiente para categorias ou elementos destacados sem depender de muitas cores. As regras com quatro ou mais pontos podem funcionar bem em ilustrações, dashboards e sistemas com várias famílias de conteúdo, mas também exigem mais disciplina na atribuição de papéis.

Como interpretar variações, conversões e contraste

As variações cromáticas ajudam a transformar a cor ativa em escalas mais úteis. Tons, sombras e tints podem servir para fundos, bordas, estados hover, superfícies secundárias ou pequenos destaques. A leitura dessas variações é prática quando a cor base está correta, mas ainda falta uma família de valores para aplicar em diferentes intensidades.

A tabela de conversão é útil quando o destino muda. HEX é comum em CSS e documentação rápida. RGB facilita leitura por canais. HSL torna ajustes de matiz, saturação e luminosidade mais previsíveis. HSV pode ajudar em fluxos visuais de seleção de cor. OKLCH é útil para pensar em luminosidade e cromaticidade de forma mais perceptual. CMYK aparece como referência, mas qualquer produção impressa crítica deve ser confirmada no sistema final de impressão.

A simulação de daltonismo deve ser lida como triagem inicial. Se duas cores parecem próximas sob Protanopia, Deuteranopia, Tritanopia ou Achromatopsia, evite depender apenas da diferença de matiz para comunicar estado ou significado. A verificação de contraste também é separada da harmonia: cores que combinam entre si não garantem texto legível. Depois de escolher a combinação principal, confirme pares específicos no Contraste de Cores.

Quando usar a Roda das Cores em vez de outro seletor

Roda das Cores é indicada quando as relações entre cores importam. Um seletor simples resolve a escolha de um único valor, mas não explica que acento combina com a base, que cores podem separar categorias ou que variações podem apoiar estados de interface. A visualização circular torna essas relações mais claras porque mostra a distância entre tons e a regra que gera cada conjunto.

Para uma marca, defina a cor principal e compare Análogo, Complementar e Complementar dividido antes de decidir o acento. Para uma landing page, gere uma paleta curta e teste uma cor para o botão principal, outra para áreas de fundo e outra para elementos decorativos. Para visualização de dados, prefira regras com separação maior e valide se cada cor continua distinguível. Para um sistema de design, transforme a paleta final em tokens de uso, como fundo, texto, borda, acento e estado.

Quando o objetivo passa a ser editar amostras uma a uma, bloquear cores e exportar uma paleta completa em formatos de entrega, continue no Paleta de Cores. Quando a decisão começa a partir de uma cor retirada de uma imagem, obtenha primeiro o valor inicial e depois volte à roda para explorar relações cromáticas.

Boas práticas antes de exportar códigos

Antes de copiar uma lista de códigos, atribua uma função a cada cor. Uma paleta sem papéis definidos tende a gerar inconsistência: a mesma cor pode ser usada como fundo num ecrã, como acento noutro e como texto noutro, criando problemas de leitura e manutenção. Defina quais valores são principais, quais são acentos, quais ficam reservados para gráficos e quais servem apenas como variações de apoio.

Evite exportar mais cores do que o projeto consegue usar. Uma harmonia ampla pode ser visualmente interessante, mas uma interface pequena normalmente precisa de poucos valores bem escolhidos. Use tons menos saturados para áreas grandes, reserve cores vivas para ações ou sinais importantes, e confirme os pares de texto/fundo antes de aplicar a paleta. Se a entrega for para desenvolvimento, prefira nomes por função em vez de nomes decorativos, porque tokens como primary, accent, surface ou border são mais fáceis de manter do que listas soltas de HEX.

Checklist de aplicação da paleta

Antes de aplicar uma paleta, teste as cores em tamanhos e papéis diferentes. Uma amostra pequena pode parecer equilibrada, mas a mesma cor pode ficar demasiado forte quando ocupa uma secção inteira. Use a cor principal para elementos que precisam de reconhecimento, reserve uma cor de acento para ações ou chamadas de atenção e mantenha tons mais discretos para superfícies extensas.

• Confirme se a cor principal continua reconhecível em fundo claro e fundo escuro.
• Escolha uma cor de ação que não seja confundida com estados de erro, aviso ou sucesso.
• Use variações mais claras para superfícies e variações mais escuras para texto ou ícones quando o contraste permitir.
• Evite depender apenas da cor para comunicar estados; combine cor com texto, ícone ou posição quando a mensagem for importante.
• Guarde os códigos finais com nomes de função para que a paleta seja fácil de manter.

Depois da validação visual, copie apenas os formatos necessários. Um designer pode preferir uma lista curta de HEX, enquanto um programador pode precisar de CSS variables ou de um bloco Tailwind. Exportar todos os formatos sem contexto aumenta a probabilidade de alguém usar o valor errado. A entrega deve deixar claro que cor é primária, que cor é acento, que cores são apoio e quais valores precisam de nova verificação se o fundo mudar.