Preserved Topic: split-complementary colors in PS (Page 1 of 1)

Have a problem calculating the split-complementary colors in RGB modus in PS. I don't want to buy the program NVP color complementor. Anybody know the mathematical formula for generating them? Can already generate the Triad and complementory colors. Any help or link would be appreciated.
Until the Adobe dries up...



[This message has been edited by WebShaman (edited 05-22-2001).]
[edit] heh - sorry, had to try and fix 'er up![/edit]

[This message has been edited by bunchapixels (edited 05-23-2001).]

I am interested in this also.
I am working on a little webpage on colours, and tried to make a page where you can generate the complementary and split complementary colours.
I was not able to find anything about the proper formulas to use though, so I just come up with my own homemade formulas, and they are probably not all that accurate.
What formulas do you use to calculate the complementory and triad?
What I did was just to use the analogous colours of the complementary to get the split complementary.

Here is the page, if you think you have any use of it. http://www.donaldj.com/colours/wizard.asp

Shaman, replace the <>'s with []'s in the image tags to get your sig working.

(testing)





(from Rome with love )

edit: and don't forget the http:// part.
edit2: ouch. clashing colors. post it in the sig forum and can give you some tips on it.

[This message has been edited by mahjqa (edited 05-21-2001).]

Thas is pretty cool. I don't know much about this subject, but would it be easier to convert RGB to HSV, operate from there, then covert back to RGB? Just curious.

Hey, Maljqa, are you back or just poking your head in from some computer you purloined?

I'm guessing by the little comment.... "from Rome with love" ... it's reasonable to assume he's not back home yet.

Details details details sheesh

O.K. ZOX, it goes like this: First, choose a color (it will be one of the colors of your triad, you know, one of your 'prime' colors). Then, with the RGB numbers (ex: R 120 G 1 B 50 ), rotate the numbers once to the right (ex: R 50 G 120 B 1 ) and then again, using the second 'color' RGB numbers (ex: R 1 G 50 B 120 ). Now your have your 'triad' colors. For the complementary colors, you subtract one of the triad colors from white (R 255 G 255 B 255). What is left over is the complementary color (ex: white R 255 G 255 B 255 - the first 'triad' color R 120 G 1 B 50 = R 135 G 254 B 205, and that is the comp from the first 'Triad' color). To generate the other two, either repeat the process or, use the first technique of shifting now for the complement colors. As to how to generate the split-complementary colors, I've read an unbelieveable amount of theory on it, but can't find a formula or solution anywhere. If somebody here happens to know a way that works, please post it.
Until the Adobe dries up...

Thank you WebShaman, it never occured to me that it would be that easy to get the triads.

The method I used to get the complementary on the link I posted is the same as you gave. I am wondering however if this is right or wrong. Using this method a light colour will get a dark complemetary and a vice versa. Is this really right, anyone knows? Or should the true complementary to a light colour also be light?

As for the split complementary... if you look at the page I linked I do offer a way to get those... I am not at all sure it is right though... the method I used is to shift the middle value with the biggest of the two intervals, though maximum is 128.
for instace, if you have R20 G100 B255 the biggest interval is 155, so then I use 128. One of hthe new colours would then be R20 G100+128 B255 = R20 G228 B255.
Then when moving the middle in the direction of the smallest interval I move it till it equals the lowest (or highest, if that interval is smallest) and the rest remaining up to 128 (in this case) I add to the lowest instead. So in this instace I use 80 to go from 100 to 20, and then I have 48 left. these I add to the red. This would give R68 G20 B255.

If I have R150 G120 B70 the biggest interval is 50. One analogue is R150 G120-50 B70 = R150 G70 B70
the other one is R150-20 G120+30 B70 = R130 G150 B70

There is also a special case when two of the values are the same. At least this is somewhat the method I used. But as I said I am not sure if it is correct or not. Warjournal is right that it would be much easier to make these calculations in HSV. I have no idea how to convert from RBG to HSV though...

And maybe this whole post actually confused you more than enlightened you...




edit: it seems I got my own method wrong somehow, since this does not match the value my page returns... I am not able to look more into this now though...


[This message has been edited by ZOX (edited 05-22-2001).]

Dug this out of Google real quick.
http://www.cs.rit.edu/~ncs/color/t_convert.html

I'll do some more poking around to see what else I can come up with.

Stare at HSV Colour Space, then go and stare at [ILUG] OT - RBG colours.

Definitely looks a lot simplier by coverting to HSV, operating, converting back to RGB. Now get to work!


[This message has been edited by warjournal (edited 05-22-2001).]

Heilige scheisse ZOX! That was fast. O.K. For complementary colors, it's logical that if the primary 'triad' color is dark, that the comp is light. (Because that's what is left over from 'white' light when the 'triad' is subtracted) As to your split-complementary formula: what do you do when the 'triad' colors are RGB? (Ex: R 255 G 0 B 0 ) Here is where my head explodes everytime I try a new solution. It just doesn't work both ways. As to HSV, that's easy if you got PS. Just look at the values in the RGB section when you give the HSV values. However, I STILL need to be able to compute those values, and I am going CCRRAAAAAAAAAAZZYY!!!!!!! It seems that NOBODY knows the solution!!! And I've had it up to here with theory. I need cold, hard facts!!! I know it's possible. Check out NVP color complementor, a program that does all that. (Just give color complementor in Yahoo search engine, you'll land in the right area when you see the list color wheels, colors, and other stuff.) But I suspect that the program is also a bit shabby 'cause the demo pukes out the wrong numbers. IF ANYBODY HAS A SOLUTION, LINK, OR WHATEVER, POST IT PLEASE!!!!!!! (where are all the artists who use color wheels? One of them must have had this problem and solved it. Or are we the only ones?). Keep me posted.
Until DarkGarden brings back the 'Garden'....

Heilige scheisse ZOX! That was fast. O.K. For complementary colors, it's logical that if the primary 'triad' color is dark, that the comp is light. (Because that's what is left over from 'white' light when the 'triad' is subtracted) As to your split-complementary formula: what do you do when the 'triad' colors are RGB? (Ex: R 255 G 0 B 0 ) Here is where my head explodes everytime I try a new solution. It just doesn't work both ways. As to HSV, that's easy if you got PS. Just look at the values in the RGB section when you give the HSV values. However, I STILL need to be able to compute those values, and I am going CCRRAAAAAAAAAAZZYY!!!!!!! It seems that NOBODY knows the solution!!! And I've had it up to here with theory. I need cold, hard facts!!! I know it's possible. Check out NVP color complementor, a program that does all that. (Just give color complementor in Yahoo search engine, you'll land in the right area when you see the list color wheels, colors, and other stuff.) But I suspect that the program is also a bit shabby 'cause the demo pukes out the wrong numbers. IF ANYBODY HAS A SOLUTION, LINK, OR WHATEVER, POST IT PLEASE!!!!!!! (where are all the artists who use color wheels? One of them must have had this problem and solved it. Or are we the only ones?). Keep me posted.
Until DarkGarden brings back the 'Garden'....

Thank you warjournal! That should do the trick!
At least if I am able to interpret those formulas...

Makes me feel a bit stupid for creating a 1700 line asp page to do those calculations directly in RBG though ;o)

Webshaman, what I did when two values was the same was to get one of the analogoues by adding the interval to one of them, and the other analog by adding it to the other. Still having 128 as max.
So R0 G0 B255 would give R128 G0 B255 and R0 G128 B255.

Hey there WebShaman, good to see your actualy going through with your idea on a colour tute for the GN.

I'll look into you current problem if I have time.. really bloody busy at the moment, sorry

One thing I wish to through into you bag there though is to mabey spend some time looking into light wavelengths in relation to colour. I've also scoured the net to see if anyone has ever done a study on the effects of classical colour theory when applied to your average CRT monitor. And well to do this you would have to research the different principles of light and how colour affects it's luminance and domination of other colours around it. Remember that when you look at colours on paper you see that colour as light reflected from the paper. But with a monitor the light is projected and has different principles (it glows) than that of paper.

If you need help with any of your research let me know and I'll see what I can do, my email address can be found in my details if you wish to contact me. Also, if you get really stuck you could try sending some caffine pilles wraped in a sugar coated note to twItch^ asking for some input on the matter. He know heaps about colour, and I suggest reading the articles he's written, smart fucker that one, even if he's a tad edgy (gross understatment of the year!... hehe no offence twItch^ ) .

Oh, and welcome to the asylum! The general tone of conversation can be quite different to the GN board but you should fit the jacket nicely Re-doing your sig to match the ever so chilly colour scheme couldn't go astray either no?

Drac, you bloody wanker! Spend 3 1/2 years down under, mate. So here's a bloody G'day to ya! What was I doin' there? Walkabout, what else? You're like a Wombat - eats roots and leaves! Would give anything for a Southwark Premium beer, but here in Germany the beer's pretty good, so it ain't to bad. You should be carefull about offering help, I might just take up the offer! Like Steve said, this color thing is an iceberg. Right now, just concentrating on Additive color under RGB - and how someone can create a color pallette in PS (Which doesn't seem to be anywhere on the Web). The next step is then with moods and symbolic meaning and then tying it all up with the different elements in a Website. That alone is starting to be a bitch. Most of the tut is already written - just need the bloody formula for the bloody split complementary colors (and of course, all the graphics that go with the tut). Gonna check some of the above areas. Thanks a bundle, Warjournal! As to sigs, well, can you loan me some spare time?
'cause I sure as hell don't have any!
Until the Adobe dries up... (or until I drop in my tracks from exhaustion!)

WS, is that an insult or a hello ~sigh~ why is it everyone thinks it's cool to say g'day to Australians. It's like talking ye Olde English to someone from the UK simply cause their from the UK. You know I once convinced a mexican that I rode a kangaroo to school... hehe that was funny....

Alright, somebody here is a base-turd.
http://www.scottandmichelle.net/scott/code/index.html

Ripped the code under VB/Graphics/HSV2RGB

I've got a real sloppy proto-type working. Bah!

Damn bombs! Ohhhh sure... switch two little variables around when passing to a Function and things get screwy. I had forgotten how much fun this is. Maybe it's time for some good ol' fashion coffee.

Someone is still a base-turd.

Hey, Drac. No insult, man. I spend 3 1/2 years in the outback in south australia. The only thing that made it really bearable were the locals. Of course, once I gotta chance to see most of australia, sure loved it. Luv the joke about the Kanga. Would have loved to see that mexican's face. Decided to take a bit of time and make a sig. Managed to stir up quite a commotion (and not because my sig was very good). Guess I got a bit silly. Its now back to business.
Until the Adobe dries up...

Hey War, you referring to some poor military puke or what? Anyway, I,m starting to get the feeling that this color thing is goin' deep. Didn't dream that it would be so difficult to create/find/solve one tiny formula, and I've had calculus! Feel so dumb right now, heck go figger. What I don't understand is, why didn't the 'Experts' tackle this one before? *shakes head* Time to call it a day.
Sure have learned alot in small amount of time. Thanks for all the help, everyone.
Until I solve the split complementary color problem...

aussie aussie aussie!

quote:

---

why didn't the 'Experts' tackle this one before?

---

now webshaman, im not claiming to be an expert, or anyone with any knowledge, come to think of it, but i reckon that the 'experts' probably didnt tackle this because they didnt need to.
sometimes, a pair of eyes with a keen taste for what works can tell you more than a color wheel, or some mathematically contrived table of aesthetics.
that's what i reckon, anyway.
anyone who would claim to be a professional in this area, feel free to comment.
*sigh* who am i kidding, the person who knew color best here (as far as i know) was twitch. if anyone ever read digital web, you wouldve found out such things.
can anyone say "sometimes, we take our best resources for granted"?

___________________
b u n c h a p i x e l s

Compliments of some PDF detailing using this for catching structural errors in photographs of fabricated objects (???). Heh. Something like that.

RGB 2 HSV formula

Screw that code I VB code I found (well, most of it -- it is an example to learn from). Almost time to get my hands dirty. My code, my way.

So now I have a question about variations. Hue is measured in degrees, so how much of a degree shift for analogous colours? 15 degress? 30 degress? How much of a shift in value(s) for monotone chromatic variations? Things like that. I need some number or at least a decent starting point please.

Webshaman, don't mean to be too much of a hi-jacker, but you really got me going on this.


[This message has been edited by warjournal (edited 05-23-2001).]

Hey War, no prob. Glad that I got some others interested. Hey Bunch! Didn't it ever occur to you that, with such thinkin', there never would have been filters for PS? Yeah, I could 'do it by hand' (or is that eye?). Have been for years. But time is money, and I thought: Why not kill three birds with one shot? First, make this thing routine and fast (cost efficient). Second, help beginners out, without blowing thier minds with tons of lengthy dialoge and hard to use (and understand) concepts, like those I had in Art school. And third, put it all in a tut. Isn't that the 'spirit' of the net? I always thought it was - sharing understanding and helping others.
Until the Adobe dries up...

I agree with Buncha that a reason you don't see much of this around is that you really should not rely on exact math to decide about something as subjective as colours.
Math can't take into consideration the emotion colours evoke, and the way colours can interact to give special effects.

Still, I think it can be useful to have a more scientific way to calculate things such as the complimentary colours. I would never expect to use the calculated colours right away though, but then I would begin to tweak them till I like the way it looks.

Webshaman, I guess we both had the same idea about making a webpage like this. My page is here now: http://www.donaldj.com/colours and the colour wizard which uses all these calcuations is here http://www.donaldj.com/colours/wizard.asp
I have have changed the wizard page to use the conversion to HSV instead, and I think that it was much easier this way. I do think the formulas I used before, and that I mentioned here, was right. But this just seems like a more solid way to do it. Thank you again Werjournal for posting those links with the conversion formulas
Oh, and WebShaman, post a link when you have your page finished, and I will add a link to it from my page.

One thing I wondered about on the tint and shade variation I made... once the value is 1 the colour would of course not get any ligher that way. Would it be correct them to start decreasing the saturation instead to get a colour which moves closer and closer to white?

Zox, I'm not suggesting converting the entire thing into a mathematical equation. For such things as feeling, mood, warm and cold, not to mention symbolic, in color design, I don't think it's possible to make it straight mathematical. But as a tool (just like a color wheel dial is to artists), it would cut work time. Which means I have more time to work on design. Also, consider that there are 16,7 million colors to choose from here. And I, for one, can't keep them all in my head, and certainly can't then start matching them all up.
To have a tool that can do that is for me priceless. I can always decide to change the colors that I am presented with to something else. By the way, I don't have a site for color. I'm writing a tut on this, and ran into this problem. Kinda like your site, tho'. Like the color wizard, its cool. Would be nice to have it as a filter for PS.
Until the Adobe dries up...

Yes, that's how I feel also Webshaman.
Are you going to post your tutorial on the web? Let me know where when it is finished

Warjournal, the standard colour wheel has 12 different colours in it, so the shift for an analogous colour would be 360/12 which is 30 degrees. On my page I use 45, 30 and 15 degrees.

Having some sort of colour wizard as a Photoshop plugin would be cool. Anyone knows if such a thing exists?
Maybe we should involve InI in this also, as he did say he knows how the Photoshop filters are made...

WOW!! Fasinating thread. I've been away for a couple of days so I missed the beginning of this discussion. I do have a couple of comments about color, though.

First, terms like complimentary, triad, and split-complimentary colors come from painting. This is the way a painter referes to using color. Painters work in HSL color space. Printers use CYMK and Physicists and Computer Graphics People use RGB. HSL is almost like HSV or HSB except that if you look at the HSB color cone you will see that the colors going toward the point of the cone get greyer and less saturated. The HSV color space is the opposite cone with colors being saturated at the base of the cone and becoming lighter and less saturated toward the tip of the cone. HSL space is like two color cones joined t their bases with the highest saturation of color at the cones base and one cone goes to white at the point and the other goes to black at its tip. This means that neutral grey is in the center of the circle where both cones meet.

When a painter talks about using the compliment of a color he means to use the color that when added to the original color will make a neutral grey. I don't think the complement of a color should be lighter or darker than the original color because you are adding colors directly across the cone from each other togehter to get the neutral grey. Triads of color are the same way. when you add the colors in a triad together (in HSL space) you should get a neutral gray. This means that the complement of a color should 180 degrees away from the original with the same Saturation and Lightness (or Value or Brightness) and the Triad's of a color are 120 degrees away.

To calculate the split-compliment use colors that are 150 degrees away from the original color with the same Saturation and Lightness.

WarJournal: Most algorithms simulate the translation of colors from RGB or CYM to HSV by assuming the colors we see are evenly distributed along the RGB lines and the HSV circle. But if you look at the colors created in a gradient that uses HSV (HSL, or HSB) you will see that the colors tend to bunch up arround Cyan, Magenta, and Yellow while Red, Green and Blue are smeared out to occupy much more of the spectrum than they really should. I think that rather than using a linear function to translate from RGB <--> HSV we should be using a function that looks more like a CoSecant squared curve. It is one of the projects that I have played with over the last couple of years, but have not had the time to really investigate. If you are playing with the color transforms, you might want to take some time to see if you can work this out. Let me know if I can help you in any way.

Finally for someone who REALLY knows color look at Charles Poynton's web site.

FINALLY! I have solved the problem all by myself! Here is THE solution:

D= distance between one triad color and the complementary color of one other triad color.

Split Complementary color= 1/2 D added to original triad color for the first split Complementary color, with a shift to the right, then add to original triad color for the second.

EX: 1 Triad RGB (20,80,100) 2 Triad RGB (100,20,80) 3 Triad RGB (80,100,20)
Complementary 1 Triad RGB (235,175,155) Compl. 2 Triad RGB (155,235,175) Compl. 3 T RGB( 175,155,235)
Split Compl. 1 T RGB (87,157,137) (97, 117,168) 2 T RGB (137, 87, 157) (168,97,117) 3 T RGB (157,137,87) (117,168,97)

Split formula D= Compl. next to 1 T is RGB (175,155,135) - 1 T RGB (20,80,100) = RGB (155,75,135) *1/2 = RGB (77,37,68) Then add to original 1 T = Spl. Compl. RGB (97,117,168) then shift R (77,37,68) = (68,77,37) add to original 1 T = Spl. Compl. RGB (88,157,137). Now just shift R the Spl. Compl. colors for the rest.

A sincere thanks to everyone who had an interest and helped me.

I thought we solved this a long time ago <g>

The distance between a colour and the compliment of one of its triads is 60 degrees. You used half of that, and that's 30 degrees.
180-30 = 150 degrees, just like hyperbole mentioned.
Still, what you give seems to be a way to calculate it in RGB. Myself I just do the calculations in HSV instead, after Warjournal posted those useful links. It is much less messy. My formula page went from 1800 lines to 600 <g>


Oh, and Hyperbole, I agree that it makes more sense if the complimentary colour has the same value. I have adjusted my colour wizard so now a light colour gives a light complimentary colour.

And that is true what you say about the distribution of the colours. I think that is especially true in the green area, where you can change the proportions a lot, and yet it still look like the exact same colour.
Please let us know if you get any further in your ideas about compensating for this