Gerador de tons de cores
Gere tons de uma cor misturando-a com cinza neutro em etapas iguais, o que reduz a saturação sem alterar o matiz. Informe uma cor em qualquer formato CSS, escolha de 2 a 20 etapas e um espaço de mistura e obtenha uma tabela com valores HEX, RGB, HSL e OKLCH para cada tom, começando pela cor original. Útil para paletas suaves, estados desativados, superfícies sutis e variações mais tranquilas de marca.
Perguntas frequentes
O que é um tom?
Um tom é uma cor misturada com cinza. Ele mantém o matiz e fica mais suave, ao contrário de uma tintura, que é misturada com branco, ou de uma sombra, que é misturada com preto.
Qual cinza é usado?
O cinza médio sRGB #808080, rgb(128 128 128). Portanto, cores claras ficam um pouco mais escuras e cores escuras um pouco mais claras à medida que se aproximam dele. Para misturar com outro cinza, use o Color Mixer com o cinza desejado.
Como as etapas são distribuídas?
Com N etapas, a linha k mistura a cor com (k - 1) / N de cinza; assim, 10 etapas resultam em 0%, 10%, 20% e assim por diante, até 90%. A primeira linha é sempre a cor original, e o cinza puro nunca faz parte da lista.
Em que um tom difere de reduzir a saturação HSL?
Reduzir a saturação HSL mantém a luminosidade HSL, enquanto a mistura com cinza também aproxima a luminosidade do valor médio. Por isso, os tons parecem cores vistas através de um filtro cinza, sendo adequados para fundos suaves e estados desativados.
Qual é a diferença entre misturar em sRGB e em OKLab?
A mistura sRGB calcula a média dos valores dos canais codificados em gama, a abordagem clássica de gráficos de tons semelhantes à pintura e Sass mix(). A mistura OKLab ocorre em um espaço perceptual, fazendo o croma diminuir de maneira mais uniforme a cada etapa.
Quais formatos de entrada posso usar?
Códigos hexadecimais com ou sem #, nomes de cores CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() e cmyk(). Insira uma cor por execução.
Quantos tons posso gerar?
De 2 a 20 por execução, sendo 10 por padrão. A contagem inclui a cor original na primeira linha.
Quais valores a tabela mostra?
Para cada etapa, são exibidos a proporção de cinza, o código hexadecimal, rgb(), hsl() e oklch() na sintaxe moderna CSS. Os canais RGB são números inteiros, as porcentagens HSL têm até duas casas decimais, e a luminosidade e o croma OKLCH, até quatro.
O que acontece com cores transparentes e de ampla gama?
O alfa da entrada é mantido em todos os tons, então os códigos hexadecimais têm 8 dígitos. As etapas fora da gama são mapeadas para sRGB com o algoritmo CSS Color 4 nas colunas HEX, RGB e HSL, enquanto a coluna OKLCH mantém o valor não mapeado.
Como recrio um tom em CSS?
Copie o valor hexadecimal ou oklch(), ou deixe o navegador fazer a mistura com color-mix(in oklab, var(--brand) 70%, #808080) para obter o tom de 30% da configuração OKLab. color-mix() funciona em todos os principais navegadores atuais.