Escurecer uma cor hex por percentual

Designers, engenheiros de front-end e autores de design systems precisam o tempo todo de tons mais escuros de uma cor de marca para estados de hover, bordas, sombras e texto acessível sobre fundos claros. Adivinhar um novo hex a olho é lento e inconsistente entre ferramentas. Esta capacidade aceita uma cor hex e um percentual de escurecimento de zero a cem, converte a cor para HSL, multiplica a luminosidade por um menos esse percentual e retorna o hex mais escuro com os detalhamentos em RGB e HSL. Zero por cento mantém a cor original; cem por cento produz preto.

O que escurecer por percentual significa em HSL

As cores na web costumam ser armazenadas como hex ou RGB, mas os passos perceptuais de tom são mais fáceis em HSL: o matiz guarda a tonalidade, a saturação a pureza, e a luminosidade o quão perto a amostra fica do preto ou do branco. Escurecer por um percentual significa reduzir a luminosidade mantendo matiz e saturação fixos, então um azul de marca continua azul—apenas mais profundo. Esta ferramenta multiplica a luminosidade atual por um menos a quantidade sobre cem.

A zero por cento a luminosidade fica inalterada, então a saída corresponde ao hex de entrada normalizado. A cinquenta por cento a luminosidade é reduzida à metade. A cem por cento a luminosidade se torna zero e o resultado é preto puro, independentemente do matiz de partida.

Esse modelo relativo combina com a forma como muitos design tokens escalam estados interativos: um único token base mais um fator de escurecimento para hover ou pressionado. A subtração absoluta de pontos de luminosidade pode ultrapassar o limite em cores já escuras; o escalonamento relativo sempre permanece na faixa e nunca inventa uma luminosidade negativa.

Contrato de entrada: cores hex e a quantidade 0–100

Passe a cor como uma string hex na forma curta ou longa: #RGB ou #RRGGBB, com ou sem o cerquilha inicial. As formas curtas se expandem canal a canal, então #F0A se torna #FF00AA antes da conversão. O campo da quantidade é obrigatório e deve ser um número finito entre zero e cem, inclusive.

Valores como menos dez, cento e um, ou texto não numérico são rejeitados; a validação que falha não é cobrada. Em caso de sucesso a resposta inclui original como o hex de seis dígitos normalizado em maiúsculas, hex como o resultado escurecido, a quantidade numérica que você enviou, rgb com canais inteiros de zero a duzentos e cinquenta e cinco, e hsl com o matiz em graus e a saturação e a luminosidade numa escala de zero a cem após o passo de escurecimento.

O arredondamento é determinístico, então reexecutar o mesmo par não gera deriva. Use quantidade zero para normalizar e expandir hex curto sem alterar o tom, ou quantidade cem quando precisar de uma âncora de preto verdadeiro derivada do mesmo caminho de código dos escurecimentos parciais.

Para uma consulta rápida ou uma paleta inteira

Para uma verificação pontual—confirmar que um azul primário escurece de forma limpa para o hover de um botão, ou que um passo de vinte por cento ainda atende às metas de contraste contra o branco—use a ferramenta gratuita no navegador desta página. Não há chamada de rede dentro da transformação, nem modelo, nem dependência de relógio, então os resultados são seguros na borda e cacheáveis.

Quando você já converte formatos com um conversor de cores separado, mantenha-o para as idas e voltas HEX–RGB–HSL; use este escurecedor quando a intenção de busca for especificamente um tom mais escuro por percentual. Combine os dois em um pipeline se precisar de exportação CMYK após escurecer, mas o passo de escurecimento em si só precisa de hex na entrada e de cor estruturada na saída.