Gerador de Escalas de Cor
Cria escalas de cor profissionais a partir de uma única cor base. Perfeito para construir sistemas de design consistentes e bibliotecas de componentes UI com variações de cor matematicamente precisas.
O Que São Escalas de Cor e Porque Precisas Delas?
As escalas de cor são variações sistemáticas de uma cor base que criam uma paleta harmoniosa para sistemas de design e interfaces de utilizador. Fornecem a base para uma hierarquia visual consistente, estados interativos e significado semântico em todo o teu produto. O nosso gerador profissional de escalas de cor ajuda-te a criar estas variações matematicamente, garantindo harmonia e consistência visual perfeitas.
No design UI/UX moderno, as escalas de cor são essenciais para criar experiências de utilizador intuitivas. Ajudam os utilizadores a perceber as relações visuais entre elementos, indicam estados interativos (hover, ativo, desativado) e estabelecem uma hierarquia de informação clara. Sem escalas de cor adequadas, as interfaces podem parecer inconsistentes, confusas ou pouco profissionais.
O nosso gerador cria escalas de 10 passos seguindo a convenção padrão da indústria 50-900, onde 50 representa a variação mais clara e 900 a mais escura. Este sistema é amplamente adotado por grandes sistemas de design como o Material Design, Ant Design e muitos outros.
Aplicações Práticas
- Sistemas de Design: Cria paletas de cores consistentes para aplicações de grande escala
- Bibliotecas de Componentes: Constrói componentes UI reutilizáveis com estilização consistente
- Consistência de Marca: Mantém a harmonia de cor em todos os materiais de marketing
- Acessibilidade: Garante rácios de contraste adequados para diferentes casos de uso
Tipos de Curva Explicados
Curva Suave (Recomendada)
Usa funções de easing para criar transições de cor naturais e perceptualmente uniformes
Ideal para: A maioria dos sistemas de design, progressão de cor natural
Curva Linear
Cria variações lineares matematicamente precisas entre cores
Ideal para: Aplicações técnicas, passos de cor previsíveis
A curva suave geralmente produz resultados visualmente mais agradáveis, pois tem em conta a forma como os humanos percebem as diferenças de cor, enquanto a curva linear oferece controlo matemático preciso.
Formatos de Exportação e Integração
O nosso gerador de escalas de cor suporta múltiplos formatos de exportação para se integrar perfeitamente no teu fluxo de trabalho de desenvolvimento:
Variáveis CSS
Propriedades personalizadas CSS prontas a usar no desenvolvimento web moderno
Config Tailwind
Integração direta com ficheiros de configuração do Tailwind CSS
Formato JSON
Formato legível por máquina para automação de sistemas de design
Como criar uma escala de cor 50–900 para o teu design system
Todos os design systems sérios — Tailwind, Material, Polaris — organizam as cores em escalas numeradas de 50 a 900. Isto é porque funcionam e como construir a tua.
Uma escala substitui “azul claro” e “azul mais escuro” por tokens estáveis: blue-500 para ações primárias, blue-50 para fundos subtis, blue-700 para estados hover. Os números tornam as cores previsíveis, comunicáveis e reutilizáveis entre equipas.
500 é a âncora
A tua cor de marca, ajustada para que o texto branco passe AA quando necessário.
Curva, não linha reta
Abaixo de 500 fica mais claro, acima fica mais escuro — mas as escalas perceptualmente uniformes usam uma curva de easing para que cada passo pareça igualmente diferente.
Saturação atenuada
Os passos muito claros (50–100) e muito escuros (800–900) precisam de menos saturação para não parecerem artificiais.
Mapa de uso típico
| Passo | Uso habitual |
|---|---|
| 50–100 | Fundos subtis, superfícies hover |
| 200–300 | Bordas, badges, ilustrações suaves |
| 400 | Acentos decorativos, ícones |
| 500 | Ação primária da marca |
| 600–700 | Estados hover / pressed |
| 800–900 | Texto sobre fundos claros, temas escuros |
Exporta para todo o lado
Uma escala só é útil se viver nas tuas ferramentas. O gerador acima aplica uma curva de easing percecionais, mantém o matiz estável em todos os passos — partindo do índigo #6366F1 cada passo partilha o matiz 239°, a propriedade que faz com que as escalas do azul ou da esmeralda pareçam profissionais em vez de geradas — e exporta como:
Variáveis CSS
Para projetos vanilla.
Config Tailwind
theme.extend.colors, pronta a colar.
Design tokens W3C
JSON para plugins de Figma e style dictionaries.
Uma cor base, uma curva, dez passos consistentes — é tudo o que uma paleta profissional precisa.