Ajuste o contraste de uma cor por fator

O contraste em torno do cinza médio é o gesto clássico de imagem que estica ou comprime cada canal vermelho, verde e azul afastando-o do ponto médio de oito bits cento e vinte e oito, em vez de deslizar a luminosidade HSL ou elevar uma potência gama. Designers, autores de tokens e engenheiros gráficos usam um fator de contraste quando querem amostras mais vivas ou mais planas sem girar a roda de matiz nem tratar a cor como uma fotografia inteira. Esta ferramenta aceita uma cor hex CSS e um fator finito no intervalo fechado de zero a dez, aplica a regra por canal de que a saída é o cinza médio mais a distância com sinal a partir desse cinza vezes o fator, limita cada canal ao intervalo legal de zero a duzentos e cinquenta e cinco e devolve o hex ajustado e os inteiros RGB. Um fator de um deixa a amostra inalterada; um fator de zero colapsa todos os canais no cinza médio; valores acima de um aumentam o contraste e podem recortar luzes ou sombras.

O que o contraste em torno do cinza médio faz nos canais RGB

Comece com uma cor hex CSS como hash três três seis seis c c ou a forma curta hash três seis c. O analisador expande códigos de três dígitos, passa os dígitos para minúsculas e converte cada par em inteiros vermelho, verde e azul de zero a duzentos e cinquenta e cinco. O cinza médio nessa escala de oito bits é cento e vinte e oito: o pivô inteiro usado pelos controles clássicos de contraste em programas de pintura e pipelines raster.

Cada canal é reescrito com aritmética comum: subtraia o cinza médio, multiplique pelo fator de contraste, some de novo o cinza médio, arredonde ao inteiro mais próximo e limite à caixa legal de zero a duzentos e cinquenta e cinco. Canais que já estão no cinza médio não se movem para nenhum fator finito, porque a distância com sinal é zero. Canais mais escuros que o cinza médio afastam-se dele quando o fator é maior que um e aproximam-se quando o fator está entre zero e um.

Canais mais claros que o cinza médio fazem o mesmo no sentido oposto. Um fator exatamente igual a um é identidade: cada canal arredondado coincide com a entrada. Um fator de zero achata a amostra no cinza médio nos três canais, que é o código hex oito zero oito zero oito zero.

Fatores grandes recortam: um vermelho escuro pode chegar a zero e um azul claro a duzentos e cinquenta e cinco, e esses extremos recortados ficam nas paredes legais em vez de dar a volta. O mesmo fator se aplica de forma independente a vermelho, verde e azul, de modo que o equilíbrio relativo dos canais pode mudar em relação a uma história de contraste HSL que congela o matiz.

Essa diferença é intencional: este contrato é o esticamento linear em torno do cinza médio, não um controle perceptual nem uma razão WCAG entre duas cores. Formas hex com alfa de quatro ou oito dígitos são rejeitadas porque o contrato é apenas RGB opaco.

Contrato de entrada, formato da resposta e validação

Envie dois campos: color como string hex e factor como número finito de zero a dez inclusive. Cada amostra inclui role, hex, inteiros r g b e uma string rgb imprimível. Os campos de nível superior hex, r, g e b espelham o resultado ajustado por contraste para clientes de uma linha.

Uma string formula curta documenta a regra do cinza médio por canal para documentação e suporte. Verificações típicas: aplicar o fator um ponto cinco a um azul médio, aplicar o fator zero ponto cinco para achatar um vermelho saturado em direção ao cinza, confirmar que o fator um devolve o hex original, confirmar que o fator zero produz cinza médio e rejeitar o fator quinze ou uma cor ausente.

Conecte o formulário gratuito do navegador para prévias rápidas e chame o mesmo contrato a partir de scripts quando precisar de geração em massa de tokens ou checagens de integração contínua. Mantenha o fator no intervalo documentado em vez de confiar em recortes silenciosos do próprio multiplicador: esta ferramenta falha de forma explícita diante de um fator inválido para que sistemas de design e pipelines de renderização permaneçam previsíveis em todos os ambientes.

Onde um fator de contraste no cinza médio agrega valor

Equipes de marca e produto costumam guardar um único hex protagonista e precisam de um companheiro mais vivo ou mais discreto sem abrir um editor de imagem completo nem inventar a olho uma segunda cor de marca. Autores de tokens de design geram rampas de contraste varrendo um fator sobre uma amostra base quando clarear ou escurecer em HSL parece pastel demais e a gama parece específica demais para a tela.

Ferramentas de apresentação e marketing produzem variantes de campanha a partir de um logotipo saturado: eleve o fator para um cartaz, reduza-o para uma pastilha de fundo suave. Autores de material didático sobre imagem podem mostrar que esticar RGB em torno do cinza médio não é o mesmo que mudar a luminosidade HSL, nem uma curva de potência gama, nem medir o contraste WCAG entre duas cores.

Se mais adiante você precisar comparar dois códigos hex por acessibilidade, aplicar um expoente gama, clarear ou escurecer em HSL ou filtrar uma fotografia inteira, trate isso como intenções de busca e landings separadas em vez de sobrecarregar esta página do fator no cinza médio.