7 replies to this topic

[Walter]

Hello,

I've been trying to learn a little more about color theory but I'm having a little trouble on one point I'm hoping someone here can clarify for me.

If I choose a color scheme, do the value and saturation of each of the colors have to be the same?

For example, Lets say I pic a triadic color scheme of red, blue, and green.

• Can I use a highly saturated blue and a lower saturated red?
• Can I use a low value green and a high value blue?
• If I use a blue in two different saturations or values...is it really a separate color for the purposes of the color scheme?

Put another way, (I think), If I'm using a color wheel, do each of the final colors need to be the same distance from the center of the wheel? Of can I choose a red thats on the outer edge of the wheel and a blue thats closer to the center without breaking the color scheme?

Thanks,

Walter

[AbleReach]

For example, Lets say I pic a triadic color scheme of red, blue, and green.

Already, it depends. Three very different colors can be a lot to handle. One saturated tone each of red, blue and green could be nice for a toy site without a lot of small text to read, or for an Andy Warhol print, but it'd be an inappropriate overload for a bank.

Can I use a highly saturated blue and a lower saturated red?

It depends. Blue and red say patriotic to me - them's flag colors. I'd also be careful with a warmer (orangish) red and a bluegreen. Saturated colors that are opposite each other on the color wheel tend to vibrate when next to each other -- red and green, blue and orange, yellow and purple. You don't want that vibration unless the vibration is the point, and even then be careful - it's distracting. Especially be careful with anything that's supposed to be legible.

Can I use a low value green and a high value blue?

Give it a try, and see? I'd probably want to tie them together in some way -- maybe add a touch of whatever seems like it would be opposite of both, to make them seem more related. I could see using green and blue, both softened with a touch of orange or yellow, with an accent of orange that's been toned down slightly with bluegreen. There are a lot of ways to go.

If I use a blue in two different saturations or values...is it really a separate color for the purposes of the color scheme?

I think you'd probably need to go easy on adding additional variables, if you've already got red and green in the same color scheme. Try it and see.


I think that the best way to get to know color is through experimentation. Start simply. Really simply. Don't start to by designing a layout you'll want to keep.

- Try using only black, white and shades of gray, and use that to map out a feeling of weight - the light and dark in your design.
- Then you could add a little texture, or change it to a monochrome - pick a hue (full strength color) and play with tints and shades of that one hue, in the same design. (Tint by adding white, shade by adding black)
- Then, you could try combining the monochromatic color design with shades of gray.
- Next, get comfortable with two colors next to each other on the color wheel - this is called an analogous color scheme - using the same method of starting with where you want the light and dark emphasis in your design.
- When you're happy with analogous, try adding a third color that's opposite the analogous two - the compliment of the analogous two. Any combo of the three works, but don't think of them as separate, think of them as being available to mix together and balance off of each other.
- Way down the block towards subtlety and complexity comes split complementary. Split complementary is when you use two that are next to each other on one side of the wheel, along with two that are next to each other on the other. Google for [Mary Cassatt split complimentary] or [Van Gogh split complimentary] and you'll find some nice examples.


These are just my opinions, with a little vocab mixed in.
Found this on color vibration
Quick color scheme examples, from art.

[Walter]

Hello AbleReach,

Thanks for your thoughts. I guess though I'm asking from a more formal perspective. Do these things break the formal color theory rules for a triadic color scheme. If you mix highly saturated colors with lower saturated colors.... or lower value colors with higher value colors...even if the hues are spaced correctly around the circumference of the color wheel for a triadic color scheme, is the result formally a triadic color scheme anymore?

My own "eye" for these types of things doesn't seem to coincide with what the majority of others find appealing. So...I'm trying to make use of some of these more formal "rules" until such time as I can develope a little more natural sense of appealing color combinations.

Thanks,

Walter

[AbleReach]

If you mix highly saturated colors with lower saturated colors.... or lower value colors with higher value colors...even if the hues are spaced correctly around the circumference of the color wheel for a triadic color scheme, is the result formally a triadic color scheme anymore?

Yes. Triadic is three colors, not necessarily of the same tint or saturation.

My own "eye" for these types of things doesn't seem to coincide with what the majority of others find appealing. So...I'm trying to make use of some of these more formal "rules" until such time as I can develope a little more natural sense of appealing color combinations.

Well... people with good color sense probably loved the whole thing enough to do exercises, staring with monochrome and working their way up. It's not **all** the magic of having color sense. :-) One common exercise for beginning design students is to slowly dilute one single color by adding equal bits of white, making up to 100 painted color swatches - how many depends on how process-oriented the instructor is. After that's done with the 10 or so colors in everyone's palette, the same thing gets repeated by adding black to each and every color, for the same amount of swatches. After that's done, there are various combinations to work out - adding bits of the color next door on a color wheel, or adding the opposite color. Some colors hold onto their depth longer, some end up looking more yellow or blue after they're severely lightened, and by the time you're through you know a lot about how they might look together. For "fun," some of us had teachers who assigned 100 drawings of eggs using only an Ebony pencil - no color until the second 100, after the color swatches are finished or greatly under way. The drawings didn't have to be great, they just had to done with a sincere effort. By the time you finished, you knew light and dark and something about how to judge proportion and use a pencil --- or you really did not want to learn how anyway. My prof was more laid back - he just said 100 grayscale drawings of hands, feet, or eggs. Avoiding faces helps a student sidestep worrying over how pretty the thing "should" be. Everyone has hands and feet with them when it's homework time, and most of us can spot a funny-shaped egg, or a foot that can't be walked on.

No kidding. :-)

Rules help, but they're not shortcuts.

[AbleReach]

This may help -- or not!

Take a look at the Monet on this Color Relationships page. He uses a split complementary theme.

The split complementary scheme is a variation of the color combination above. It uses a color and the two colors on each side of its complementary color. This still gives high contrast but without the strong tension of the complementary scheme.

Look and analyze. The three colors indicated are present in the painting, but not at the same saturation. That lavender color is not as intense as the yellows. To my eye, this works partly because there is more space taken up by the less saturated color - they balance.

Learning the system for identifying the name of the color scheme is about learning a vocabulary that describes what's there. I could plug in the same three colors and completely flop at Monet's sort of interpretation. To really understand the way he uses color, I'd probably have to copy his painting, and play with how to mix the same colors.

[Walter]

Hey AbleReach,


Thanks....that did help a lot. Knowing that I can use different saturations, values, and etc and still stay "in" the color scheme makes a big difference. Without that....it was all looking unbalanced to me...either too washed out or too intense.

I was chuckling when I read about your experiences in school. I got several books from the library on color...all from the perspective of painters......and they all mentioned having to do the type or exercises you mention when they were first learning.

After looking at the painting by Monet you suggested I went through some other paintings as well and you definitely can see that they vary the shades and etc of the colors. That really helped me to get my mind around the concept. I think maybe using the on line color wheels and the hexadecimal codes threw me off course for a bit.

Again...Thank You Very Much,

Walter

Edited by Walter, 25 July 2010 - 08:36 AM.

[AbleReach]

And thank you. This thread was an opportunity to revisit one of my favorite themes -- do not underestimate the value of learning. I'm an artist first, but, a few years ago I had some health problems that changed everything. I used to be super coordinated, super fast with my fingers. I'm not any more. At first it was like my world had ended, because I could no longer do my art, and I'd always done work that included creating with my hands. Out of sheer boredom I decided to learn how to take apart and put together my computer, because being able to do something like that was so far outside of what I imagined for myself that the depression I felt over losing my art did not apply - nothing to lose, if I wasn't "technically" minded and likely to succeed there in the first place, right? After building a few computers for friends and family I moved on to html. I was slow and shaky, but I could do it! Amazing. Mental blocks uber alles, vs exploring mental blocks becoming a new foundation for growth?

:emo11:

Today, when I teach someone who isn't "technically minded" how to fix an html link in their blog, I watch them balk (just how I would have,) and then I explain that it's only punctuation. Sometimes there's a response that they're used to being more creative, less cut and dry. I like to say that if they can spot when a sentence does not begin with a cap and end with a period, explanation point or question mark, they can keep track of the three sets of symbols that make a link work ( "" and = and < /> ). I explain that to get to the wonderful, vibrant creative part of sharing a clickable link, they only need to learn where to put those three, and it's OK to make a cheat sheet for copy and paste.

The difference with color is that the online generators don't teach you how to assess your work - or maybe there is not as much difference after all. Experience helps me learn how to assess my work - that, and the support of others! Remember when the results of code validation software was confusing as hell? Well, maybe you don't, but I do. Because I didn't know what the errors looked like well enough to skim and find them easily, or even what the names of those errors meant, not passing validation meant hours of stress and unproductive research. Now, I'm more familiar with what I'm looking at, and validation isn't as big of a headache. Color is like that, too.

Share some swatches and prospective web site color schemes, and ask questions. There are some really good art and design people here to bounce ideas off of. Miriam (SEOigloo) does lovely things with color, Dave (Black Phoenix) has a finely tuned design sense, and I've seen Risa pump out some very nice little jpegs illustrating what could be done with a web site design.

[Walter]

AbleReach,

The difference with color is that the online generators don't teach you how to assess your work - or maybe there is not as much difference after all.

I think the confusion with the online color wheels for me came in because different shades, values and etc have different hexadecimal numbers......for me that meant different colors. Which may be true, but as I undertand it now formal color schemes like triadic and complentary are based on hues. So while I may have several different "colors" (hexadecimal codes)....I could very well only have one hue....but in various saturations and etc.

I'm not a painter so I altered some of your advice and did two things. One I went into photoshop and made up sets of "swatches" for several hues I was interested in at varying levels of brightness and saturation. I also found this color wheel:

http://colorschemedesigner.com/

And what I've been doing is running my triadic color scheme but then taking the colors it spits out and running them through a monochromatic scheme....so I can see different shades and etc of the potential colors. I also like this color wheel because it allows you to see a sample site using the colors in the scheme.

I'll also try and make some time to go through Olga's Gallery ( an excellent online "museum" for paintings) and try to develop more of an eye for these things.

do not underestimate the value of learning.

Great advice and I'm trying to follow it. I know that the studies I made of typography and layout improved my skills and I suspect that this study of color will benefit my work in the future as well....Although I suspect that I will need to revist these themes more than once in the future.

There are some really good art and design people here to bounce ideas off of. Miriam (SEOigloo) does lovely things with color, Dave (Black Phoenix) has a finely tuned design sense, and I've seen Risa pump out some very nice little jpegs

I've noticed there is some real talent here (although I wasn't aware of your background in the arts). Thats why I thought I'd give posting the question here a try even though I hadn't seen a lot of threads on that type of topic.

Thanks Again Very Much Ablereach you were a huge help.


Walter