Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Web Design Basics : Color Theory Last Updated: Apr 15th, 2008 - 18:38:37


The Basics of Colors
Author: MickM.com
Authors Website: www.mickm.com
Jun 13, 2006, 20:17

Email this article
 Printer friendly page

Learn everything about the basics of colors and use of colors!

Step 1

In the image below, you can see the color circle of Itten, a famous artist. This colorcircle shows perfectly how everything is set. In the middle you see a triangle with 3 colors. Those are the base-colors. Also called the primary colors. These colors cannot be created by mixing colors together. As you can see outside the triangle, there are smaller triangles holding on to 2 of the 3 primary colors. Those are called the Secondary Colors. As you can see, when you mix blue and yellow, you get green, etc. The outer ring is just filled with different variations of the colors you mixed. As you can see, all the colors in the outer ring "flow" into each other!


Step 2

When you design a logo or a website, you can't just use 1 color. You WILL have to use multiple colors. Of course that is all up to you, but there are certain contrasts you need to know of in order to achieve the desired emotion for the viewer. Below you can see 6 contrasts of each 2 colors. The first 3 contrasts are complimentary. That means the colors are the opposite of each other. If you look at the color circle, you can see that the opposite of yellow is purple, the opposite of green is red, etc... These combinations are used very often. Red-Green with christmas and Yellow-Purple for certain text in Nex-Games, for example.

Below the 3 contrasts, is the 4th contrast, which is a warm-cold-contrast. Warm colors like orange and read, featuring cold colors like blue, gray and white. These also work very nice! And at the bottom, you can see 2 examples of the Light-Dark-Contrast where you just take lighter and/or darker colors of a specific color in a layout. That way you can still use 1 desired color in a layout, yet you make it more playful!

Step 3

Below you can see how many difference black and white can make on gradients. Below you can see I used my favorite color green 2 times, YET, I added a white color on the top image and I added a black color on the bottom image. You can see the entire gradient changes. Therefore, choose your gradient wisely my padawan! That's all for now. I hope you learned something. I'm not gonna go even deeper into the basic, because I figured you had to learn that in Kindergarten!




Top of Page

 
Level Ten Hosting