Comment calculer nécessaire hue-tourner à générer une couleur spécifique?
J'ai une image blanche que je suis en utilisant comme toile de fond pour un div, et je voudrais de couleur pour correspondre les thèmes de la couleur principale. Je suis conscient que je peux faire:
filter: sepia() saturate(10000%) hue-rotate(30deg);et en cycle hue-rotate de trouver une couleur, mais est-il possible de calculer cette valeur à l'avance? Étant donné que le spécifiée valeur hexadécimale est assez sombre, j'imagine que je devrai inclure la invert(%) le filtre.
Donné une valeur hex de #689d94 ce que sont les mathématiques dois-je faire pour calculer le désiré hue-rotate et invert de la valeur à convertir mon blanc image d'arrière-plan de la même couleur?
Modifier
Voici un extrait d'un div avec un fond blanc de l'image filtrée vert. Le truc ici, c'est l'ensemble de la div filtrée, non seulement l'image. Si j'étais à entrer du texte dans le div la couleur du texte serait à son tour vert ainsi.
CSS:
div {
background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat scroll 0 0 transparent;
background-size:5em;
width:5em;
height:5em;
-webkit-filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
filter: invert(25%) sepia() saturate(100000%) hue-rotate(174deg);
}HTML:
<div>
</div>- Oui, c'est une image d'arrière-plan.
- Puis (encore autant que je sache) ... ce n'est pas possible, les filtres sont appliqués à la réalité des images.
- Quelles sont les restrictions de vous imposer dans cette question? Je pense que cela pourrait être plus ou moins réalisable à l'aide de filtre: url(#mySvgFilter). Qui aurait besoin d'être en mesure d'inclure un élément svg quelque part sur la page ou l'hôte d'un des fichiers SVG quelque part. Serait-ce une solution viable? Curieusement, je ne pouvais pas la couleur pour correspondre exactement (bien qu'ils devraient) lors de l'utilisation de la couleur matrices, mais qui sera peut-être moi malentendu quelque chose en rapport avec les modes de fusion. Aussi, si je peux demander, qu'est-ce que le sous-jacente du problème que vous essayez de résoudre?
- À l'origine, j'ai essayé de réduire le nombre de requêtes http à un utilisateur aurait besoin de le faire en utilisant seulement une image svg (le panier a été utilisé ailleurs sur la page) et je voulais juste changer la couleur à l'aide de CSS. En fin de compte j'ai fini à l'aide de deux autres images (une pour le vert foncé, ci-dessus, et une en noir), mais c'est encore une question je suis à la recherche d'une réponse. Comme pour les restrictions - je suis à la recherche d'une série d'étapes ou d'une procédure, je peux suivre que, étant donné un hex d'entrée, donne moi une liste de filtres et de valeurs-je besoin pour utiliser la couleur de mes blancs de l'image.
- Est-il possible d'utiliser un filtre svg?
- Si vous utilisez inline svg, vous serez en mesure de changer les attributs, tels que les couleurs et la taille etc.. css-tricks.com/using-svg
- Yup. Mais je suis intéressé à avoir le svg comme une image d'arrière-plan. En Plus je suis vraiment intéressé si ce qui précède est possible, comme prévu dans la question.
Vous devez vous connecter pour publier un commentaire.
La clé dans ce cas, c'est définir une couleur initiale. Blanc, ni noir ou de toute échelle de gris est techniquement une couleur réelle - vous ne pouvez pas saturer ou de la faire pivoter. Vous aurez à "coloriser" en quelque sorte, et le filtre sépia est le seul filtre qui faire un peu de colorisation.
Il serait plus facile si votre image est pure à 100% de rouge. Ensuite, vous pouvez simplement ajouter la cible degré directement et ajuster la saturation et la luminosité à l'aide de LGV pour cible. Pour une couleur de blanc de point de départ de la première étape est de convertir et de définir une couleur intermédiaire, donc on peut saturer et le faire tourner plus tard.
Permet d'abord d'assombrir l'image blanche et appliquer sépia pour obtenir une "base" de couleur, nous pouvons travailler avec:
Cela permettra de produire de la valeur de couleur RVB d'environ:
L'étape deux est de convertir de couleur HSL-espace qui nous donne:
Couleur de Base résultat
CSS:
HTML:
La conversion de la couleur de base de la couleur cible
Ces deux premières étapes sont statiques et son résultat sera réutilisé à chaque fois que nous avons besoin de trouver un ajustement cible (la valeur réelle de sépia est définie dans le SVG Filtres spécification).
Maintenant, nous avons besoin de calculer ce que nous avons besoin d'appliquer à cette couleur de base pour obtenir la couleur cible. D'abord convertir la couleur cible, par exemple #689d94 comme donné dans la question, à la LGV:
Ensuite, nous devons calculer la différence entre ceux-ci. La teinte est calculé simplement en soustrayant de la base de la cible. De même pour la Saturation et la Légèreté, mais comme nous l'assumer à 100% de la valeur de base, nous avons besoin de soustraire le résultat de 100% à la fin avec un diff pour le cumul des valeurs:
Convertir ces valeurs à un filtre-chaîne, en ajoutant le filtre existant, puis le mettre sur la div:
Et de la mettre vous auriez probablement faire quelque chose comme ceci en supposant que le filtre et divElement sont déjà déclarés:
Remarque qu'il y a probablement des erreurs d'arrondi que le RGB est représenté comme un entier, tandis que la LGV est à virgule flottante, de sorte que le résultat réel peut ne pas être exacte, mais il devrait être assez proche.
Live exemple
CSS:
HTML:
Alternative Viable options sont les suivantes:
Accepté la réponse est fausse. La teinte de rotation ne permet pas de conserver la saturation ou la luminosité et que vous avez à faire un fou de maths à venir avec les valeurs correctes. Le présent moyen plus facile, ce qui produira un résultat correct - c'est de faire un CSS filtre qui fait référence à un filtre SVG. Le feColorMatrix primitive en SVG filtres vous permet de choisir une couleur directement - comme si. Prenez votre couleur #424242 - diviser chaque couleur hex valeur par #FF (.257) et les mettre dans la cinquième colonne, les trois premières rangées de la matrice de couleurs. Comme:
CSS:
HTML:
Si svg sont utilisés alors ...
Vous pouvez ouvrir les fichiers svg avec quelques éditeur de texte, copiez et collez le code html du fichier puis de modifier la couleur du tracé tel que requis.
Dans l'exemple ci-dessous de code... j'ai juste changé la couleur du tracé de l'anneau central.
Espérons que cela aide..
JS:
HTML:
Pour l'image d'arrière-plan
JS:
CSS:
HTML: