Ajustez le contraste d'une couleur par facteur

Le contraste autour du gris moyen est le geste classique d'imagerie qui étire ou comprime chaque canal rouge, vert et bleu en l'éloignant du milieu huit bits cent vingt-huit, au lieu de faire glisser la luminosité HSL ou d'élever une puissance gamma. Les designers, auteurs de jetons et ingénieurs graphiques utilisent un facteur de contraste lorsqu'ils veulent des échantillons plus percutants ou plus plats sans tourner la roue de teinte ni traiter la couleur comme une photographie entière. Cet outil accepte une couleur hex CSS et un facteur fini dans l'intervalle fermé de zéro à dix, applique la règle par canal selon laquelle la sortie égale le gris moyen plus la distance signée depuis ce gris multipliée par le facteur, écrête chaque canal dans la plage légale de zéro à deux cent cinquante-cinq et renvoie l'hex ajusté ainsi que les entiers RGB. Un facteur de un laisse l'échantillon inchangé ; un facteur de zéro ramène tous les canaux au gris moyen ; les valeurs au-dessus de un augmentent le contraste et peuvent écrêter hautes lumières ou ombres.

Ce que le contraste autour du gris moyen fait aux canaux RGB

Commencez par une couleur hex CSS telle que dièse trois trois six six c c ou la forme courte dièse trois six c. L'analyseur développe les codes à trois chiffres, passe les chiffres en minuscules et convertit chaque paire en entiers rouge, vert et bleu de zéro à deux cent cinquante-cinq. Le gris moyen sur cette échelle huit bits est cent vingt-huit : le pivot entier des curseurs de contraste classiques dans les logiciels de peinture et les pipelines raster.

Chaque canal est réécrit par une arithmétique ordinaire : soustrayez le gris moyen, multipliez par le facteur de contraste, ajoutez à nouveau le gris moyen, puis arrondissez à l'entier le plus proche et écrêtez dans la boîte légale de zéro à deux cent cinquante-cinq. Les canaux déjà au gris moyen restent immobiles pour tout facteur fini, car leur distance signée est nulle. Les canaux plus sombres que le gris moyen s'en éloignent lorsque le facteur est supérieur à un et s'en rapprochent lorsqu'il est compris entre zéro et un.

Les canaux plus clairs que le gris moyen font de même dans l'autre sens. Un facteur exactement égal à un est l'identité : chaque canal arrondi correspond à l'entrée. Un facteur de zéro aplatit l'échantillon au gris moyen sur les trois canaux, soit le code hex huit zéro huit zéro huit zéro.

Les grands facteurs écrêtent : un rouge sombre peut atteindre zéro et un bleu clair deux cent cinquante-cinq, et ces extrémités restent aux murs légaux au lieu de boucler. Le même facteur s'applique indépendamment au rouge, au vert et au bleu, de sorte que l'équilibre relatif des canaux peut changer par rapport à une histoire de contraste HSL qui fige la teinte. Cette différence est volontaire : ce contrat est l'étirement linéaire autour du gris moyen, ni un curseur perceptuel ni un rapport WCAG entre deux couleurs.

Les formes hex alpha à quatre ou huit chiffres sont rejetées car le contrat est uniquement du RGB opaque.

Contrat d'entrée, forme de la réponse et validation

Envoyez deux champs : color comme chaîne hex et factor comme nombre fini de zéro à dix inclus. Chaque échantillon inclut role, hex, les entiers r g b et une chaîne rgb imprimable. Les champs de premier niveau hex, r, g et b reflètent le résultat ajusté en contraste pour les clients d'une ligne.

Une courte chaîne formula documente la règle du gris moyen par canal pour la documentation et le support. Contrôles typiques : appliquer le facteur un point cinq à un bleu moyen, appliquer le facteur zéro point cinq pour aplatir un rouge saturé vers le gris, confirmer que le facteur un renvoie l'hex d'origine, confirmer que le facteur zéro donne le gris moyen, et rejeter le facteur quinze ou une couleur manquante.

Branchez le formulaire gratuit du navigateur pour des aperçus rapides, puis appelez le même contrat depuis des scripts lorsque vous avez besoin d'une génération massive de jetons ou de contrôles d'intégration continue. Gardez le facteur dans l'intervalle documenté plutôt que de compter sur un écrêtage silencieux du multiplicateur lui-même — cet outil échoue clairement sur un mauvais facteur afin que systèmes de design et pipelines de rendu restent prévisibles d'un environnement à l'autre.

Où un facteur de contraste autour du gris moyen se justifie

Les équipes de marque et de produit conservent souvent un seul hex héroïque et ont besoin d'un compagnon plus percutant ou plus discret sans ouvrir un éditeur d'image complet ni inventer à l'œil une deuxième couleur de marque. Les auteurs de jetons de design génèrent des rampes de contraste en balayant un facteur sur un échantillon de base lorsque l'éclaircissement ou l'assombrissement HSL paraît trop pastel et que le gamma paraît trop lié à l'affichage.

Les outils de présentation et de marketing produisent des variantes de campagne à partir d'un logo saturé : augmentez le facteur pour une affiche, baissez-le pour une pastille de fond assourdie. Les auteurs de supports d'enseignement de l'imagerie peuvent montrer qu'étirer le RGB autour du gris moyen n'est pas changer la luminosité HSL, ni une courbe de puissance gamma, ni mesurer le contraste WCAG entre deux couleurs.

Si vous devez plus tard comparer deux codes hex pour l'accessibilité, appliquer un exposant gamma, éclaircir ou assombrir en HSL, ou filtrer une photographie entière, traitez cela comme des intentions de recherche et des pages d'atterrissage distinctes plutôt que de surcharger cette page du facteur autour du gris moyen.