Comment déterminer les transformations de couleurs à partir de couleurs données?

Question

Notre designer nous a fourni de jolis boutons web 2.0, etc. Je les ai traduits en CSS3. Maintenant, je veux aller à la mer et généraliser le schéma de couleurs en utilisant Sass color manipulation. Étant donné une marque de couleur de base dans la conception (# 7e1a00) et un ensemble de couleurs dérivées utilisées sur les boutons, les liens, les dégradés, etc. (# D05B3D, # 973D24, # 7E1900), comment puis-je déterminer quelle transformation doit être appliqué à la couleur de la marque pour aboutir à une couleur dérivée?

Je peux deviner et vérifier, ou écrire un programme de force brute pour essayer toutes les combinaisons - il semble que ce soit quelque chose qu'il y a un moyen intelligent et facile à déterminer.

Des pensées?

Modifier Il n'est pas nécessaire d'être une solution généralisée - Je peux raisonnablement déterminer quelle transformation appliquer en examinant les couleurs. J'ai besoin de déterminer les paramètres pour la transformation.

Answer 1

La façon la plus simple est probablement de convertir les couleurs en HSL et d'y voir les différences. Toutes les fonctions de manipulation des couleurs de Sass fonctionnent dans l'espace HSL, il devrait donc être facile de dire si vous devez, par ex. augmenter la légèreté ou diminuer la saturation.

Answer 2

En théorie, il y a une infinité de fonctions qui vont d'une valeur à l'autre, mais en pratique, quelques-unes seulement sont sensibles. La chose est, vous pouvez savoir quelle fonction vous voulez utiliser, mais la détermination des arguments est le nombre croquant que les ordinateurs sont meilleurs. J'ai créé un tool that suggests color functions. Il répertorie la plupart des fonctions SASS qui vont d'une couleur à l'autre, de sorte que vous pouvez vous concentrer sur si l'utilisation darken ou softlight a plus de sens en termes de votre conception.