Calculate hue rotation from color A to color B

Question

Take a look at the following CSS:

.colorA{
    color:#ff0000;
}
.colorB{
    color:#ab123f;
}
.sameAsColorB{
    color:#ff0000;
    -webkit-filter:hue-rotate(...);
}

The goal is: given two hex-code colors, how can one calculate the degree of rotation to turn the first into the second? If this cannot always be accomplished by hue-rotate, what is a way that it can?

Answer 1

First of all, you can't get all colors like that. In your example, you can't get color B from color A.

How you can turn one color into another is rather complicated and depends on each color. The following javascript function will give you the amount of red, green and blue that you will have in the new color if you start from green (#00ff00): (note: all angles are in radians)

function getcolors(x){
  var red = Math.sqrt(Math.cos(x+(Math.PI+1)/2)+1/2);
  var green = Math.sqrt(Math.cos(x)+1/2);
  var blue = Math.sqrt(Math.cos(x-(Math.PI+1)/2)+1/2);
  document.write("red: " + red + "<br/>green: " + green + "<br/>blue: " + blue);
}

The maximum a color can have is square root of 1.5. If you want the value in the normal 255 base, multiply it with 255 and divide it by square root of 1.5.

Write for example getcolors(1) to see what color you will get for-webkit-filter:hue-rotate(1rad);.

All primary colors (red, green and blue) work the same way.