# Color Theory



## v-six

Ok, I did a quickie on composition, so I figured a quick color study would be good. This will include a quick assignment for any that wish to participate. I won't be explaining how the color wheel works... if you need a refresher, look it up. You won't have problems finding references.

A few color definitions:

*Primary Colors:* Red, Yellow, and Blue. You knew that. These are the colors that the light on your screen is built from.
*
Secondary Colors:* Orange, Green, Purple. These are created by mixing two primary colors.
*
Tertiary Colors:* Colors made by combining a primary and seconday color. 

*Analagous Colors:* Colors that are adjacent on the color wheel. (e.g. red and red-orange

*Complementary Colors:* Colors that are directly opposite on the color wheel. 

*The assignment:*
Part 1: Make a document built from two complementary colors (two colors only!). You can cheat and use one one analagous color.. this is if you choose green and red, you could choose a green with a hint of yellow in it. You should use solid color, no filters that would overshadow the color. The sole purpose of this part is to make the layout vibrate as much as possible. 

Part 2: Same as part 1, except it should be smooth and vibrate as little as possible (the hard part). For this, you may slightly alter the hue of one of the colors, and raise and/or lower the saturation of both colors. 

Part 3: (Extra credit): Using only solid color, set up a document where two instances of the same color appear to be different.

Here's mine: 









ouch













alittle smoother...













If you feel like you're in boot camp from all of the little pointless exercises, you are! Shape up soldier!
P.S. try to separate your images atleast by a couple lines. The colors will interfere with each other.


----------



## Chevy

Ought to be interesting ... Did I mention I am partially color-blind? :grin:


----------



## v-six

should be even more interesting for you then!


----------



## Spatcher

Note, these are bad and I didn't have time to do the extra credit because I did them in the school library this morning using M$ Paint. ANd I did them in about 10 minutes because I didn't want to get in troule (viewing forums and uploading images)

Note also, my friend influenced my idea for the first pic :wink:










Second pic (some kinda dark green and some kinda dark red)


----------



## v-six

Good Henry, first one done. For part one, youll get better vibrations if you make your yellow closer to orange, or blue closer to purple.


----------



## Spatcher

I'll do the extra credit tomorrow in the library :grin:


----------



## ebackhus

the first one REALLY hurts...


----------



## v-six

Those were almost exactly my school's colors at New Paltz. But that's what you get with public education. Plus one of the school fonts is Gill Sans.. And Eric Gill did some not so clean stuff in his life. Ironically, arguably the most important American type designer, Frederic Goudy lived in Marlboro, about a half hour away from New Paltz. Why didn't they use one of his fonts? It would have been to smart a move -razz:


----------



## Spatcher

ebackhus said:


> the first one REALLY hurts...



It wasn't my idea, my friend told me to do it since I had a square and a circle.


----------



## devil lady

Here are my 3. One question, how do you get them to save clearly as mine dont look as good as when I first designed them?


----------



## v-six

What program are you using? Your jpg's are very lossy, do you have the option to save as gif's?


----------



## devil lady

Paint shop pro and they only save in 256 colours. I've looked round but cant see where to make them save higher.


----------



## v-six

devil lady said:


> Paint shop pro and they only save in 256 colours. I've looked round but cant see where to make them save higher.


256 colors is more than enough. That's not where you're losing quality. I don't have experience with the particular program though, anyone else?


----------



## Spatcher

I save it as a .png


----------



## devil lady

Found where I mucked up.


----------



## E-Liam

I'll be there with mine tomorrow sometime. Been busy the last couple of days.

Cheers

Liam


----------



## Spatcher

Here's my extry credit











(that second one is brighter right?)


----------



## Chevy

OK ...

Part1:










Part 2:










Part 3:


----------



## v-six

henry, try removing the black lines around your stars. They act as grounds, and don't allow the colors to interact. Chevy, make some kind of separation of your arrow in part 3. Optical color is relative, and in different circumstances the same color will look different. If the color isn't broken though, your brain can figure out that it's all the same thing. Also, the red will react in a similar way to two shades of blue. Play around with different hues, and the way that the red responds to it.


----------



## Chevy

More like this?


----------



## v-six

even more. Try with just the triangles


----------



## koala

1. In Photoshop I used the 'hue' slider to cycle through the various colour combinations and red & green seemed to vibrate the most. Purple & yellow also work well. The size of each colour bar in relation to its neighbour seems to affect the ammount of vibration. Where the red and green bars are the same width there is more vibration than where one colour dominates the other.






2. Lowered the saturation of the green and added some yellow to it, to bring it closer to red on the colour wheel. No changes to the red, but it looks softer than in the first image.


----------



## Chevy

I think this is it ...


----------



## v-six

Better. Now the only thing left to work on is that you've got red on blue and red on blue. Even with the blues at a different tone, the red will respond in the same way. Play with different background colors and see if the red does anything different.


----------



## Chevy

SixShooter said:


> Better. Now the only thing left to work on is that you've got red on blue and red on blue. Even with the blues at a different tone, the red will respond in the same way. Play with different background colors and see if the red does anything different.



Ahh .. I thought that we were supposed to keep the same base colors, adjusting the background to heighten or lessen the shimmer perception ...


----------



## v-six

Clarification for part 3: All you need to do is make a layout where the same color appears to be different, and the only rule is solid color only.


----------



## E-Liam

Hi,

Got here eventually.. :grin:

1. It was difficult to find colours that no-one had already used, but here we go..










2. This one was almost accidental in that they were the first (relatively random) combination that I tried.










3. I thought here that using a background colour with a lot of yellow, the same as the object, would give one effect, whereas using the second with significantly less would be the contrast. BTW, my monitor is the better part of ten years old, so it may look completely different to you. :4-dontkno :grin: 










EDIT. It seems to me that the red content seems to be the key in all of these.. just an observation.

Cheers

Liam


----------



## v-six

Chevy said:


> Ahh .. I thought that we were supposed to keep the same base colors, adjusting the background to heighten or lessen the shimmer perception ...


Chevy, I won't subject you to any more torture. Let me know if you can see how the arrows react differently to their backgrounds my attachment. The dense blue is complimentary to the red/orange. It makes the color seem brighter than it is. The reddish pink is the color of your arrows lightened up with less saturation. It is weak compared to the color of the arrow, and therefore makes the arrow seem darker.
Please everyone understand that I'm not trying to make you all figure out how color theory works. My hope in this lesson is to get you all to actively think about how colors that you use will react to each other... and that color is _always_ relative.


----------



## v-six

E-Liam said:


> EDIT. It seems to me that the red content seems to be the key in all of these.. just an observation.
> 
> Cheers
> 
> Liam


Red has the largest wavelength, and can be very painful when used correctly (or incorrectly. Also, bear in mind that with complimentary colors, there's only three main choices.. Red/Green, Blue/Orange, Yellow/Purple.
Also, put a blue and saturated orange together, and the orange will look red.


----------



## Chevy

So ... what's next?

I'm kinda getting into this ....


----------



## v-six

You want more huh?

Here a sequel to to part 3.

Take a grey with a hint of color and make it look like a flat grey (no color at all).
This can be done easily by putting this color inside a body of a similar hue with more saturation. Here's my example. Both circles are the same color... the one on the left looks grey, but on the right it's more obvious that the circle is actually purple.


----------



## devil lady

Like this? Or is it supposed to be a blue spot?


----------



## v-six

The plan would be to use a blue spot, but surround it with a blue that will make the spot look grey


----------



## koala

For those who missed mimo's post in Offline...


mimo2005 said:


> If your eyes follow the movement of the rotating pink dot, you will only see one color, pink. If you stare at the black + in the center, the moving dot turns to green. Now, concentrate on the black + in the center of the picture. After a short period of time, all the pink dots will slowly disappear, and you will only see a green dot rotating if you're lucky! It's amazing how our brain works. There really is no green dot, and the pink ones really don't disappear.


----------



## Chevy

Ok .. I think I got this one ...


----------

