Gerador de Paletas Monocromáticas
As cores e paletas são geradas neste navegador. No modo por passos, o projeto fica até 30 minutos no armazenamento da sessão deste separador; nenhum valor de cor passa pelos nossos servidores nem entra no URL.
Crie uma escala monocromática
Insira uma cor e escolha a transformação, o espaço de interpolação e o número de amostras.
Formatos aceites: #RGB, #RRGGBB, rgb(0–255) e hsl() com percentagens. Canais alfa não são aceites.
Usado nas exportações de variáveis CSS, Tailwind, SCSS e tokens de design.
Escolha uma cor base e o gerador cria uma paleta monocromática ao redor dela: matizes (misturadas progressivamente com branco para uma escala mais clara), sombras (misturadas progressivamente com preto para uma escala mais escura) e tons (misturadas com cinza para reduzir a saturação). Útil para sistemas de design que precisam de uma escala coerente a partir de uma cor de marca, como a escala 50–950 do Tailwind, mas ajustável, ou para escolher estados de hover e ativos sem sair da paleta.
Como a paleta é gerada
-
1
Insira uma cor base
Use #RGB, #RRGGBB, canais rgb() inteiros ou percentagens hsl().
-
2
Escolha o tipo de paleta
Escolha uma escala clara e escura completa, matizes em direção ao branco, sombras em direção ao preto ou tons em direção ao neutro.
-
3
Escolha a contagem de passos
5, 9 ou 11 passos. Nove usa os rótulos comuns 100–900 ao estilo Material; 11 acrescenta 50 e 950 para uma escala ao estilo Tailwind.
-
4
Copie ou exporte
Copie HEX, RGB, HSL ou OkLCH, ou exporte CSS, Tailwind, SCSS e JSON do Design Tokens Community Group.
Matizes vs. sombras vs. tons
- Matiz = cor base + branco. Mais clara, mais pastel.
mix(base, #fff, p%)onde p é a porcentagem de branco. - Sombra = cor base + preto. Mais escura, mais sombria.
mix(base, #000, p%). - Tom = cor base + cinza. Mesma luminosidade, menor saturação, mais suave.
As três transformações produzem diferentes caracteres visuais: matizes parecem arejadas e otimistas, sombras parecem sólidas e sérias, tons parecem discretos e sofisticados.
Uma escala de 9 passos a partir de uma base
| Passo | Descrição | Uso típico |
|---|---|---|
| 100 | Muito claro | Superfícies, fundos de chip |
| 200 | Claro | Estados desativados |
| 300 | Médio-claro | Bordas, divisores |
| 400 | Levemente apagado | Texto secundário (bg claro) |
| 500 | Cor base | Marca padrão, sua linha de base |
| 600 | Médio-escuro | Estados de hover em ações primárias |
| 700 | Escuro | Estados ativos, cabeçalhos |
| 800 | Muito escuro | Texto forte em bg claro |
| 900 | Sombra mais escura | Texto de máximo contraste |
Os rótulos numéricos inspiram-se em convenções comuns de tokens; as cores geradas não são valores oficiais do Material ou Tailwind.
Por que o monocromático funciona para interfaces
- Familiaridade. Cada elemento parece inconfundivelmente relacionado.
- Coerência. Reutilizar um único matiz facilita reconhecer relações, mas não torna uma interface automaticamente acessível para pessoas daltônicas.
- Simplicidade. Uma decisão, a cor base, impulsiona toda a paleta.
Combinando com neutros
Uma paleta monocromática também precisa de cinzas. Padrão comum:
- Escala primária a partir da sua cor de marca (9 passos).
- Escala neutra a partir de uma versão dessaturada da primária (9 passos).
- Talvez uma cor de destaque (um único passo bem escolhido para alertas e CTAs).
Use esta estrutura como ponto de partida, não como regra fixa. O número de paletas depende dos estados, da visualização de dados, das cores semânticas e dos requisitos de acessibilidade do produto.
Pontos de verificação de contraste
Para texto em um fundo, o WCAG exige 4.5:1 para texto normal e 3:1 para texto grande. Rótulos como 100, 500 ou 900 não implicam uma relação de contraste específica; o resultado depende da cor base, do tipo de paleta e do espaço de interpolação.
Sempre verifique as combinações específicas que você planeja usar contra um verificador de contraste.
Exportando para seu sistema de design
Formatos de saída:
- Propriedades personalizadas CSS:
--primary-50: #f0f9ff; --primary-100: ... - Configuração do Tailwind: objeto JS pronto para colar em
tailwind.config.js → theme.extend.colors. - Mapa SCSS para projetos Sass.
- JSON de tokens de design com a estrutura
$typee$valuedo Design Tokens Community Group.
Perguntas frequentes
Os matizes avançam de propósito em direção ao branco, por isso uma base muito saturada pode ficar pastel depressa. Compare HSL e OkLCH, use menos amostras ou escolha uma base menos saturada.
Pode escolher HSL ou OkLCH. HSL altera os eixos de luminosidade e saturação; OkLCH altera a luminosidade percetual e o croma, reduzindo o croma quando necessário para manter o resultado dentro de sRGB.
Na escala completa, a cor base é o token 500 central. A escala de matizes termina na base, a de sombras começa nela e a de tons termina nela. Os rótulos não garantem uma luminosidade específica.
Não existe integração direta com o Figma. Copie valores individuais ou use o texto CSS, Tailwind, SCSS ou JSON do Design Tokens Community Group como ponto de partida para o seu fluxo.
Ferramentas relacionadas
Vetorizador de PNG para SVG
Transforme imagens raster PNG em caminhos SVG no navegador. Ideal para logotipos, ícones e desenhos lineares. Controle limiar, quantidade de cores e suavização.
Gerador de letras de grafite
Crie letras de grafite com efeitos tag, bubble, block, estêncil, neon e wild. Ajuste as cores e exporte PNG ou SVG diretamente no navegador.
BMP para PNG
Converta arquivos BMP para PNG no navegador. Sem perdas, preserva a profundidade de cor e adiciona transparência opcional do canal alfa BMP original.
Redimensionador de imagens em lote
Arraste várias imagens, ajuste ou estique para um tamanho alvo e exporte JPG, PNG ou WebP em um único ZIP. O processamento fica no seu navegador.
Quadro branco online
Desenhe ideias e organize formas, notas e imagens locais em um quadro branco privado no navegador. Exporte PNG, JPEG, SVG ou JSON editável.
Ampliador de imagens
Amplie imagens de baixa resolução em 2×, 3× ou 4× com super-resolução por IA ou interpolação clássica, preservando detalhes importantes.