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.