# Gerador de tonalidades claras de cores

Gere tonalidades mais claras de uma cor misturando-a com branco em etapas regulares. Insira 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 tonalidade, começando pela cor original. A mistura em sRGB corresponde às ferramentas clássicas de tonalidades e Sass, enquanto o OKLab produz etapas perceptualmente uniformes. Ideal para fundos, estados de foco e escalas.

## Perguntas frequentes

### O que é uma tonalidade clara?

Uma tonalidade clara é uma cor misturada com branco. Ela mantém o matiz e fica mais clara e pálida, ao contrário de um tom escuro, que é misturado com preto, ou de um tom, que é misturado com cinza.

### Como as etapas são distribuídas?

Com N etapas, a linha k mistura a cor com (k - 1) / N de branco; assim, 10 etapas resultam em 0%, 10%, 20% e assim por diante, até 90%. A primeira linha é sempre a cor original, e o branco puro nunca faz parte da lista.

### Qual é a diferença entre misturar em sRGB e em OKLab?

A mistura em sRGB calcula a média dos valores dos canais codificados em gama, como fazem Sass mix() com branco e a maioria dos geradores clássicos de tonalidades. A mistura em OKLab ocorre em um espaço perceptual, então as etapas de luminosidade parecem mais uniformes e as cores mais claras não ficam desbotadas tão rapidamente.

### 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.

### Quantas tonalidades claras 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, a proporção de branco, o código hexadecimal, rgb(), hsl() e oklch() na sintaxe moderna de CSS. Os canais RGB são números inteiros, as porcentagens de HSL têm até duas casas decimais, e a luminosidade e o croma de OKLCH têm até quatro.

### O que acontece com cores transparentes?

O alfa da entrada é mantido em cada tonalidade clara, pois o branco é misturado com o mesmo alfa. Os códigos hexadecimais passam a ter 8 dígitos, e as funções CSS terminam com o alfa após uma barra.

### O que acontece com cores fora do sRGB?

A mistura usa a cor completa, mas HEX, RGB e HSL só podem mostrar sRGB, então as etapas fora da gama são convertidas para sRGB com o algoritmo Color 4 CSS nessas colunas. A coluna OKLCH mantém o valor sem conversão.

### Como uso as tonalidades claras em CSS?

Copie os valores hexadecimais ou oklch() para propriedades personalizadas, como --brand-100 e --brand-200. Para fazer a mistura diretamente no navegador, color-mix(in oklab, var(--brand) 80%, white) produz a mesma tonalidade clara de 20% da configuração OKLab.

### Posso usar texto branco sobre uma tonalidade clara?

Em geral, não, pois tonalidades claras têm pouco contraste com o branco. Use texto escuro sobre tonalidades claras e verifique cada combinação com um verificador de contraste; textos normais precisam de pelo menos 4.5:1 para WCAG AA.

Seu anúncio aqui?

[Envie-nos um e-mail](mailto:hi@dennn.is?subject=Publicidade%20em%20OneClick%20Pro)

[Anúncio O conjunto de plugins pronto para agentes para WordPress.](https://sleekwp.com/?ref=oneclickpro)