Paleta de cores: gerador, seletor e conversor de cores
Escolha uma cor e gere paletas complementar, análoga, tríade, tetrádica ou monocromática. Converta os códigos, teste o contraste e pegue cores de uma imagem sem enviar nada.
Por Troopus · Atualizado em: 24 de outubro de 2026
- 🎨 5 harmonias
- 🔒 Trave cores da paleta
- ♿ Contraste WCAG
- 🖼️ Cor de imagem local
Gere sua paleta de cores agora
Clique em uma cor para ver os códigos dela. Use o cadeado para manter a cor ao gerar uma nova paleta aleatória.
Cor selecionada na paleta.
| Formato | Valor | Copiar |
|---|
| Uso | AA | AAA |
|---|
Clique na imagem para pegar a cor do pixel. Abaixo estão as cores predominantes.
Como criar uma paleta de cores com harmonias
Para criar uma paleta de cores, parta de uma cor base e escolha uma harmonia, que define quais outros matizes combinam com ela na roda de cores. Na complementar, o par fica a 180° da base. Na análoga, usa vizinhas de 30° e 60°. Na tríade, três cores a 120° uma da outra.
Escolha a cor no seletor ou digite o código, e a ferramenta calcula as outras quatro. Cada harmonia é uma regra sobre o matiz (a posição da cor na roda de 0° a 360°), mantendo saturação e luminosidade próximas. Cores de que você gostou podem ser travadas com o cadeado antes de gerar uma paleta aleatória.
| Harmonia | Regra | Matizes no exemplo |
|---|---|---|
| Complementar | Base e oposta (+180°) | 217° e 37° |
| Análoga | Vizinhas (±30° e ±60°) | 157°, 187°, 217°, 247°, 277° |
| Tríade | Três cores a 120° | 217°, 337°, 97° |
| Tetrádica | Quatro cores a 90° | 217°, 307°, 37°, 127° |
| Monocromática | Mesmo matiz, luminosidade diferente | 217° em 5 tons |
Uma convenção comum de design é usar uma cor dominante, uma secundária e uma de destaque. É só convenção, então teste sempre com o conteúdo real.
Cores hexadecimais: como converter HEX, RGB, HSL e CMYK
Um código HEX como #3B82F6 guarda as quantidades de vermelho, verde e azul em base 16, e equivale a rgb(59, 130, 246). Para converter HEX em RGB, leia cada par de dígitos como um número hexadecimal: 3B = 59, 82 = 130 e F6 = 246. A ferramenta mostra também HSL, HSV e CMYK.
Na aba «Códigos da cor», selecione uma cor da paleta para ver todos os formatos e copie cada um com um clique. A mesma cor aparece de várias formas:
| Formato | Valor |
|---|---|
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
O CMYK aqui é uma conversão matemática simples. Gráficas usam perfis de cor próprios, então o resultado impresso pode diferir do que aparece na tela. Para telas e sites, use HEX, RGB ou HSL. Também dá para colar rgb() ou hsl() no campo de código, e a ferramenta converte.
Contraste de cores (WCAG): qual a taxa mínima?
As WCAG 2.1 pedem taxa de contraste mínima de 4,5:1 para texto normal e 3:1 para texto grande, no nível AA. No nível AAA, os mínimos são 7:1 e 4,5:1. A taxa vai de 1:1 (cores iguais) a 21:1 (preto sobre branco). A aba «Contraste WCAG» calcula e mostra aprovado ou reprovado.
A taxa compara a luminância relativa das duas cores, calculada com a fórmula definida nas WCAG. Texto grande significa pelo menos 18 pontos, ou 14 pontos em negrito. Elementos de interface, como bordas de campos e ícones, pedem 3:1 no nível AA.
| Cor do texto | Taxa | Texto normal AA |
|---|---|---|
| #000000 | 21:1 | Aprovado |
| #1F2937 | 14,67:1 | Aprovado |
| #767676 | 4,54:1 | Aprovado |
| #777777 | 4,48:1 | Reprovado |
| #3B82F6 | 3,68:1 | Reprovado (só texto grande) |
O contraste ajuda pessoas com baixa visão, mas não só elas: telas sob sol forte também pedem mais contraste. As WCAG são a referência técnica mais usada em acessibilidade digital.
Como identificar a cor de uma imagem
Para descobrir o código de uma cor em uma imagem, envie o arquivo na aba «Cor de uma imagem» e clique no ponto desejado. A ferramenta lê o pixel e mostra o HEX. Ela também lista as cores predominantes. A imagem é processada no navegador e nunca é enviada a um servidor.
Use para extrair a cor de um logotipo, de uma foto de produto ou de uma referência de design. O botão «Usar como cor base da paleta» leva a cor para a aba de paleta e gera as harmonias. A cor lida é a do pixel clicado: fotos têm ruído e compressão, então pixels vizinhos podem ter códigos um pouco diferentes. As cores predominantes agrupam tons parecidos, e por isso são uma boa primeira pista para montar uma paleta.
Gerador de cores aleatório e exportação em CSS
O botão «Paleta aleatória» sorteia uma cor base e uma harmonia, e gera cinco cores prontas para usar. Cores travadas com o cadeado são mantidas. O campo de exportação entrega a paleta como variáveis CSS (--cor-1 a --cor-5), que você copia e cola na folha de estilo do seu projeto.
Exemplo de saída: :root { --cor-1: #3b82f6; }. Depois, no CSS, use color: var(--cor-1);. Cada cor ganha também um nome aproximado em português, como «Azul royal» ou «Vinho», escolhido pela menor distância entre a sua cor e uma lista fixa de 35 nomes. É uma referência, não uma classificação oficial.
Precisa de outras contas do dia a dia? O conversor de medidas cobre comprimento, massa, temperatura e mais.
Perguntas frequentes
Como criar uma paleta de cores?
Escolha uma cor base e uma harmonia, como complementar ou análoga. A ferramenta calcula as outras cores variando o matiz na roda de cores. Depois ajuste, trave as cores de que gostou e copie os códigos HEX ou o CSS pronto.
O que são cores complementares, análogas e em tríade?
Complementares ficam em lados opostos da roda de cores (180°), como azul e laranja. Análogas são vizinhas, a 30° ou 60° da base. Tríade usa três cores a 120° uma da outra, o que dá contraste vivo e equilíbrio.
Como converter HEX em RGB?
Separe o código HEX em três pares e converta cada um de base 16 para decimal. Em #3B82F6, 3B vale 59, 82 vale 130 e F6 vale 246, ou seja, rgb(59, 130, 246). A ferramenta faz isso sozinha e também mostra HSL e CMYK.
Qual a taxa de contraste mínima para acessibilidade?
Pelas WCAG 2.1, nível AA, é 4,5:1 para texto normal e 3:1 para texto grande e elementos de interface. No nível AAA, 7:1 para texto normal e 4,5:1 para texto grande. Preto sobre branco chega a 21:1.
Como descobrir o código de uma cor em uma imagem?
Abra a aba «Cor de uma imagem», escolha o arquivo e clique no ponto que quer medir. O HEX aparece na hora. A imagem fica no seu navegador, não é enviada a nenhum servidor, e as cores predominantes são listadas.
Qual a diferença entre RGB e CMYK?
RGB mistura luz (vermelho, verde e azul) e é o padrão de telas. CMYK mistura tintas (ciano, magenta, amarelo e preto) e é o padrão de impressão. Por isso a conversão aqui é aproximada: uma gráfica usa perfis de cor próprios.
As cores da imagem ou da paleta são salvas em algum lugar?
Não. Tudo é calculado no seu navegador: a imagem, as cores e os códigos nunca são enviados a um servidor, e nada fica armazenado depois que você fecha a página. Se quiser guardar a paleta, copie o CSS ou a lista de HEX.