Neste artigo
O que são sombras, matizes e tons de cor?
Uma sombra é produzida misturando uma cor com preto, tornando-a mais escura. Um matiz é produzido misturando com branco. Um tom é produzido misturando com cinza. Essas três operações criam uma paleta completa a partir de qualquer cor base.
Entender a diferença entre sombras, matizes e tons é fundamental para a teoria das cores.
Como a geração de sombras funciona
Um gerador de sombras pega uma cor base (como #3b82f6) e produz variantes mais claras e escuras manipulando a luminosidade em HSL.
- Manipulação HSL — ajusta o valor L mantendo H e S constantes
- Cálculo de passos — o intervalo é dividido em steps uniformes
- Mistura de cores — alguns geradores misturam com branco/preto/cinza
Experimente gratuitamente — sem cadastro
Gerar sombras de cor →Quando gerar sombras
Paletas de sombras são essenciais para designs coesos.
- Sistemas de design — gere uma escala completa (50-950) da cor primária da marca
- Tematização UI — crie estados hover, ativo, foco e desabilitado
- Contraste de acessibilidade — teste combinações contra os requisitos WCAG
Perguntas frequentes
Qual a diferença entre sombra e matiz?
Uma sombra é misturada com preto (mais escura), um matiz com branco (mais claro).
Quantas sombras um design system precisa?
A maioria usa 10 passos (50-950) seguindo a convenção Tailwind CSS.
Posso gerar combinações acessíveis?
Sim. Gerando uma paleta completa você pode testar pares contra os requisitos WCAG.