Gerador de tons escuros de cores
Gere tons mais escuros de uma cor misturando-a com preto 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 tom, começando pela cor original. A mistura em sRGB corresponde às ferramentas clássicas de tons e Sass, enquanto o OKLab produz etapas perceptualmente uniformes. Ideal para criar escalas de cores UI.
Perguntas frequentes
O que é um tom escuro?
Um tom escuro é uma cor misturada com preto. Ele mantém o matiz e fica mais escuro, ao contrário de uma tonalidade, que é misturada com branco, 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 preto; assim, 10 etapas resultam em 0%, 10%, 20% e assim por diante, até 90%. A primeira linha é sempre a cor original, e o preto 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 preto e a maioria dos geradores clássicos de tons. A mistura em OKLab ocorre em um espaço perceptual, então as etapas parecem mais uniformes em luminosidade e os tons mais escuros preservam mais a cor.
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 escuros 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 preto, 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 tom escuro, pois o preto é 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 os tons escuros em CSS?
Copie os valores hexadecimais ou oklch() para propriedades personalizadas, como --brand-600 e --brand-700. Para fazer a mistura diretamente no navegador, color-mix(in oklab, var(--brand) 80%, black) produz o mesmo tom escuro de 20% da configuração OKLab.
Tons mais escuros são automaticamente acessíveis?
Não. Verifique o contraste do texto com cada tom usando um verificador de contraste, pois um tom que parece escuro ainda pode ficar abaixo de 4.5:1 em relação a outra cor escura ou a um texto colorido.