O que é Paleta Monocromática?

Escolha uma cor base e gere tons escuros e claros a partir dela. Defina o número de etapas e exporte como variáveis CSS, configuração Tailwind, ou copie valores hex/RGB individuais.

Escolha qualquer HEX ou use o seletor de cores, defina quantos claros (mais luz), tons (misturados com cinza) e escuros (mais sombra) você quer, e a página interpola cada escala no espaço LAB para que os passos pareçam uniformes. Cada amostra mostra HEX, RGB e HSL com cópia em um clique, e Copiar tudo pega a escala inteira de uma vez. Filtre a visualização para ver só claros, tons ou escuros, ou exporte toda a escala como variáveis CSS, um trecho de configuração do Tailwind, variáveis SCSS, tokens de design JSON ou uma folha de amostras PNG.

Como usar

1. Escolha uma cor base no seletor, digite um código hex ou puxe a cor dominante de um logo ou foto com Da imagem.
2. Ajuste quantos claros (mais luminosos), tons (mistura com cinza) e escuros (mais sombrios) você quer, e use o filtro Mostrar se precisar ver só uma linha.
3. Copie valores de cores individuais, toque em Copiar tudo para pegar todos os HEX de uma vez, ou exporte toda a paleta como propriedades personalizadas CSS, um objeto de configuração Tailwind, variáveis SCSS, tokens de design JSON ou uma amostra de imagem.

Quando usar

• Montar um design system de UI que precisa de nove passos consistentes da cor de marca para componentes e estados.
• Criar uma visualização de dados em que todas as séries devem sair do mesmo tom (mapas de calor, barras sequenciais).
• Decidir combinações de texto e fundo: fundo -100 com texto -900 costuma cair em uma faixa de contraste segura.

Resultado

Você está criando um painel e precisa de uma paleta azul para visualização de dados. Escolhe #3B82F6 como base, gera 9 etapas de quase branco (#EBF2FE) a quase preto (#1A2744). Exporta como variáveis CSS e usa --color-blue-100 a --color-blue-900 em todos os gráficos.

Perguntas frequentes

O que é uma paleta monocromática, exatamente?

É um conjunto de cores que compartilham o mesmo matiz, mas variam em saturação e luminosidade. O resultado parece uma família única (tons mais escuros e mais claros do mesmo azul, por exemplo) e evita o ruído visual de misturar matizes distintos.

Quantos passos vale a pena gerar?

Em UI o padrão é nove (Tailwind, Material e IBM Carbon usam escalas 50-900). Para visualização de dados, 5-7 passos costumam dar conta. Acima de 11 começa a parecer um gradiente e os passos vizinhos ficam difíceis de distinguir.

Qual formato exportar?

Variáveis CSS entram em qualquer stylesheet. O trecho Tailwind vai em theme.extend.colors e libera utilitários como bg-brand-500. O SCSS te dá as variáveis $brand-500 e um mapa Sass. O JSON exporta a escala como tokens de design estruturados para um style dictionary. A folha PNG é boa para compartilhar no Figma ou em um manual de marca.

Por que os tons mais claros ficam apagados?

Com luminosidade muito alta o olho percebe quase qualquer cor saturada como branco. Se o -100 fica indistinguível do branco, reduza a quantidade de tons claros ou aproxime o teto de luminosidade do tom base; os passos voltam a se diferenciar.

As cores geradas são acessíveis?

Agora dá para conferir aqui mesmo. Ligue o selo de contraste WCAG e cada amostra mostra se o texto preto ou branco passa em AA ou AAA sobre ela; a prévia de visão de cores recolore a escala como alguém com deuteranopia, protanopia ou tritanopia a veria. Regra rápida: combine um passo -100/-200 com um -700/-800 e você costuma passar no WCAG AA.

Ferramentas relacionadas