Gerador de tons e sombras

• Geração instantânea de tons e sombras: o gerador atualiza toda a sua paleta a cada mudança de cor sem nenhum atraso. Clique em qualquer amostra para copiar seu código HEX na hora — sem botão para pressionar.
• Seguro e 100% privado: toda a geração de tons e sombras roda inteiramente no seu navegador. Seus dados de cor nunca são enviados a nenhum servidor — seguro para cores de marca não lançadas e sistemas de design confidenciais.
• Exporte como variáveis CSS, config do Tailwind ou lista HEX: exporte sua paleta gerada em três formatos: propriedades personalizadas CSS (:root), objeto de configuração do Tailwind CSS ou lista HEX simples. Nome de variável e número de etapas configuráveis (5, 8, 10 ou 12 etapas).
• 100% grátis — sem cadastro: totalmente grátis, sem conta, sem plano premium, sem limites de uso e sem anúncios bloqueando a interface. Gere tons e sombras quantas vezes precisar.

• Escalas de cor para sistemas de design: engenheiros de design system usam o gerador para construir escalas de cores completas para bibliotecas de componentes. Exporte diretamente como variáveis CSS ou config do Tailwind para integrar ao seu pipeline de design tokens.
• Expansão da paleta de marca: designers de marca usam o gerador para expandir uma única cor de marca em uma paleta completa de variantes mais claras e escuras — oferecendo a variedade necessária para fundos, bordas, estados de hover e texto.
• Bibliotecas de cor do Figma e Sketch: designers de interface usam o gerador para criar bibliotecas de cores no Figma e Sketch. Copie os códigos HEX da tabela de amostras e cole diretamente nos estilos de cor da sua ferramenta de design.
• Sites de e-commerce e marketing: desenvolvedores web usam o gerador para criar estados de hover, estados ativos e variantes de fundo a partir de uma única cor de marca — garantindo consistência visual em páginas de produto e landing pages.
• Adaptação de cores para modo escuro: desenvolvedores que criam temas escuros usam o gerador para encontrar variantes mais claras adequadas de suas cores base para fundos escuros — garantindo contraste suficiente sem alterar o tom da marca.
• Cores personalizadas do Tailwind CSS: desenvolvedores de Tailwind CSS usam o gerador para criar escalas de cores personalizadas que seguem a convenção de nomes 50-900 do Tailwind. Exporte diretamente como objeto de configuração do Tailwind e cole no tailwind.config.js.

Na teoria das cores, um tom é uma cor misturada com branco, o que a deixa mais clara e menos saturada. Uma sombra é uma cor misturada com preto, o que a deixa mais escura e mais saturada. Juntos, tons e sombras formam uma escala de cores — uma faixa de valores do quase branco ao quase preto que compartilham o mesmo tom da cor base. Escalas de cores são a base dos sistemas de design modernos: fornecem toda a variedade de valores necessária para fundos, bordas, texto, estados de hover e indicadores de foco, mantendo a consistência visual. Nosso gerador de tons e sombras no navegador cria essas escalas na hora a partir de qualquer cor base usando interpolação RGB linear.

1. Insira sua cor base: digite um valor HEX (por ex. #3b82f6 ) ou RGB no campo de cor, ou use o seletor de cor nativo. Você também pode escolher uma cor predefinida para começar rápido.
2. Escolha o número de etapas: selecione 5, 8, 10 ou 12 etapas por lado. Mais etapas oferecem granularidade mais fina para sistemas de design complexos; menos etapas funcionam melhor para paletas simples. O gerador atualiza a paleta na hora a cada mudança.
3. Copie ou exporte: clique em qualquer amostra para copiar seu código HEX. Use o painel de exportação para copiar a paleta completa como propriedades personalizadas CSS, um objeto de configuração do Tailwind CSS ou uma lista HEX simples — com um nome de variável configurável.

• Fórmula do tom: cada tom é calculado interpolando linearmente entre a cor base e o branco (RGB 255, 255, 255). Um tom na razão r = base × r + branco × (1 − r). O tom mais claro tem o menor valor de r (mais próximo do branco); o tom mais escuro tem o maior valor de r (mais próximo da base).
• Fórmula da sombra: cada sombra é calculada interpolando linearmente entre a cor base e o preto (RGB 0, 0, 0). Uma sombra na razão r = base × r. A sombra mais clara tem o maior valor de r (mais próximo da base); a sombra mais escura tem o menor valor de r (mais próximo do preto).
• Distribuição das etapas: as etapas são distribuídas uniformemente entre a cor base e o branco/preto, excluindo os extremos puros. Isso garante que a paleta tenha espaçamento visual consistente entre cada etapa.
• Formatos de saída: valores HEX, RGB e HSL são fornecidos para cada amostra. A representação HSL é útil para entender como a luminosidade muda ao longo da escala enquanto o tom e a saturação permanecem aproximadamente constantes.

Um tom adiciona branco a uma cor (aumenta a luminosidade, reduz a saturação). Uma sombra adiciona preto a uma cor (reduz a luminosidade, pode aumentar ou reduzir a saturação). Uma tonalidade adiciona cinza a uma cor (reduz a saturação sem alterar a luminosidade de forma tão drástica). Nosso gerador foca em tons e sombras — as variantes mais necessárias em sistemas de design de interface. Para gerar tonalidades, use a ferramenta Misturador de cores para combinar sua cor base com um cinza neutro.