I am trying to design a site with a couple color schemes. I am looking for a way to make color schemes that match mathematically.

For example, I know that #FF0000 matches perfectly with #00FF00 and #0000FF. Is there some kind of equation to get, for example, the yellow version of #509cc0? I also have the RGB values and the HSL values on hand.

  • 1
    I assume you mean automatically? It should be pretty easy using HSL - you just change the Hue value (the 'H' in HSL) to the appropriate value or by the appropriate amount. Wikipedia has a formula for how to convert HSL to RGB which could be done after, and the hex #00FF00 code is just the RGB value in hexadecimal (base 16) format. Someone more mathematical than me could probably turn this into an answer... – user56reinstatemonica8 Sep 13 '12 at 17:53
  • Actually, that makes a lot of sense as far as changing the Hue value. The only problem is finding the right value to change it to. – Ian Sep 13 '12 at 18:08
  • @user568458 I'd post that as an answer! – Yisela Sep 13 '12 at 20:42
  • Should the question be something like "how to change hue of a RGB colour while keeping saturation and lightness the same?" – e100 Sep 14 '12 at 12:45

I'm wary of purely mathematical approaches to color harmony; numbers have no aesthetic sensibilities. That said, since the Hue wheel is divided into 360 degrees, one can build a complementary color scheme by adding 180 to the hue for any given color, a triadic by adding and subtracting 120, and so on.

The triadics below were done using simple arithmetic in the H field of the Photoshop color picker, adding 120 to the value each time. Pure RGB above (in reverse sequence, sorry!), and your starter color, #509cc0 in the row below.

Triadic colors calculated in HSB

| improve this answer | |
  • That's exactly the answer I was looking for. I think this will be perfect, thanks! – Ian Sep 14 '12 at 14:12

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.