Como são calculados os tons?

Os tons são calculados misturando a cor base com branco (para tons mais claros 50-400) e preto (para tons mais escuros 600-950), com interpolação perceptualmente equilibrada.

Posso usar isto para o meu sistema de design?

Sim — a exportação de configuração Tailwind está pronta para colar em seu tailwind. config.js para cores de marca personalizadas.

Gerador de Sombras de Cor

Introduza qualquer cor hex e gere instantaneamente 10 tons (50-950) no estilo Tailwind CSS — view swatches, clique para copiar e exporte configs.

Base Color

Was this tool helpful?

Send Image to:

How to use Color Shades Generator

Digite uma cor hexadecimal ou use o seletor de cores.
Veja a escala de 10 tons gerada de 50 a 950.
Clique em swatches individuais para copiar códigos hex, ou use os botões de exportação para uma configuração completa.

O que é {nome}?

A criação de escalas de cores consistentes é essencial para sistemas de design. Esta ferramenta pega qualquer cor hex base e gera um conjunto completo de 10 tons de 50 (mais leve) a 950 (darkest), seguindo a convenção de escala de cores Tailwind CSS.

Cada tom é exibido como um swatch de cores com seu código hexadecimal. Clique em qualquer swatch para copiar o feitiço para sua área de transferência. Exportar a paleta completa como valores hex, propriedades personalizadas CSS ou um objeto de configuração Tailwind CSS pronto para usar.

FAQ

Como são calculados os tons?: Os tons são calculados misturando a cor base com branco (para tons mais claros 50-400) e preto (para tons mais escuros 600-950), com interpolação perceptualmente equilibrada.
Posso usar isto para o meu sistema de design?: Sim — a exportação de configuração Tailwind está pronta para colar em seu tailwind. config.js para cores de marca personalizadas.

Related tools

Author

Aisha Rahmani"The Visual Storyteller"

Design Technologist & Media Specialist

Aisha bridges the gap between pixels and code. With expertise in image processing, SVG optimization, and video compression, she helps creators, designers, and marketers prepare media that looks great and loads fast. She has spoken at design conferences about accessible visual content and has helped agencies reduce page-weight budgets by up to 60 percent without sacrificing creative quality.

📖 Color Shades Generator on Wikipedia·Image Tools on Wikipedia·Color Shades Generator on Britannica

People also use

← Back to Image Tools · All tags

Gerador de Sombras de Cor

Something went wrong

How to use Color Shades Generator

O que é {nome}?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts