I have got an image that has got plain red color, #FF0000. My target is to change it to #1100FF.
Just couple of weeks ago I get to know that we have tinting/filtering capability in CSS3. It works pretty good however final color of the Image is not #1100FF. I check color through Chrome Tool 'Awesome Color Picker'
So how I do it is what you must be asking.
function RGB_TO_HSV($R, $G, $B) // RGB values: 0-255, 0-255, 0-255
{ // HSV values: 0-360, 0-100, 0-100
$HSL = array();
// Convert the RGB byte-values to percentages
$R = ($R / 255);
$G = ($G / 255);
$B = ($B / 255);
$maxRGB = max($R, $G, $B);
$minRGB = min($R, $G, $B);
$chroma = $maxRGB - $minRGB;
$computedV = 100 * $maxRGB;
if ($chroma == 0)
{
$HSL['H']= "0deg";
$HSL['S']= "0%";
$HSL['V']= (3*$computedV)."%";
return $HSL;
}
$computedS = 100 * ($chroma / $maxRGB);
if ($R == $minRGB)
$h = 3 - (($G - $B) / $chroma);
elseif ($B == $minRGB)
$h = 1 - (($R - $G) / $chroma);
else // $G == $minRGB
$h = 5 - (($B - $R) / $chroma);
$computedH = 60 * $h;
$HSL['H'] = $computedH."deg";
$HSL['S'] = $computedS."%";
$HSL['V'] = $computedV."%";
return $HSL;
}
Then In CSS, I do this:
img {-webkit-filter: hue-rotate(<?=$HSL['H']?>) saturate(<?=$HSL['S']?>) brightness(<?=$HSL['V']?>);}
Now please tell me how I can achieve the required color? Do I need to add or subtract the original color (ie. #FF0000) to get the desired color or the code I am using is not correct or what?
Output Color is : #0F2DFF
Edit: There is no restriction that color of the image is #FF0000. I can change it as long as I can tint the image to the any color accurately.