Color Palette Generator
Understand Color Palette Generator
Gera paletas complementares, análogas, triádicas, tetrádicas, complementares divididas e monocromáticas a partir de uma cor base.
How it works
O hex base é convertido para HSL e o esquema é produzido girando o matiz enquanto saturação e luminosidade são mantidas. A complementar gira 180°, a análoga toma ±30°, a triádica toma 120° e 240°, a tetrádica toma 90°, 180° e 270°, e a complementar dividida toma 150° e 210° — os dois matizes que flanqueiam a complementar, o que dá o contraste de um par complementar sem a dureza dele. A monocromática é a exceção: ela mantém matiz e saturação e faz a luminosidade percorrer uma escada fixa de 20%, 35%, 50%, 65% e 80%.
When to use it
- Derivar um primeiro conjunto de cores de destaque e secundárias a partir de uma única cor de marca
- Achar uma cor que se destaque contra um fundo com o qual você já se comprometeu, usando o modo complementar ou complementar dividido
- Gerar uma rampa monocromática de cinco passos para uma escala de superfície, hover e borda
- Explorar alternativas rapidamente antes de gastar tempo ajustando uma paleta à mão
Watch out for
- A rotação de matiz em HSL não é perceptualmente uniforme. Um passo de 120° a partir de um amarelo vivo cai em uma cor bem mais escura com a mesma saturação e luminosidade nominais, então conjuntos triádicos costumam precisar de correção manual de luminosidade.
- Uma paleta não diz nada sobre legibilidade. Confira no verificador de contraste todo par de texto sobre fundo que você pretende usar — cores harmônicas reprovam com frequência em 4,5:1.
- O modo monocromático descarta a luminosidade da base. Ele a substitui pela escada fixa, então a cor que você informou pode não aparecer na própria paleta dela.
- Só hexadecimal de 6 e de 3 dígitos é aceito como cor base; rgb(), hsl() e nomes de cores não são.
Frequently Asked Questions
O que é um esquema de cores complementares?
Cores complementares ficam diretamente opostas na roda de cores (180° de distância). Elas criam contraste máximo e vibração visual. Exemplo: azul (#0000FF) e laranja (#FF8000). Use em botões de chamada para ação que precisam se destacar do fundo.
O que é um esquema de cores análogas?
Cores análogas ficam uma ao lado da outra na roda de cores (±30°). Elas são harmônicas e de baixo contraste — ótimas para fundos, gradientes e interfaces calmas. Uma paleta azul-turquesa-verde é análoga e é comum em marcas de saúde e bem-estar.
Como gerar pares de cores acessíveis a partir de uma paleta?
Depois de gerar sua paleta, verifique cada combinação de primeiro plano e fundo com a ferramenta de contraste da WCAG. Para conformidade com o AA, a razão de contraste precisa ser de pelo menos 4,5:1 para texto corrido — muitas paletas geradas precisam de ajuste de luminosidade para passar.
How to Use Color Palette Generator
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.