CSSで画像（アイコン）の色を変更するには

Question

青い看板と透明な背景で構成されるアイコンを表す画像がいくつかあります。私は、CSSを使用してそれらを表示：https://cdn2.iconfinder.com/data/icons/large-svg-icons-part-3/512/zoom_search_find_magnifying_glass-256.png

私は青い使用してCSSの色を変更できるようにしたい：

.icon { 
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center; 
} 

私のアイコンは、この1のように見えます。私はCSS3のフィルター機能を使用しようとしました。

アイデアは、私は16進数のコードを持っており、それをRGBとそれ以降のHSL（色相、彩度、輝度）に変換することです。最後には、各色について0〜360（度）の値を設定します。例えば、この画像を参照してください：http://lodev.org/cgtutor/images/hslhuecircle.jpg。

私は、このフィルタ機能を使用しています：

220degは色相のint型の値である

filter: hue-rotate(220deg) saturate(100); 

。だから、色相（最初にfloat値）までaproximated 220

は赤い例を見てみましょうです：＃FF0000の を色相の詳細は以下のとおりです。

array(4) { 
    ["hue"]=> 
    int(0) 
    ["saturation"]=> 
    int(100) 
    ["luminance"]=> 
    float(50) 
    ["degrees"]=> 
    int(0) 
} 

ので、CSSは次のようになります。

.icon { 
    background: rgba(0, 0, 0, 0) url("images/icons/my-icon.png") no-repeat scroll 5px center; 
    filter: hue-rotate(0deg) saturate(100); 
} 

しかし、この場合、青は＃9AF8FF（赤ではない）になります。

赤色得るために、私が使用する必要があります

filter: hue-rotate(195deg) saturate(100); 

色相回転値だけ度のように、0と360の間とすることができます。私の場合、結果は逆になり、0度の赤を取得するのではなく、次の画像（195度）で得られる値が得られます。http://lodev.org/cgtutor/images/hslhuecircle.jpg

cssを使用して画像の色を変更するのに役立つCSSフィルターなどのソリューションはありますか？私は他のCSS3フィルターで演奏しましたが、色を希望のものに変更できませんでした。

ユーザーが希望の色を選択できるアプリケーションがありますが、唯一の問題は既存の画像アイコンです。

お手数をおかけしますが、ありがとうございます！

Answer 1

私が質問を書いたとき、私は可能な解決策を見つけました。私の場合、結果は逆転した。

赤の場合、＃ff0000は0度です。私は、css3のフィルターの色相回転で、赤は0ではなく、180で始まることに気付きました。したがって、得られる色相/度の値ごとに180を追加します。この方法で、目的の色を得ることができます。この変更後

、HSL：

array(4) { 
    ["hue"]=> 
    int(0) 
    ["saturation"]=> 
    int(100) 
    ["luminance"]=> 
    float(50) 
    ["degrees"]=> 
    int(0) 
} 

は次のようになります。

array(4) { 
    ["hue"]=> 
    int(180) 
    ["saturation"]=> 
    int(100) 
    ["luminance"]=> 
    float(50) 
    ["degrees"]=> 
    int(180) 
} 

私は緑と他の色のためにそれを試してみましたが、それがうまく動作します。フィルタ機能 "色相回転"を使用しないCSSで画像の色を変更する方が良い場合は、それについて聞いて嬉しいです。

EDIT

は私が解決策を見つけました。

1）私は上記の解決策を使用しています（私は180度を私の学位に加える）。

2）私はので、私のフィルタがどのように見えるも

を明るさフィルタを使用しています：

filter: hue-rotate(350deg) saturate(100) brightness(1); 

このフィルタはこの色にアイコンの色が変わります。＃00FFFFを。 したがって、ソリューションは100％動作します。私はカラーコードと明るさを送信しており、フィルタ値を動的に計算しています。暗い色の場合は低い値（0.5未満）を使用し、明るい色の場合は0.5を超える値を使用します。