O que o gerador de paletas de cores faz
Esta ferramenta pega uma unica cor base e constroi uma escala completa de onze tons claros e escuros ao redor dela, numerados de 50 (o mais claro) a 950 (o mais escuro). E o mesmo tipo de rampa de cor que voce ve em sistemas de design modernos, gerada em segundos em vez de misturada a mao. Ela ajuda desenvolvedores front-end que precisam de uma paleta pronta para o Tailwind, designers que criam tokens para uma marca e qualquer pessoa que tenha uma unica cor favorita e queira uma faixa coerente do claro ao escuro para acompanha-la.
Como usar
- Escolha uma cor inicial com o seletor de cores, ou digite um codigo hex diretamente no campo.
- A ferramenta constroi instantaneamente onze tons do claro (50) ao escuro (950) a partir da sua cor base.
- Clique em qualquer amostra individual para copiar aquele codigo hex para a area de transferencia.
- Use a acao copiar tudo para pegar todos os valores da escala de uma vez.
- Cole os codigos na sua configuracao do Tailwind, no sistema de design ou na folha de estilos.
Um exemplo rapido
Insira um azul de marca como #2563eb e voce obtem uma rampa completa de 50 a 950, de um tom palido para fundos ate um tom profundo para texto e bordas. Reserve os passos mais claros (50 a 200) para preenchimentos e estados hover, sua cor base em torno de 500 ou 600 para botoes, e os passos mais escuros para contraste. Tudo roda no seu navegador, permanece privado sem nenhum envio e e totalmente gratuito sem cadastro.
Perguntas frequentes
- O que significa a escala de 50 a 950?
- Esses numeros sao os passos padrao de escala de cor usados por sistemas de design como o Tailwind. 50 e o tom mais claro e 950 e o tom mais escuro, com sua cor base situada em algum ponto no meio dos onze passos.
- Posso usar essas cores no Tailwind?
- Sim. Os onze valores correspondem diretamente as chaves de 50 a 950 do Tailwind, entao voce pode cola-los direto na configuracao do seu tema ou em qualquer arquivo de tokens de design.
- Como copio as cores?
- Clique em qualquer amostra individual para copiar o codigo hex dela, ou use a acao copiar tudo para pegar a escala inteira de uma vez. A partir dai voce pode cola-las em qualquer lugar que aceite valores hex.