Color Palette Generator
Generate color palettes
Generate color palettes Executa localmente no seu navegador
Complementary
#4ecdc4
#cd4e57
Analogous
#4ecd85
#4ecdc4
#4e96cd
Triadic
#4ecdc4
#c44ecd
#cdc44e
Split complementary
#4ecdc4
#cd4e96
#cd854e
Tetradic
#4ecdc4
#844ecd
#cd4e57
#97cd4e
Tints (towards white)
c3eeeb
88ddd7
4cccc3
2d9f97
1c635e
Shades (towards black)
278b84
1f6f6a
18544f
103835
081c1a
#4ecdc4 #cd4e57 #4ecd85 #4e96cd #c44ecd #cdc44e #cd4e96 #cd854e #844ecd #97cd4e #c3eeeb #88ddd7 #4cccc3 #2d9f97 #1c635e #278b84 #1f6f6a #18544f #103835 #081c1a
About the
O Gerador de paleta de cores pega uma cor base e deriva dela os esquemas de harmonia padrão: complementar, análogo, triádico, complementar dividido e tetrádico, além de uma rampa de tons em direção ao branco e tons em direção ao preto. As harmonias são calculadas em HSL girando o matiz enquanto mantém a saturação e a luminosidade, e é por isso que os resultados permanecem relacionados à sua base em vez de flutuarem. A rampa é a parte que a maioria das paletas realmente precisa, porque uma interface funcional precisa de vários valores do mesmo matiz para pairar, estados ativos e desativados, e não apenas uma cor de destaque.
Where people use the
- Construir uma paleta em torno de uma única cor de marca.
- Produzindo variantes flutuantes, ativas e desativadas de um sotaque.
- Explorando alternativas para uma cor que falhou na verificação de contraste.
- Gerando uma rampa neutra para superfícies e bordas.
How to use the
- 1
Escolha uma cor base
Insira um valor hexadecimal, como 4ECDC4, ou use o seletor. Todo o resto é derivado desta cor.
- 2
Leia os esquemas de harmonia
Cada esquema é uma rotação de matiz diferente. Complementar é 180 graus, triádico é 120 e 240 e assim por diante.
- 3
Pegue a rampa de tonalidade e sombra
Cinco tons de branco e cinco tons de preto fornecem os estados e elevações necessários em uma interface real.
- 4
Copie os valores
A lista completa de valores hexadecimais gerados está em um bloco, pronto para ser colado em uma folha de estilo ou em um arquivo de token de design.
- 5
Verifique o contraste antes de enviar
Execute qualquer par de texto e plano de fundo da paleta por meio do Verificador de Contraste. Harmonioso não é o mesmo que legível.
Dicas e práticas recomendadas
- Escolha a cor base da marca e ajuste a luminosidade apenas para os estados.
- Reserve a cor complementar para a ação que você deseja que seja notada.
- Sempre execute o emparelhamento final por meio de uma verificação de contraste antes do envio.
Perguntas frequentes
Qual é a diferença entre os esquemas?
Complementar usa a tonalidade oposta, que dá o contraste mais forte e se adapta a um apelo à ação. O análogo usa vizinhos a 30 graus de cada lado, o que é calmo e seguro. Triádico espalha três tons uniformemente, o que é vivo e mais difícil de controlar. A divisão complementar suaviza o choque complementar usando os dois matizes de cada lado do oposto. Tetradic usa quatro tons em ângulos retos, o que se adapta a painéis complexos.
Por que as cores geradas compartilham a mesma saturação e luminosidade?
Porque girar apenas o matiz é o que os mantém reconhecivelmente relacionados. Variar a luminosidade ao mesmo tempo produz cores que parecem não relacionadas, o que vai contra o objetivo de uma paleta.
As tonalidades são apenas a cor misturada com o branco?
Efetivamente sim, mas calculado em HSL aumentando a luminosidade enquanto mantém o matiz e a saturação. Isso mantém o matiz estável, enquanto a mistura ingênua em RGB muda para o cinza.
Quantas cores uma paleta deve ter?
Para a maioria das interfaces, dois ou três tons mais uma rampa neutra são suficientes. Um esquema com cinco tons saturados é difícil de usar de forma consistente e geralmente acaba parecendo acidental.
Verifica a acessibilidade?
Não, apenas gera cores. Use o Verificador de contraste em qualquer emparelhamento que pretenda usar para texto.