Cores e Design

Gerador de Paleta de Cores

Gere paletas de 3 a 6 cores, trave as que gostar, veja a prévia aplicada e copie os códigos HEX, RGB ou o CSS pronto.

Gerador de Paleta de Cores

Quantidade de cores
  1. #264653
    HEX#264653
    RGBrgb(38, 70, 83)
  2. #2A9D8F
    HEX#2A9D8F
    RGBrgb(42, 157, 143)
  3. #E9C46A
    HEX#E9C46A
    RGBrgb(233, 196, 106)
  4. #F4A261
    HEX#F4A261
    RGBrgb(244, 162, 97)
  5. #E76F51
    HEX#E76F51
    RGBrgb(231, 111, 81)

Trave as cores que quiser manter: ao gerar uma nova paleta, só as destravadas mudam.

Prévia de aplicação

Título de exemplo

Texto de exemplo para mostrar a leitura sobre o fundo escolhido.

Botão principal
Card secundárioElemento de apoio da interface.

Código CSS

:root {
  --color-1: #264653;
  --color-2: #2A9D8F;
  --color-3: #E9C46A;
  --color-4: #F4A261;
  --color-5: #E76F51;
}

Tipos de Paleta de Cores

Uma paleta de cores é um conjunto pequeno de cores que combinam entre si e que você usa de forma consistente em um site, aplicativo ou apresentação. O gerador cria cinco tipos de combinação, todas calculadas a partir do círculo cromático:

Aleatória: cores variadas, boa para tirar ideias do papel. Monocromática: uma só cor (matiz) em tons mais claros e mais escuros; é a combinação mais segura e discreta. Complementar: a cor base e a oposta no círculo (180° de diferença), que geram contraste forte e funcionam bem para destacar botões e chamadas. Análoga: cores vizinhas no círculo, que dão uma aparência harmoniosa e suave. Triádica: três matizes igualmente espaçados (a cada 120°), com mais variedade e cores vibrantes.

Como criar uma paleta de cores

Comece escolhendo o tipo e, nos modos que partem de uma cor, a cor base, normalmente a cor da sua marca. Clique em Gerar nova paleta até aparecer uma combinação interessante e use o cadeado para manter as cores que você aprovou enquanto o resto muda.

Para um site, uma regra prática comum é usar uma cor dominante (fundo e áreas grandes), uma cor secundária (cards e apoio) e uma cor de destaque para botões e links, em proporções aproximadas de 60%, 30% e 10%. Use a prévia para ver essa distribuição e confira o contraste entre o texto e o fundo: a prévia mostra a razão de contraste e ajusta o texto quando a combinação não é legível.

Como usar as cores no CSS

Clique em Copiar CSS para levar a paleta como variáveis: :root { --color-1: #264653; }. Depois use em qualquer regra com var(), por exemplo background: var(--color-1); ou color: var(--color-3);. Assim, trocar a paleta inteira exige alterar só o bloco :root.

Se precisar de um código específico, cada cor tem os botões Copiar HEX e Copiar RGB, e Copiar paleta leva todos os HEX, um por linha.

Perguntas frequentes

O que significa travar uma cor?

Uma cor travada é mantida quando você gera uma nova paleta. Só as cores destravadas são recalculadas, então você pode "fixar" a cor da sua marca e explorar o resto.

Como a cor base é usada?

Nos modos monocromático, complementar, análogo e triádico, a paleta é calculada a partir da cor base, que aparece na paleta na primeira geração. No modo aleatório, a cor base não é usada.

As paletas geradas são acessíveis?

Nem sempre. As combinações são calculadas pelo círculo cromático, não por contraste. A prévia mostra a razão de contraste texto/fundo; para checar outras combinações, use as diretrizes WCAG (mínimo de 4,5:1 para texto normal).

As paletas ficam salvas?

Elas ficam apenas na página aberta, incluindo as paletas recentes da sessão. Ao recarregar, a página volta ao início. Copie os códigos para guardar uma paleta.

Meus dados são enviados para algum servidor?

Não. Todas as paletas são geradas no seu navegador.

Ferramentas relacionadas