Gerador de Tons de Cor
Gere tonalidades mais claras e mais escuras a partir de qualquer cor base.
Como usar Gerador de Tons de Cor
- Informe uma cor base em HEX ou RGB.
- Veja cinco tonalidades mais claras e cinco mais escuras.
- Copie qualquer valor HEX para seu design ou CSS.
Sobre Gerador de Tons de Cor
Boas interfaces usam uma gama de uma cor, em vez de um único valor plano. Cole uma cor base em HEX (#137256 ou #137) ou RGB (rgb(19,114,86)) e este gerador retorna onze valores: sua cor base, cinco tonalidades claras misturadas em direção ao branco, e cinco tonalidades escuras misturadas em direção ao preto. Isso costuma ser tudo o que você precisa para estados de hover e ativo, bordas, divisores, fundos sutis e profundidade em uma interface.
Os passos são espaçados uniformemente — cada tonalidade clara empurra cada canal RGB um sexto mais perto de 255 do que a anterior, e cada tonalidade escura o aproxima na mesma fração de 0. Cada resultado é mostrado como um código HEX que você pode copiar diretamente para o seu CSS, e a cor base é exibida como uma amostra, para que você possa confirmar que digitou o que pretendia.
Vale saber: esta é uma mistura direta em RGB, não um espaço de cor perceptual, então os passos são matematicamente uniformes, mas nem sempre parecerão igualmente espaçados a olho nu — cores base muito saturadas ou muito escuras tendem a perder definição nas extremidades da escala. A saída é apenas em HEX. Verifique qualquer combinação em que você pretenda colocar texto com o verificador de contraste, e converta valores com o conversor de cores. Tudo é executado no seu navegador.
Perguntas frequentes
Qual é a diferença entre uma tonalidade clara e uma escura?
Uma tonalidade clara é a sua cor misturada com branco, tornando-a mais clara. Uma tonalidade escura é sua cor misturada com preto, tornando-a mais escura. Esta ferramenta oferece cinco de cada uma.
Quais formatos de entrada funcionam?
HEX em três ou seis dígitos e RGB, como rgb(19,114,86). Os resultados são sempre devolvidos em HEX.
Como os passos são calculados?
Cada passo representa um sexto do caminho em direção ao branco ou ao preto. A tonalidade clara 1 é um sexto do caminho até o branco, a tonalidade clara 5 é cinco sextos do caminho, e as tonalidades escuras funcionam da mesma forma, na direção oposta.
Posso usar esses valores como uma escala de tema em CSS?
Sim. Os onze valores formam uma escala pronta para botões, estados de hover, superfícies e bordas. Copie os códigos HEX para propriedades personalizadas e faça referência a elas em toda a sua folha de estilo.
Por que meus tons mais escuros parecem quase idênticos?
Porque a mistura acontece em RGB, e não em um espaço perceptual. À medida que os canais se aproximam de zero, as diferenças entre os passos ficam mais difíceis de perceber, o que é mais perceptível em cores base escuras ou altamente saturadas.