Gerador de paleta de cores grátis

Exemplo prático

Abra a página e a caixa “Cor base” já contém #14b8a6, com “Paleta de marca” selecionada. Sete amostras aparecem sob “Paleta de marca · 7 cores”: #14B8A6 (Base), #EE66BA (Destaque), #E5FAF8 (Tom claro), #14524A (Tom escuro) e três neutras tingidas com o mesmo matiz, #F3F6F6, #63837F e #1A2322. O cartão Base mostra “Sobre branco 2.5” com “Reprovado” e “Sobre preto 8.4” com “AAA”. Clique em “Complementar” e a faixa cai para duas cores, #14B8A6 e #EF7381. Em “Formato de cópia”, escolha RGB e clique em “Copiar tudo”. Um aviso diz “2 cores copiado” e a área de transferência contém rgb(20, 184, 166), rgb(239, 115, 129). Em “Verificação de texto e fundo”, a cor do texto começa como #000000 sobre o fundo #14B8A6 e mostra 8.44:1, “Texto normal AAA”, “Texto grande AAA”.

Quais configurações usar e os limites

• Digite a cor na forma em que você a tem. A caixa “Cor base” aceita um código hex com ou sem o #, com 3 ou 6 dígitos, um nome CSS como teal ou tomato, um valor rgb() ou hsl() (qualquer alfa é ignorado) ou números soltos como 20 184 166. Espaços nos nomes são ignorados, então “rebecca purple” funciona. Um hex completo de 6 dígitos é aplicado enquanto você digita. Qualquer outra coisa é aplicada quando você pressiona Enter ou sai da caixa. Hex com 8 dígitos e oklch() não são lidos. As bolinhas definem uma de oito cores iniciais, e o quadrado abre o seletor de cores do seu sistema.
• Escolha o tipo de paleta conforme o trabalho. “Paleta de marca” dá 7 cores com funções: Base, Destaque, Tom claro, Tom escuro e três neutras. “Complementar” dá 2, “Análogos” 4, “Tríade” 3, “Complementar dividido” 3, “Tétrade” 4, “Monocromático” 5 e “Tons” 7. Monocromático mantém a sua cor e varia a luminosidade em passos. Tons é uma escala fixa de 10 a 90 por cento de luminosidade no seu matiz e saturação, e não inclui a sua cor exata. Os tipos que giram o matiz (Complementar, Análogos, Tríade, Complementar dividido, Tétrade) buscam uma luminosidade percebida semelhante, mantida em uma faixa média.
• Trave o que você gostou e depois embaralhe. Clique em “Travar esta cor” em uma amostra e depois em “Embaralhar”, ou escolha uma nova base. As amostras travadas mantêm a cor e as demais mudam. “Embaralhar” sorteia uma base com saturação HSL de 50 a 84 e luminosidade de 40 a 57, então cai em tons médios. As travas seguem a posição da amostra, não a cor: trave a amostra 1, mude a base, e a amostra 1 mantém a cor antiga. “Editar esta cor” abre um seletor de cores para uma amostra e acrescenta “(editada)” ao título. Uma amostra editada que você não travou é substituída na próxima vez que a paleta for regenerada.
• Confira o contraste antes de publicar. Cada cartão mostra as razões “Sobre branco” e “Sobre preto” com um selo: “AAA” a partir de 7:1, “AA” a partir de 4.5:1, “AA grande” a partir de 3:1 e, abaixo disso, “Reprovado”. As razões usam a fórmula de luminância relativa da WCAG. Em “Verificação de texto e fundo”, você escolhe uma cor de texto e um fundo entre a paleta, o branco e o preto. A linha “Texto normal” dá AAA em 7 e AA em 4.5. A linha “Texto grande” dá AAA em 4.5 e AA em 3. Teste os pares exatos que pretende usar, porque uma paleta não é legível só porque cada cor é.
• Escolha o formato de cópia e depois a exportação. “Formato de cópia” define o que um clique em uma amostra, em um chip de tom claro ou escuro e em “Copiar tudo” copia: hex, rgb, hsl ou oklch. Para a base, isso fica #14B8A6, rgb(20, 184, 166), hsl(173, 80%, 40%) e oklch(70.4% 0.123 182.5). Em “Exportar:”, os botões salvam palette.css, palette.scss, tailwind-colors.js, tailwind-scales.js (“Tailwind 50-950”), palette.json, palette.png, palette.svg, palette.gpl, palette.ase e palette.aco. Os arquivos de texto guardam valores hex, e o JSON acrescenta strings rgb, hsl e oklch. O PNG tem 200 px de largura por amostra, o SVG 160 px. “Rótulos hex em PNG/SVG” vem marcado por padrão.
• Compartilhe o link ou comece por um modelo. “Compartilhar resultado” cria um link que guarda a cor base, o tipo, as edições e as travas depois do # no endereço; em um dispositivo de toque que oferece suporte, abre a folha de compartilhamento. Uma paleta compartilhada pode ter de 1 a 12 cores. Em “Experimente estas”, “Pastel”, “Terrosa”, “Neon” e “Segura para marcas (AA)” carregam, cada uma, 5 cores como uma paleta “Personalizada”, e mudar a base depois volta para “Paleta de marca”. “Capturar da tela” só aparece em navegadores que têm o recurso EyeDropper, principalmente os baseados em Chromium.

Problemas comuns e como resolvê-los

Aparece “Não reconhecemos essa cor. Tente #14b8a6, teal ou rgb(20, 184, 166).”

O texto não pôde ser lido como cor, e a caixa volta para a base atual. As causas comuns são hex com 4 ou 8 dígitos, como #14b8a680, um valor oklch(), um nome de cor que não é um nome CSS e números fora do intervalo, como rgb(300, 0, 0) ou hsl(10, 120%, 50%). Digite de novo como hex de 3 ou 6 dígitos, um nome CSS, ou rgb() ou hsl() com valores dentro do intervalo, e pressione Enter.

Escolhi uma nova cor base, mas uma amostra manteve a cor antiga.

Essa amostra está travada. O botão de trava no cartão fica verde-azulado, e a dica dele diz “Destravar esta cor”. As amostras travadas são mantidas sempre que a paleta é regenerada, inclusive depois de uma nova base, de um novo tipo ou de “Embaralhar”. Clique na trava de novo para soltá-la. As travas estão ligadas à posição da amostra, então uma trava na amostra 1 continua valendo depois de você passar de “Paleta de marca” para “Tríade”.

Um aviso diz “Não foi possível copiar”.

As duas vias da área de transferência falharam: a API de área de transferência do navegador e, depois, uma caixa de texto oculta com um comando de cópia. A API de área de transferência não existe em páginas que não são seguras e em alguns quadros isolados, e um navegador também pode recusá-la quando a página não está em foco. Clique uma vez na página e tente de novo, ou abra a página em uma aba normal do navegador. Se a cópia continuar bloqueada, use os botões de exportação CSS, JSON ou Tailwind para salvar um arquivo.

Não há botão “Capturar da tela”.

O botão só é adicionado quando o navegador tem o recurso EyeDropper, e as perguntas frequentes da página dizem que são principalmente os navegadores baseados em Chromium. Onde ele não existe, use a caixa de cor quadrada ao lado do campo de texto, ou digite o código hex que você leu em outro aplicativo. Pressionar Esc durante a captura a cancela em silêncio, e uma captura que falha por outro motivo não mostra mensagem na página.

O PNG ou SVG salvo não tem códigos hex nas amostras.

A caixa “Rótulos hex em PNG/SVG” está desmarcada. Ela vem marcada quando a página abre, então alguém a desmarcou. Com ela marcada, cada amostra leva o seu código hex em maiúsculas, com tinta escura ou clara escolhida pelo contraste. A caixa afeta apenas os arquivos PNG e SVG. As outras exportações guardam os próprios valores de cor e não têm rótulos. Marque a caixa e clique em PNG ou SVG de novo.

Como se compara

Esta página cria uma paleta a partir de uma cor com regras fixas do círculo cromático, avalia o contraste com as razões da WCAG e exporta para arquivos de código e de design. Ela não extrai cores de uma foto (para isso, a página tem um link para o extrator de cores de imagem), não simula daltonismo, não dá nome às cores e não guarda paletas em uma conta. Seu trabalho fica guardado na barra de endereços, depois do #, então recarregar a página ou usar um favorito o traz de volta. As regras de harmonia dão um ponto de partida, não uma marca pronta. Um aplicativo de design ou um guia de marca continua sendo o lugar para decidir as funções e testar a paleta em layouts reais.