O colorPaletteFinder assenta nos princípios clássicos da teoria das cores combinados com os requisitos modernos do design digital. Criámos uma interface fluida em que não precisa de calcular manualmente matizes nem de verificar rácios de contraste — a ferramenta faz o trabalho pesado por si.
1. A Roda de Cores Interativa
No centro do colorPaletteFinder está a Roda de Cores HSL interativa. Ao contrário dos seletores de cor retangulares habituais, a nossa roda de cores circular corresponde diretamente à dinâmica da teoria das cores.
- Matiz (o ângulo): arraste o ponto à volta da extremidade exterior para alterar a família de cor fundamental (vermelho, azul, verde, etc.).
- Saturação (distância ao centro): arraste o ponto na direção do centro para tornar a cor acinzentada e suave, ou na direção da extremidade para obter o máximo de vivacidade.
- Luminosidade: ajustada dinamicamente para garantir que as cores de harmonia geradas mantêm um peso visual equilibrado.
Mova o ponto da cor principal e veja todas as cores de harmonia dependentes adaptarem-se ao instante, em tempo real, mantendo as suas rigorosas relações matemáticas.
2. Escolher uma Regra de Harmonia
Consoante a estética que pretende alcançar, pode selecionar entre sete regras de harmonia de cores diferentes e matematicamente comprovadas:
Complementar
Cores situadas diretamente opostas uma à outra na roda de cores (a 180° de distância). Cria o máximo contraste e uma energia de grande impacto.
Análoga
Cores que ficam lado a lado na roda (separadas por 30°). Cria um design sereno, confortável e de aspeto natural.
Tríade
Três cores uniformemente espaçadas à volta da roda (a 120° de distância). Oferece um contraste elevado mantendo um melhor equilíbrio de cor do que os esquemas complementares.
Complementar Dividida
Uma cor base, mais as duas cores adjacentes ao seu complemento. Oferece o forte contraste visual do esquema complementar, mas com menos tensão.
Monocromática
Variações de luminosidade e saturação de um único matiz. Produz um aspeto coeso, limpo e elegante.
3. Verificação de Contraste WCAG
Criar uma paleta bonita é apenas metade do trabalho; as cores também têm de ser acessíveis a todos os utilizadores. Em concreto, o texto tem de ser legível sobre as cores de fundo.
O colorPaletteFinder integra um verificador de contraste no fundo da ferramenta. Selecione quaisquer duas cores geradas (por exemplo, um fundo e uma cor de texto) e ele calcula o rácio de contraste.
- Nível AA: exige um rácio de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande.
- Nível AAA: o padrão de excelência em acessibilidade, exigindo um rácio de pelo menos 7:1 para texto normal.
4. Copiar e Exportar
Depois de gerada a sua paleta perfeita, integrá-la no seu projeto é simples.
Passe o cursor sobre qualquer amostra de cor na tira da paleta para revelar o respetivo código HEX exato. Ao clicar na amostra, o código HEX de seis dígitos é copiado de imediato para a sua área de transferência (por exemplo, #1A2B3C), pronto a colar diretamente no CSS, em configurações do Tailwind, no Figma ou no Adobe Creative Cloud.