Compute the hue/saturation/lightness shift between 2 colors for paint.net

Question

So, I have a color set up for links on my site. let's say that color is f80021. This is for a particular red theme on my site, complete with colored icons, backgrounds for buttons, etc.

What I want to do is take a single color for links from a client and compute the color shift that I can then apply to all the colors, icons, and backgrounds to create a new theme.

Is there an easy way to do this?

Answer 1

This may be a little late, but here's my answer :D

---

I'm not sure if there's an easier way, per say, but after looking into it, I think you can do the following.

In Paint.NET, you can expand your Color palette with the More>> button, this is the first step to finding the equivalent color-shifts for another color, let's say a blue. You will now see the RGB & HSV values. We won't concern ourselves with the RGB values.

Red

Taking your original color of #F80021, I created a lighter (#F77B8C) and darker versions (#CC3347).

What we want to focus on are the HSV values. Below are the HSV values for your original color:

• Hex: #F80021
• H (hue): 352
• S (saturation): 100
• V (value): 97

Now for the lighter shade. (NOTE: this is just an example, replace this Hex# with your own, lighter-color version)

• Hex: #F77B8C
• H (hue): 352
• S (saturation): 50
• V (value): 100

And, finally, the darker shade.

• Hex: #7F1F2E
• H (hue): 352
• S (saturation): 75
• V (value): 50

Notice that the hue values stayed the same throughout the shade changes.

---

Blue

To create a blue theme with similar shades/values as the rest, you first pick a blue. In this case, #0000F8. Again, the HSV values are as follows:

• Hex: #0000F8
• H (hue): 240
• S (saturation): 100
• V (value): 97

Notice, that this blue's Saturation and Value amounts are the same as your original red's Saturation and Value amounts. The same will be true for your lighter and darker blues. (The lighter blue's S & V values will match the lighter red's S & V values, while the darker blue's will match the darker red's.)

Lighter blue.

• Hex: #7F7FFF
• H (hue): 240
• S (saturation): 50
• V (value): 100

And, the darker blue.

• Hex: #1F1F7F
• H (hue): 240
• S (saturation): 75
• V (value): 50

---

Conclusion

So, in short, for your new theme to match your old one, your new Saturation & Value amounts need to match your old S & V amounts and for your new theme's color to stay consistent, your Hue value needs to be the same in your new theme.

I hope this made sense. If you or someone else has a question, I'll do my best to answer it in the comments.