Comment calculer la teinte requirejse pour générer une couleur spécifique?

J’ai une image blanche que j’utilise comme arrière-plan pour une div et je voudrais colorier pour correspondre à la couleur principale des thèmes. Je suis conscient que je peux faire:

filter: sepia() saturate(10000%) hue-rotate(30deg); 

et faire défiler la hue-rotate pour trouver une couleur, mais est-il possible de calculer cette valeur à l’avance? Étant donné que la valeur hexadécimale spécifiée est assez sombre, j’imagine que je devrai également inclure le filtre invert(%) .

Étant donné une valeur hexadécimale de #689d94 quel calcul dois-je faire pour calculer la valeur de hue-rotate et d’ invert hue-rotate souhaitée pour convertir mon image de fond blanche en la même couleur?

modifier

Voici un extrait d’une div avec une image d’arrière-plan blanche filtrée en vert. L’astuce ici, c’est que tout le div est filtré, pas seulement l’image. Si je devais entrer du texte dans le div la couleur du texte deviendrait également verte.

 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); } 
 

    La clé dans ce cas est de définir une couleur initiale. Blanc ou noir ou toute échelle de gris est techniquement une couleur réelle – vous ne pouvez pas la saturer ou la faire pivoter. Vous devrez le coloriser d’une manière ou d’une autre, et le filtre sépia est le seul filtre capable de colorer.

    Ce serait plus facile si votre image était pure 100% rouge. Vous pouvez ensuite simplement append directement le degré cible et ajuster la saturation et la luminosité en utilisant HSL pour la cible. Pour un sharepoint départ de couleur blanche, la première étape consiste à convertir et définir une couleur intermédiaire afin de pouvoir la saturer et la faire pivoter ultérieurement.

    Permet d’abord d’assombrir l’image blanche et d’appliquer une couleur sépia pour obtenir une couleur de base avec laquelle nous pouvons travailler:

     filter: brightness(50%) sepia(1); 

    Cela produira une valeur de couleur RVB d’environ:

     rgb(178, 160, 128) 

    La deuxième étape consiste à convertir cela en espace colorimésortingque HSL, ce qui nous donne:

     hsl(38, 24.5%, 60%); 

    Résultat de la couleur de base

     div { background:url(http://richard.parnaby-king.co.uk/basket.svg) no-repeat; background-size:5em; width:5em; height:5em; -webkit-filter: brightness(50%) sepia(1); filter: brightness(50%) sepia(1); } 
     

    La réponse acceptée est fausse. Hue-rotate ne conserve pas la saturation ou la luminosité et vous devez faire des calculs fous pour obtenir les valeurs correctes. Le moyen le plus simple – qui aboutira à un résultat correct – est de faire un filtre CSS qui référence un filtre SVG. La primitive feColorMasortingx dans les filtres SVG vous permet de choisir une couleur directement, comme ça. Prenez votre couleur # 424242 – divisez la valeur hexadécimale de chaque couleur par #FF (.257) et placez-les dans la cinquième colonne, les trois premières lignes de votre masortingce de couleurs. Ainsi:

     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: url(#colorize); filter: url(#colorize); } 
     
    /filter>

    Si svg sont utilisés alors …

    Vous pouvez ouvrir les fichiers svg avec un éditeur de texte et les coller dans un fichier HTML, puis modifier la couleur du chemin si nécessaire.

    Dans l’exemple de code ci-dessous … j’ai juste changé la couleur du chemin de l’anneau central. J’espère que cela t’aides..

      var imgg =document.getElementById("path"); imgg.style="fill:#424242";