Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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?

share|improve this question
    
What is the relevance of Paint.net in this process and do you require a Paint.net-specific answer? –  Farray Mar 1 '12 at 6:53
    
It's the application I use and I'm unsure if this calculation would be different for photoshop or other imaging software. –  Josh Mar 5 '12 at 20:27
add comment

1 Answer

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.