Gere tintas de cor

Esta ferramenta mistura a cor hexadecimal informada com branco em incrementos percentuais iguais e retorna valores HEX e RGB exatos para cada tinta. O cálculo é determinístico: a mesma cor e a mesma quantidade de etapas sempre produzem a mesma paleta. Use-a para preparar estados de interface, fundos, gráficos, ilustrações ou tokens de design que precisem de uma progressão clara da cor original até o branco.

Escolha uma cor-base e uma quantidade útil de etapas

Comece com uma cor-base hexadecimal de três ou seis dígitos, como #36c ou #3366cc. A forma curta é expandida antes do cálculo; portanto, os dois exemplos representam exatamente a mesma cor e produzem resultados idênticos. Em seguida, escolha entre uma e vinte etapas. A quantidade representa o número de tintas geradas, sem contar a cor-base original e incluindo o branco puro como resultado final. Assim, quatro etapas misturam a base com branco a 25%, 50%, 75% e 100%. Uma quantidade pequena funciona bem em uma hierarquia compacta de interface, enquanto uma quantidade maior oferece escolhas mais refinadas para visualização de dados, ilustração ou exploração de tokens. O resultado apresenta separadamente a base normalizada e cada tinta gerada, deixando claro qual valor foi fornecido e quais foram calculados. Como a progressão sempre termina em branco, amostras adjacentes têm mudanças iguais no percentual de mistura, mesmo que as diferenças visuais variem conforme a cor-base e a tela.

Entenda a fórmula de mistura determinística

Cada canal vermelho, verde e azul é misturado independentemente em direção a 255, o valor de canal do branco. Para a tinta número k em uma paleta de n etapas, a ferramenta calcula base + (255 − base) × k/n e arredonda o canal para o inteiro mais próximo. Aplicar a mesma proporção aos três canais preserva a relação com a cor original enquanto reduz continuamente a distância até o branco. A resposta inclui um índice iniciado em um, o percentual exato de mistura com branco, o HEX normalizado em minúsculas, os números individuais dos canais e uma string RGB. Esta é uma interpolação sRGB direta; ela não altera a luminosidade HSL, não realiza mistura óptica com correção de gama nem tenta equalização perceptual. Essa diferença é importante ao comparar a saída com programas gráficos que oferecem vários espaços de mistura. A fórmula é propositalmente simples, documentada e estável, sendo apropriada para scripts de build, snapshots, geração automatizada de tokens e sistemas nos quais a repetibilidade vale mais que ajustes visuais subjetivos.

Aplique a paleta com segurança em um design system

Considere os valores gerados como uma escala inicial consistente e depois teste-os no contexto real. Tintas mais claras são úteis em linhas selecionadas, fundos de notificações, bordas discretas, preenchimentos de gráficos, superfícies de hover e áreas decorativas, mas uma paleta matematicamente regular não garante automaticamente contraste acessível. Verifique textos e ícones em primeiro plano sobre cada tinta escolhida conforme os requisitos de contraste aplicáveis ao seu produto. Mantenha a cor-base como um token separado e nomeie os valores gerados de acordo com sua função ou percentual de mistura, como brand-tint-25 ou info-background, em vez de depender apenas da posição na lista. Nomes percentuais continuam compreensíveis se uma paleta posterior usar outra quantidade de etapas. Em fluxos automatizados, armazene diretamente os valores HEX retornados e mantenha a cor de entrada e a quantidade de etapas junto deles para que a paleta possa ser reproduzida. Cores inválidas, formatos hexadecimais com alfa, quantidades fracionárias e valores fora da faixa aceita são rejeitados, impedindo que mudanças acidentais nos tokens passem despercebidas.