How to Choose Color Schemes in Graphic Design and Web Design - Find Out How to Combine Colors

How to Choose Color Schemes in Graphic Design and Web Design - Find Out How to Combine Colors the Right Way - Part I

By Lois Knight

How to Choose Color Schemes in Graphic Design and Web Design - Find Out How to Combine Colors the Right Way



Don’t forget to visit Part II of this article, 55+ Color Tools for Graphic Designers

I Have a Secret to Tell You - I have had such a hard time writing for this subject! I wanted to write about colors and color schemes and how we can be more efficient if we know more about it, but I’ll be honest, I hit a brick wall. For a graphic designer, the world of color is where we thrive. The more vibrant the color, the better I like it. With that being said though, color invades every nook and cranny of our lives. It infuses us with emotions and subconscious messages, creating pizzazz and passion wherever we look. As graphic designers we have to know which colors send the right message. Do we need to show fire and excitement with the color red, or do we need the calming effect of sky blues and soft blue-greens? Just the names of the colors themselves evoke a reaction.

I wanted to start with a few elementary color schemes to refresh our muted memories. Everyone knows about Primary Color Schemes. These are our basic colors from which all others are derived. We are taught in preschool and kindergarten the colors red, yellow and blue. These bright cheerful colors have carried their way throughout our adult lives, reminding us to slow down, stop or go at the neighborhood intersection, or that we are in trouble by the law enforcement officer when we ignore those suggestions. The grocery ads are splashed with red urging us to buy the items on sale for the week instead of the other name brands. Big yellow school buses with happy laughing children bring back memories of our own school days as well. But what do these colors mean and how do they work for the designer?

Primary Colors

Now what thoughts run through your head when you see these three colors? They are the most basic of colors and cultivate the most basic of emotions.

Primary Colors RedRed is the immediate attention grabber, forcing your eye to the uppermost pinnacle of the triad. Red is a color of passion and fire and when used sparingly, can create a visual that jumps off the page at the customer.

Primary Colors Yellow Yellow is such a bright cheerful color and makes me think of happy kids going off to school in the big old yellow school buses that have been around forever. It also signals caution and is used similarly to red to signify alert or attention in may ad campaigns.

Primary Colors Blue When you see the bright flashing blue lights of a fire truck coming up in your rearview mirror, does your heart skip a beat? Blue has long been associated with quiet courage in the face of danger. It also creates a sense of calm and contentment. Its connection to loyalty adds to its list of achievements.

But where do we go from here? As graphic designers we have clients that run the gambit looking for just the right color or color scheme to create the perfect ad. For this reason, secondary colors may come into play

Secondary Colors





Secondary Colors - The Color Orange Because orange is derived from both red and yellow, attention getting colors; it is also used to grab attention. When used in the darker shades, it makes you think of autumn and the holidays. For whatever reason every time I think orange I think of the big navel oranges we always found in our Christmas stockings and the smell of pumpkin pie at the holidays.




Secondary Colors - The Color Purple

Though purple tends to be listed as more of a feminine color, it has long been associated with royalty, and lends itself to quiet dignity and grace. It has a calming effect when used as a dominant color and works well with a combination of creams and yellows.




Secondary Colors - The Color Green

Green is one of my favorites for a number of reasons. Money is green, and I like money. But it’s more than that. It is the color of nature and growth and of new things. Depending on the shade of green, it can be a stabling color offering a secure haven.

Tertiary Colors

But where do the rest of the colors fit in? Many are found in what is called tertiary color schemes. These colors are mixed from the secondary colors and offer a wide range of complimentary colors. These do not offer the same fire and passion of the red in the primary colors nor does it have the dignity of some of the secondary colors, but they are important none the less. Lime, teal, butterscotch, plum and fuchsia allow our minds countless alternatives to just the primary colors we began with. Now that we have an idea of the basic color schemes, how do we use them? That is where the true secret is!

Lizards - Black and White and Complementary 4 Color Schemes

Colors working in harmony are vibrant, informative, and effective. In the Black and white example, the lizards are effectively catching our attention. But when they are displayed next to the same lizard using a complimentary color scheme, our eyes are immediately drawn to the splash of vibrant colors.

Lizards - Black and White and Monochromatic Color Schemes

Scheme using green Black &White

Colors that line up directly across from one another or lay side by side on a color wheel will always give a complimentary combination to work with. Even then, sometimes we just like to lay the chips out and look at them side by side for the best effect. Do we want the dark background with light colored letters to catch someone’s eye, or a slightly different scheme? If you stay with a Monochromatic color scheme like the lizard shown above, you may generate a completely different idea than choosing one of these more complex schemes. No matter what you choose, take the time to make sure the message is bright and clear to your audience. Then you will know you’ve learned the Secret to Color. Here are a few examples of Primary Colors used in Design

Primary Colors in Display Windows Design Graphic Design

Primary Colors in Poster Design Graphic Design

Here are a few examples of Primary Colors and Secondary Colors used in Design

Google Logo - Secondary and Primary Colors in Graphic Design

Primary Colors in Graphic Design

Google Logo - Secondary and Primary Colors in Graphic Design

Ebay Logo - Secondary and Primary Colors in Graphic Design

CNBC Logo - Secondary and Primary Colors in Graphic Design

Firefox Logo - Secondary Colors in Graphic Design

Design a Logo - Secondary and Primary Colors in Graphic Design

Design a Logo - Secondary and Primary Colors in Graphic Design

Google Logo - Secondary and Primary Colors in Graphic Design

Don’t forget to read Part I of our color article series How to Choose Colors and Color Schemes … Part II of our color article series … 55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers … Part III of our color article series … Using Color Theory to Create Beautiful Color Combinations … and Part IV of our color article series …  Examples of Great Color Schemes and Color Combinations

[tags]colors in design, graphic design, web design, design, secondary colors, primary colors, tertiary colors, color combinations, combining colors, colours, colour in design, color in graphic design, color usage, colour usage, mixing colors, choosing colors, proper usage of colors, meanings of colors, psychology of colors, color schemes, color scheme, design colors, choosing a color scheme, examples, samples, example color schemes, sample color schemes[/tags]

By Lois Knight - You can also see Lois Knight’s Articles on Freelance Folder

Bookmark and Share

DID YOU LIKE THIS DESIGN POST? IF SO, PLEASE HELP US BY ADDING US AS ONE OF YOUR TECHNORATI FAVORITES AND BY ADDING OUR ARTICLES TO YOUR FAVORITE SOCIAL BOOKMARKING SITES (BELOW)


del.icio.us | Digg it | Furl | ma.gnolia | Netscape | RawSugar | reddit | Simpy | StumbleUpon | Yahoo MyWeb |
Post a Comment or Leave a Trackback

8 Comments

  1. Posted March 20, 2008 at 10:12 am | Permalink

    In this site you can view a lot of HTML named colours, Pantone and the #RGB equivalence

    http://corretge.cat/pgmrtools/pantone.php

  2. Posted April 4, 2008 at 9:17 am | Permalink

    Your article was nice, but It would have helped me (since i am color challenged) to have the pictures. It seems all the images are missing.

  3. jithinponkunnam
    Posted April 17, 2008 at 9:31 am | Permalink

    Hi, Can you please give some ideas about emotional values of colors . Like “pink stands for feminine, red stands for strong ” (some details are already described above.)
    Thank you , Jithin

  4. admin
    Posted April 17, 2008 at 11:31 am | Permalink

    Hi- Here is an article that might help you - http://www.crystal-cure.com/color-meanings.html

  5. shyamraj
    Posted July 9, 2008 at 8:45 am | Permalink

    this site is very helpful for the begginers,i learnt a lot, i want to know more about gaphic and web designing,their future prospects. thankyou.

  6. Posted September 5, 2008 at 11:05 am | Permalink

    You have some very interesting concepts here that quite alot of people will benefit from. The visual examples are also an excellent addition. I hope you dont mind but i added this article to the resources section of this website.Its still under construction at the moment but in the future it will be great exposure for you. The site is at http://www.color-chart.org

  7. shafiq
    Posted June 4, 2009 at 5:33 am | Permalink

    how bout if we use cmyk’s? is there a potential that the website will look more dramatic?

  8. Satyabrata Nayak
    Posted February 15, 2011 at 2:24 am | Permalink

    Thanks for your valuable color schme which helps me more in future. Satyabrata Nayak, Odisha

3 Trackbacks

  1. [...] DESIGN PORTAL How to Choose Color Schemes in Graphic Design and Web Design - Find Out How to Combine Colors [...]

  2. [...] for your layouts and designs. Don’t forget to read Part I of our color article series … How to Choose Colors and Color Schemes  … Part II of our color article series … 55+ Color Tools for Color Palettes, Color [...]

  3. [...] forget to read Part I of our color article series … How to Choose Colors and Color Schemes … Part II of our color article series … 55+ Color Tools for Color Palettes, Color [...]

Post a Comment

You must be logged in to post a comment.

About Us | FAQs | Contact Us | Terms of Use | Privacy Policy

All website design, text, graphics, selection and arrangement thereof, and software are the copyrighted works of Allfreelance, © 2003 - 2014 QuinStreet, Inc.