Como escolher uma paleta de cores (para site, marca ou design)
Escolher cores "no olho" é a forma mais rápida de um design parecer amador. Uma boa paleta não é uma lista de cores bonitas: é um sistema —poucas cores com papéis claros e suas variantes— que faz tudo o que você monta parecer coerente. Este guia mostra como definir uma paleta que funciona, como derivá-la de uma imagem que você curte, e como deixá-la pronta para o seu projeto.
O erro mais comum: cores demais sem papel
Muita gente junta 8 ou 10 cores que gosta e usa sem critério. O resultado é ruído. Uma paleta profissional se organiza por papéis, não por gostos:
- Primária: a cor da sua marca, a que mais se repete (botões, links, acentos).
- Secundária / acento: uma ou duas cores de apoio para destacar coisas pontuais.
- Neutra: uma escala de cinzas para fundos, bordas e texto. É a mais usada, mesmo que não pareça.
- Estado: sucesso (verde), aviso (âmbar), erro (vermelho), info (azul). Convenções que o usuário já entende.
De onde tirar as cores
Não precisa inventar do zero. As melhores paletas costumam derivar de uma referência: uma foto, uma obra de arte, um produto, uma paisagem. Se você já tem uma imagem cuja combinação adora, extraia suas cores dominantes com um extrator de paleta: você envia a imagem e recebe os HEX exatos. A partir daí, atribui papéis.
Passo a passo
- Escolha uma referência cuja combinação de cores você gosta.
- Extraia suas cores dominantes com o HEX.
- Atribua papéis: primária, secundária, neutra e estados.
- Gere uma escala de cada cor (claro a escuro).
- Exporte para variáveis CSS ou Tailwind para usar de forma consistente.
Nós testamos: de uma foto a uma paleta usável
Carregamos uma foto e o Color Studio extraiu uma paleta de 6 cores (ajustável). O conta-gotas mostra o HEX exato ao passar o mouse pela imagem, e com um clique você fixa e copia.
A parte prática para design e web: além de copiar os HEX, exporta a paleta como variáveis CSS ou JSON, pronta para colar num projeto. Sem cadastro e sem enviar a imagem.
As escalas 50–900: o truque dos design systems
Uma versão de uma cor não basta. Você precisa da primária clara para um
fundo suave, média para um botão, escura para texto sobre claro. Por isso
os design systems (Material, Tailwind) usam escalas: do
50 (quase branco) ao 900 (quase preto), mantendo o
tom. Com uma escala por papel você tem todas as variantes de que vai
precisar sem improvisar. O Color Studio pode gerar essas escalas —e os
tokens semânticos— e copiá-las como CSS ou Tailwind, prontas para colar.
Regras rápidas de harmonia
- 60-30-10: ~60% de uma cor dominante (quase sempre a neutra), 30% da secundária e 10% do acento. Evita que tudo compita.
- Contraste para o texto: o texto tem que ser legível. Mire um contraste alto entre texto e fundo (confira com um verificador de contraste).
- Um único acento forte: se tudo grita, nada se destaca. Reserve a cor mais saturada para o que importa.
Não esqueça a acessibilidade
Uma paleta bonita que não se entende não serve. Dois checks rápidos: contraste suficiente entre texto e fundo, e que a informação não dependa só da cor (cerca de 8% dos homens tem daltonismo). Vale simular como seu design aparece com daltonismo para se certificar.
Perguntas frequentes
Quantas cores uma paleta deve ter?
Uma primária, uma ou duas secundárias/acento, uma neutra (cinzas) e cores de estado. Com 3 a 5 cores base e suas variantes dá para cobrir quase tudo.
Como tiro uma paleta de uma imagem?
Com um extrator de paleta: você envia a imagem e recebe as cores dominantes com o HEX.
O que é uma escala de cor (50 a 900)?
Variantes de uma mesma cor, da mais clara (50) à mais escura (900), mantendo o tom. O padrão nos design systems.
A paleta funciona para pessoas com daltonismo?
Vale conferir: se a informação depende só da cor, parte dos seus usuários não distingue. Simule o daltonismo e cuide do contraste.
Extrair uma paleta de uma imagem →Mais guias e ferramentas
Extrair a paleta de cores e ver o HEX
Tire as cores dominantes de uma imagem, gere escalas 50–900 e copie CSS ou Tailwind.
Ferramentas
Todas as ferramentas de imagem do PhotoCut, no navegador e sem enviar suas fotos.