0

I have an icon which utilizes 3 variants of the same basic color (at least it seems).

This is the basic color: #7646be:

enter image description here

1st variant (darker version): #582299:

enter image description here

2nd variant (lighter version): #c4acff:

enter image description here

My question is how to get the very same color "variants" for a different color?

For example this is another base color, and I'm looking for the lighter and darker variants for this based on the above sample:

enter image description here

Improve this question
2

1 Answer 1

Reset to default
1

Just make the same saturation and brightness adjustments to each base hue.

i.e. ...

Leave the H number as it is and change the S and B....
Saturation +7 and Brightness -15 for darker variant
Saturation -30 and Brightness +25 for lighter variant

enter image description here

Improve this answer
3
  • Dark version seems OK, but light version is not for some reason. Can you please double check? In the sample, lighter version changes the Hue value. Shall I change it accordingly?
    – Daniel
    Mar 29 at 18:58
  • @Daniel I did fail to notice that the hue changed for the purple light variant. To be honest, if sticking to this method isn't working, it's best to use it to get close, then if you feel more fine tuning is necessary you need to do that visually. Changing the Hue by 7pts will not make a big difference, but it will make some difference.
    – Scott
    Mar 29 at 19:13
  • @Daniel, you could try using Lab/Hcl instead if you want to be more "scientific" about it, but I agree that in the end finetuning the colors to a pleasing result is not something to be ashamed of. It's not given that a set of tints look "best" if they have the exact same hue and saturation. Sometimes for example it can look good to increase (or decrease) saturation as brightness increases.
    – Wolff
    Mar 29 at 22:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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