Ferramenta

Gerador de tons e matizes

Uma cor de entrada. Uma escala tonal completa de saída. Interpolada perceptivamente, para que a faixa mantenha a mesma matiz de ponta a ponta.

Escala tonal
Matizes (mais claros)
Tons (mais escuros)

Matizes, tons e tonalidades

  • Matiz — cor base + branco. Mais claro, frequentemente um pouco menos saturado. Útil para fundos hover, estados desabilitados e superfícies de "camada sutil".
  • Tom — cor base + preto. Mais escuro, frequentemente visualmente mais saturado. Útil para estados hover em fundos claros, botões pressionados e texto de alto destaque.
  • Tonalidade — cor base + cinza. Mesma luminosidade, menos saturação. Não gerado aqui; útil principalmente para estados de UI "abafados".

A interpolação é feita no espaço OKLab em vez de RGB, então a matiz fica perceptivamente constante ao longo da faixa — um azul continua reconhecivelmente azul por todos os seus matizes, em vez de derivar por meios-tons rosados como fazem as escalas interpoladas em RGB.