Paleta de Cores

Gerador de escala de cores

Escolha uma cor e veja na hora toda a escala, do tom mais claro ao mais escuro. Toque em qualquer tom para copiar o código HEX.

Escala de 50 a 950

Onze tons da mesma família de cor, ordenados como no Tailwind. Sua cor fica marcada no tom que corresponde a ela.

Tons claros (com branco)

Toque em um tom para copiar o HEX.

Sombras (com preto)

Tons acinzentados (com cinza)

Exportar a escala

O que é uma escala de cores

É a série de tons que saem de uma mesma cor: de uma versão quase branca até uma quase preta. Todos têm o mesmo tom de base, por isso combinam entre si sem esforço.

Tons claros, sombras e tons acinzentados

Um tom claro é a cor misturada com branco: mais leve e suave. Uma sombra é a cor misturada com preto: mais escura e profunda. Um tom acinzentado é a cor misturada com cinza: mais sóbrio e elegante.

Como usar uma escala no seu design

Use os tons claros (50 a 200) para fundos, os médios (400 a 600) para botões e links, e os escuros (700 a 950) para textos e bordas. Com uma só escala você tem uma interface organizada e coerente.

Perguntas frequentes

Como a escala é calculada?

Usamos o espaço de cor OKLCH, que imita como o olho percebe a luminosidade. Assim os passos entre os tons ficam uniformes, sem saltos bruscos.

O que significam os números de 50 a 950?

É a escala usada pelo Tailwind CSS e por muitos design systems: 50 é o tom mais claro e 950 o mais escuro. Sua cor fica no número que melhor corresponde a ela.

Posso usar a escala no Tailwind ou no CSS?

Sim. Digite um nome, escolha o formato e copie o código: variáveis CSS prontas para colar ou o bloco de cores para a configuração do Tailwind.

Qual a diferença entre escala e paleta de cores?

Uma escala são tons de uma mesma cor. Uma paleta junta cores diferentes que combinam. Muitas paletas usam uma escala para fundos e textos, e uma ou duas cores de destaque.

Outros guias e ferramentas