Regoli il contrasto di un colore per fattore

Il contrasto intorno al grigio medio è il gesto classico di imaging che allunga o comprime ogni canale rosso, verde e blu allontanandolo dal punto medio a otto bit centoventotto, invece di scorrere la luminosità HSL o elevare una potenza gamma. Designer, autori di token e ingegneri grafici usano un fattore di contrasto quando vogliono campioni più decisi o più piatti senza girare la ruota della tinta né trattare il colore come una fotografia intera. Questo strumento accetta un colore hex CSS e un fattore finito nell'intervallo chiuso da zero a dieci, applica la regola per canale secondo cui l'uscita è il grigio medio più la distanza con segno da quel grigio moltiplicata per il fattore, limita ogni canale all'intervallo legale da zero a duecentocinquantacinque e restituisce l'hex regolato e gli interi RGB. Un fattore pari a uno lascia il campione invariato; un fattore pari a zero fa collassare tutti i canali sul grigio medio; valori sopra uno aumentano il contrasto e possono tagliare luci o ombre.

Che cosa fa il contrasto intorno al grigio medio sui canali RGB

Parta da un colore hex CSS come cancelletto tre tre sei sei c c o dalla forma breve cancelletto tre sei c. L'analizzatore espande i codici a tre cifre, porta le cifre in minuscolo e converte ogni coppia in interi rosso, verde e blu da zero a duecentocinquantacinque. Il grigio medio su quella scala a otto bit è centoventotto: il perno intero usato dai classici cursori di contrasto nei programmi di pittura e nelle pipeline raster.

Ogni canale viene riscritto con aritmetica ordinaria: sottragga il grigio medio, moltiplichi per il fattore di contrasto, riaggiunga il grigio medio, poi arrotondi all'intero più vicino e limiti alla scatola legale da zero a duecentocinquantacinque. I canali già al grigio medio restano fermi per ogni fattore finito, perché la distanza con segno è zero. I canali più scuri del grigio medio se ne allontanano quando il fattore è maggiore di uno e se ne avvicinano quando il fattore è tra zero e uno.

I canali più chiari del grigio medio fanno lo stesso in direzione opposta. Un fattore esattamente pari a uno è identità: ogni canale arrotondato coincide con l'ingresso. Un fattore pari a zero appiattisce il campione sul grigio medio sui tre canali, cioè il codice hex otto zero otto zero otto zero.

I fattori grandi tagliano: un rosso scuro può arrivare a zero e un blu chiaro a duecentocinquantacinque, e quegli estremi restano sui muri legali invece di avvolgersi. Lo stesso fattore si applica in modo indipendente a rosso, verde e blu, così l'equilibrio relativo dei canali può cambiare rispetto a una storia di contrasto HSL che congela la tinta. Quella differenza è intenzionale: questo contratto è lo stiramento lineare intorno al grigio medio, non un cursore percettivo né un rapporto WCAG tra due colori.

Le forme hex con alfa a quattro o otto cifre sono rifiutate perché il contratto è solo RGB opaco.

Contratto di ingresso, forma della risposta e convalida

Invii due campi: color come stringa hex e factor come numero finito da zero a dieci inclusi. Ogni campione include role, hex, gli interi r g b e una stringa rgb stampabile. I campi di primo livello hex, r, g e b rispecchiano il risultato regolato per contrasto per i client a una riga.

Una breve stringa formula documenta la regola del grigio medio per canale per documentazione e supporto. Controlli tipici: applicare il fattore uno punto cinque a un blu medio, applicare il fattore zero punto cinque per appiattire un rosso saturo verso il grigio, confermare che il fattore uno restituisce l'hex originale, confermare che il fattore zero produce il grigio medio e rifiutare il fattore quindici o un colore assente.

Colleghi il modulo gratuito del browser per anteprime rapide, poi chiami lo stesso contratto dagli script quando serve generazione massiva di token o controlli di integrazione continua. Tenga il fattore nell'intervallo documentato invece di affidarsi a limiti silenziosi del moltiplicatore stesso: questo strumento fallisce in modo esplicito su un fattore non valido, così sistemi di design e pipeline di rendering restano prevedibili in tutti gli ambienti.

Dove un fattore di contrasto sul grigio medio vale la pena

I team di brand e prodotto tengono spesso un solo hex protagonista e hanno bisogno di un compagno più deciso o più discreto senza aprire un editor di immagini completo né inventare a occhio un secondo colore di marca. Gli autori di token di design generano rampe di contrasto facendo scorrere un fattore su un campione base quando schiarire o scurire in HSL sembra troppo pastello e la gamma troppo legata al display.

Gli strumenti di presentazione e marketing producono varianti di campagna da un logo saturo: alzi il fattore per un manifesto, lo abbassi per una tessere di sfondo smorzata. Gli autori di materiali didattici sull'imaging possono mostrare che stirare l'RGB intorno al grigio medio non è cambiare la luminosità HSL, né una curva di potenza gamma, né misurare il contrasto WCAG tra due colori.

Se in seguito occorre confrontare due codici hex per l'accessibilità, applicare un esponente gamma, schiarire o scurire in HSL oppure filtrare un'intera fotografia, li tratti come intenzioni di ricerca e landing separate invece di sovraccaricare questa pagina del fattore sul grigio medio.