Escurecer cor hex por percentual

Designers, engenheiros de front-end e autores de sistemas de design precisam constantemente de tons mais escuros de uma cor de marca para estados hover, bordas, sombras e texto acessível sobre fundos claros. Adivinhar um hex novo 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, limita o resultado no preto e devolve o hex mais escuro com detalhamentos em RGB e HSL. Zero por cento mantém a cor original; cem por cento produz preto.

O que significa escurecer por percentual em HSL

Cores na web costumam ser armazenadas como hex ou RGB, mas os passos perceptivos de tom são mais fáceis em HSL: o matiz guarda o tingimento, a saturação a pureza e a luminosidade quão perto a amostra fica do preto ou do branco. Escurecer por um percentual significa reduzir a luminosidade mantendo fixos o matiz e a saturação, de modo que um azul de marca continue azul — só mais profundo.

Esta ferramenta multiplica a luminosidade atual por um menos o percentual sobre cem e depois limita o resultado para que a luminosidade nunca fique abaixo de zero. Em zero por cento a luminosidade não muda, então a saída coincide com o hex de entrada normalizado. Em cinquenta por cento a luminosidade é reduzida à metade.

Em cem por cento a luminosidade vira zero e o resultado é preto puro, independentemente do matiz inicial. Esse modelo relativo combina com a forma como muitos tokens de design 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 estourar em cores já escuras; a escala relativa com limite no preto permanece sempre no intervalo e nunca inventa luminosidade negativa.

Contrato de entrada: cores hex e o percentual 0–100

Passe a cor como cadeia hex em forma curta ou longa: #RGB ou #RRGGBB, com ou sem o cardinal inicial. Formas curtas expandem canal a canal, de modo que #F0A vira #FF00AA antes da conversão. O campo percent é 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 falha não é cobrada. Em caso de sucesso, a resposta inclui original como o hex normalizado de seis dígitos em maiúsculas, hex como o resultado escurecido, o percent numérico 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 na escala de zero a cem após o passo de escurecimento.

O arredondamento é determinístico, de modo que reexecutar o mesmo par não desvia. Use percent zero para normalizar e expandir hex curto sem mudar o tom, ou percent cem quando precisar de um âncora preta verdadeira derivada do mesmo caminho de código dos escurecimentos parciais para pipelines de tokens consistentes.

Para uma amostra ou todos os estados de um botão

Para uma verificação pontual — confirmar que um azul primário escurece de forma limpa no hover de um botão, ou que um passo de vinte por cento ainda atende as metas de contraste sobre o branco — use a ferramenta gratuita no navegador nesta 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 cor separado, mantenha-o para idas e voltas HEX–RGB–HSL; use este escurecedor quando a intenção de busca for especificamente um tom mais escuro por percentual. Combine ambos 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 cor estruturada na saída com preto limitado a cem por cento.