Gerador de Tons e Sombras
Gera automaticamente os tons mais claros e as sombras mais escuras de qualquer cor, com seu código HEX.
Como gerar tons e sombras de uma cor
Escolha uma cor base
Selecione a cor de partida com o seletor visual ou digite seu código HEX.
Consulte os tons e sombras
Você verá automaticamente 5 tons mais claros (tintas) e 5 mais escuros (sombras) gerados a partir de sua cor.
Copie o HEX que você precisa
Clique em qualquer amostra para copiar seu código HEX para a área de transferência.
Perguntas frequentes sobre o gerador de tons e sombras
Ter as variantes mais claras e escuras de uma cor é imprescindível para criar uma paleta de design coerente (por exemplo, para estados hover, fundos ou bordas). Esta ferramenta as calcula automaticamente.
Qual é a diferença entre um tom (tint) e uma sombra (shade)?
+
Um tom é obtido misturando a cor com branco (clarificando-a) e uma sombra misturando-a com preto (escurecendo-a).
Quantas variantes gera?
+
Gera 5 tons mais claros e 5 sombras mais escuras a partir da sua cor base, 10 no total.
Posso copiar os códigos?
+
Sim, clique em qualquer cor da lista para copiar seu código HEX.
Serve para criar uma paleta de design tipo Tailwind?
+
Sim, é exatamente o mesmo conceito das escalas de cor 50-900 que muitos sistemas de design utilizam.
É grátis?
+
Sim, esta ferramenta é completamente gratuita.
Minha cor é enviada para algum servidor?
+
Não, todo o cálculo é feito diretamente no seu navegador.
Cores
Conversor de cores (HEX, RGB, HSL, CMYK)
Converta qualquer cor entre HEX, RGB, HSL e CMYK instantaneamente, com visualização ao vivo e o nome de cor mais próximo.
Gerador de paletas de cores
Cria paletas de 5 cores harmoniosas (complementares, análogas, triádicas ou monocromáticas) a partir de uma cor base.
Gerador de Gradientes CSS
Cria gradientes lineares ou radiais com até 4 cores e copia o código CSS pronto para usar.
Verificador de Contraste WCAG
Verifique se a combinação de cores de texto e fundo atende aos níveis de acessibilidade AA e AAA.
Cor aleatória
Gera uma cor aleatória com um clique e descubra seu nome, código HEX/RGB/HSL e cores similares.
Seletor de cor (conta-gotas)
Escolha qualquer cor da sua tela com a ferramenta contagotas do navegador, ou use o seletor clássico.
Simulador de Daltonismo
Envie uma imagem e veja como pessoas com protanopia, deuteranopia ou tritanopia a veriam.
Gerador de Gradientes Mesh
Crie fundos com gradientes mesh (manchas de cor difuminadas) e baixe-os em PNG ou copie o código CSS.
Misturador de Cores
Misture duas cores e descubra os tons intermediários passo a passo, com seu código HEX.
Roda de Cores (Harmonias)
Escolha uma cor na roda e descubra suas combinações harmoniosas: complementares, análogas, triádicas e muito mais.
Extrator de Paleta de Cores da Imagem
Envie uma imagem e extraia automaticamente suas cores dominantes em uma paleta, com o código HEX de cada uma.
Cor Média de uma Imagem
Envie uma imagem e calcule instantaneamente sua cor média, com seu código HEX, RGB e HSL.
Explore as cores por família
Mais de 469 cores nomeadas, com seus códigos HEX, RGB, HSL e CMYK, organizadas em 12 famílias de tonalidades.
