Calculate the hue change 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 to give two colors in hexadecimal code , how can you calculate the degree of rotation in order to transfer the first to the second? If this cannot always be accomplished with a hue-rotation, then what is the way it can?

Answer 1

First of all, you cannot get all such colors. In your example, you cannot get color B from color A.

How you can turn one color into another is quite difficult 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 with 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 color may have a square root of 1.5. If you want to get the value in the base of normal 255, multiply it by 255 and divide it by the square root of 1.5.

For example, getcolors(1) to find out what color you get for -webkit-filter:hue-rotate(1rad); .

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