CODEWITHSUNDEEP
csscolors
Ryan Saxe
Ryan Saxe

Reputation: 17829

Calculate hue rotation from color A to color B

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?

Upvotes: 7

Views: 3704

Answers (2)

Cloud
Cloud

Reputation: 240

Here is a C# solution you can use in your razor view

@functions {
    string ToHueRotate(string startingColour, string targetColour)
    {
        var color1 = System.Drawing.ColorTranslator.FromHtml(startingColour);
        var color2 = System.Drawing.ColorTranslator.FromHtml(targetColour);

        int hue1 = (int)color1.GetHue();
        int hue2 = (int)color2.GetHue();

        int hueDifference = (hue2 - hue1 + 360) % 360;

        return hueDifference.ToString();
    }
} 




<style>
    .your-image-class {
        filter: hue-rotate(@ToHueRotate("#38cca5","#38cca5")deg);
    }
</style>

Upvotes: 0

Donald Duck
Donald Duck

Reputation: 8892

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.

Upvotes: 0

Related Questions