tints and shades
1.0.0
Ce projet utilise le générateur de sites statique Eleventy Static et déploie sur les pages GitHub à l'aide d'une action GitHub de Shohei Ueda.
Prérequis: Node.js 14+
npm install .npm run start .localhost:8080 dans votre navigateur. Le but de cet outil est de produire avec précision des teintes (blanc pur ajouté) et des nuances (noir pur ajouté) d'une couleur hexagonale donnée par incréments de 10%.
Cela prend le calcul au sérieux. D'après mon expérience, des outils similaires obtiennent le calcul incorrect en raison d'erreurs d'arrondi, de préférences du créateur ou d'autres incohérences.
Les tests montrent que la sortie correspond à la méthode de calcul de Chrome Devtools ainsi que certaines méthodes établies et populaires pour dériver des teintes et des nuances via SASS.
Il est mieux utilisé lorsque vous avez déjà des couleurs de base, mais que vous souhaitez des couleurs complémentaires pour les gradients, les bordures, les arrière-plans, les ombres ou d'autres éléments.
Ceci est utile pour les concepteurs qui peuvent communiquer l'intention des couleurs aux développeurs qui utilisent SASS ou PostCSS dans leurs versions. C'est aussi une façon solide de prévisualiser rapidement à quoi ressemblent les teintes et les nuances pour une couleur de base que vous envisagez peut-être pour votre conception.
J'ai également entendu dire que cela est utile pour les enseignants, les professionnels des données et les personnes qui font des présentations.
La couleur hexagonale donnée est d'abord convertie en RVB. Ensuite, chaque composant de la couleur RVB a le calcul suivant effectué, respectivement.
New value = current value + ((255 - current value) x tint factor)New value = current value x shade factorLa nouvelle valeur est arrondie si nécessaire, puis converti en hexadées pour l'affichage.
Disons que nous voulons des teintes et des nuances de Rebecca Purple, # 663399.
102 + ((255 - 102) x .1) = 117.3 , arrondi à 11751 + ((255 - 51) x .1) = 71.4 , arrondi à 71153 + ((255 - 153) x .1) = 163.2 , arrondi à 163102 x .9 = 91.8 , arrondi à 9251 x .9 = 45.9 , arrondi à 46153 x .9 = 137.7 , arrondi à 138Ce projet est open source et j'aimerais votre aide!
Si vous remarquez un bogue ou si vous souhaitez une fonctionnalité ajoutée, veuillez déposer un problème sur GitHub. Si vous n'avez pas de compte là-bas, écrivez-moi simplement les détails.
Si vous êtes un développeur et que vous souhaitez aider avec le projet, veuillez commenter les problèmes ouverts ou en créer un nouveau et communiquer vos intentions. Une fois que nous sommes d'accord sur un chemin à parcourir, vous pouvez simplement faire une demande de traction et l'emmener à la ligne d'arrivée.
Le générateur Tint & Shade sera toujours gratuit, mais votre soutien est grandement apprécié.
Michael Edelstone a conçu et organisé le projet avec une grande aide de Nick Wing sur les calculs des couleurs.
Nous utilisons ces incroyables bibliothèques open source à travers le projet:
Un grand merci à Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen et Luis Escarrilla pour leurs précieuses contributions.
