ISTA 230

ISTA 230 - Introduction to Web Design

Color Theory

CSS

CSS

CSS Colors

color: red;
background-color: blue;

17 valid color keywords

CSS

CSS

CSS Color Keywords

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
orange
purple
red
silver
teal
white
yellow

While these colors provide an element of simplicity and familiarity, we need to be able to specify more colors than these if we want to develop interesting and unique designs.

CSS

CSS

Light and Color

When a pure white light is shown through a prism, it will refract the light in such a way that we can see the individual wavelengths of the light, each of which is perceived by humans as a different color. The colors within this visible spectrum are red, orange, yellow, green, blue, indigo, and violet (ROYGBIV).

Light through a prism

When light enters the human eye, our brains interpret the light based on the wavelengths present and from that determine color. When all of the visible wavelengths (i.e., colors) are present, we see the color white (all of the colors combined). If none of them are present, then we see black (i.e., no color).

When light reflects off of an object, not all of the wavelengths are necessarily reflected. In most cases, some or all of the wavelengths may be absorbed by the object. If the object is transparent, others might simply pass through it. Those that remain are reflected to our eye and we observe the object as having a specific color based on the wavelengths of light transmitted through our eyes to our brains.

Light reflecting off of an orange

CSS

CSS

Color Systems

CSS

CSS

Light and Color

Light reflecting off of an orange

CSS

CSS

Light and Color

Light generated by a monitor

CSS

CSS

Color Systems

Based on our understanding of color and light, there are two ways we can think about colors:

Additive Color System
Additive colors are made by mixing varying amounts of colored light. This is the system used to create colors on TV screens and digital displays (e.g., computer monitors, mobile devices). Additive color systems start with no light (i.e., darkness) and then add various wavelengths of light, producing a range of colors. For mediums using addtive color, it is helpful to remember that they produce light rather than just reflecting light from the environment.
Subtractive Color System
Conversely, subtractive color systems are based on things that reflect light (rather than produce it). If the surface reflects all wavelengths of light, then the object will look white. However, if only some of the wavelengths of light are reflected, then the object will appear to be whatever color is made from the remaining wavelengths. Subtractive colors are made by mixing varying amounts of pigments or dyes that absorb specific wavelengths of light. For example, to create red paint, a painter would start with a white base and then mix in pigments and dyes that absorb all but the red wavelength (roughly 620–740 nanometers).

Below is a sample of how these color systems can be visualized:

Additive vs. Subtractive Color Systems

For our purposes, we will be focusing solely on the additive color system.

CSS

CSS

Color Theory

In the additive color system, there are three colors that cannot be created by combining other colors. These are known as primary colors.

All colors used in CSS are composed of varying amounts of each of these three colors.

It's worth noting that the subtractive color system typically uses red, blue, and yellow for primary colors. While this isn't pertinent to this class, it may clear up any confusion you might have between what we're using in this course versus what your elementary school teachers taught you.

CSS

CSS

Color Theory

Color Wheel

Using the three primary colors, we can create additional colors.

CSS

CSS

Color Theory

Color Wheel

Colors created using equal amounts of two of the other primary colors are called secondary colors.

CSS

CSS

Color Theory

Color Wheel

Similarly, we can create 'tertiary' colors by mixing primary colors with secondary colors.

CSS

CSS

Color Theory

Continuing in this fashion, we can create a full color wheel, made up of over 16,000,000 colors that we can choose from.

Color Wheel

CSS

CSS

Color Theory

White light

The color white is created by adding equal amounts of all three of the primary colors at full strength.

CSS

CSS

Color Theory

Black light

Conversely, the color black is created by removing any trace of the three primary colors (i.e., no color at all).

CSS

CSS

CSS Colors

CSS

CSS

CSS Colors

a
{
   color: red;
} 
a
{
   color: rgb( red_value, green_value, blue_value);
} 

CSS

CSS

CSS Colors

a
{
   color: red;
} 

Rather than using the keyword 'red', we can specify the specific amounts of each primary color that we want to be used to create the color.

a
{
   color: rgb(  255  ,  0  ,  0  );
} 

CSS

CSS

CSS Colors

a
{
   color: yellow;
} 

Since we know that yellow is a secondary color that is created by mixing equal amounts of red and green light, we can use the following:

a
{
   color: rgb(  255  ,  255  ,  0  );
} 

CSS

CSS

CSS Colors

a
{
   color: rgb(  0  ,  0  ,  0  );
} 
a
{
   color: black;
} 

CSS

CSS

CSS Colors

a
{
   color: rgb(  255  ,  255  ,  255  );
} 
a
{
   color: white;
} 

CSS

CSS

CSS Colors - Hexidecimal Values

Another option for specifying color values is to use the hexidecimal value for the three primary colors. Hexidecimal is a base 16 numbering system, which is different than the base 10 system that we're more familiar with.

CSS

CSS

CSS Colors - Hexidecimal Values

It is important that you understand how a hexidecimal value relates to its decimal counterpart. For example:

CSS

CSS

CSS Colors - Hexidecimal Values

CSS

CSS

CSS Colors - Hexidecimal Values

CSS

CSS

CSS Colors - Hexidecimal Values

a
{
   color: rgb( red_value, green_value, blue_value);
} 

Instead of specifying comma-separated values for red, green, and blue, we can use a '#' followed by the hexidecimal values for each of the colors.

a
{
   color: #RRGGBB;
} 

CSS

CSS

CSS Colors - Hexidecimal Values

a
{
   color: red;
} 
a
{
   color: rgb(  255  ,  0  ,  0  );
} 
a
{
   color: #ff0000;
} 

The three examples above all have the same exact effect on the font color.

CSS

CSS

CSS Colors - Hexidecimal Values

a
{
   color: yellow;
} 
a
{
   color: rgb(  255  ,  255  ,  0  );
} 
a
{
   color: #ffff00;
} 

CSS

CSS

CSS Colors - Hexidecimal Values

a
{
   color: #ffffff;
} 
a
{
   color: white;
}

CSS

CSS

CSS Colors - Hexidecimal Values

a
{
   color: #000000;
} 
a
{
   color: black;
}

CSS

CSS

CSS Colors - Hexidecimal Shorthand

Hexidecimal values can be abbreviated if each of the RGB hex pairs are the same

a
{
   color: #ffcc00;
} 

For example, the color value above is made up of two 'f's for the red value, two 'c's for the green value, and two '0's for the blue value. This can be abbreviated as:

a
{
   color: #fc0;
}

CSS

CSS

CSS Colors - Hexidecimal Shorthand

This ability to abbreviate often makes specific color schemes easier to remember. It also requires less typing, which is never a bad thing.

a
{
   color: #a00; /* Wildcat Red */
} 
a
{
   color: #036; /* Wildcat Blue */
}

CSS

CSS

Before moving forward, we'll explore a few definitions to ensure a shared understanding of some common terms.

Hues

Color Wheel

CSS

CSS

Tint

Color Wheel

CSS

CSS

Tint

To create a tint using CSS hexidecimal values, we simply add equal amounts of the primary colors. For example, each of the following hexidecimal values create lighter tints of red, starting with the full hue and moving towards solid white.

         #ff0000 /* Red */
         #ff3333
         #ff6666
         #ff9999
         #ffcccc
         #ffffff /* White */
      
#ff0000
#ff3333
#ff6666
#ff9999
#ffcccc
#ffffff

CSS

CSS

Shade

Color Wheel

CSS

CSS

Shade

To create a shade using CSS hexidecimal values, we simply remove equal amounts of the primary colors. For example, each of the following hexidecimal values create darker shades of red, starting with the full hue and moving towards solid black.

         #ff0000 /* Red */
         #cc0000
         #990000
         #660000
         #330000
         #000000 /* Black */
      
#ff0000
#cc0000
#990000
#660000
#330000
#000000

CSS

CSS

Just because you can...

CSS

CSS

...doesn't mean you should!

Horrible use of colors

CSS

CSS

Color

Color is one of the most powerful tools in a web designer's tool box. As with any tool, it can be used to create beautiful pieces of art when used by a skilled developer. Conversely, when in the hands of someone who doesn't know what they're doing, it can easily be misused and ruin a project.

CSS

CSS

Color

CSS

CSS

Color Theory

CSS

CSS

Color Theory

By drawing a horizontal line across the color wheel, we can divide the colors into 'warm' and 'cool' colors. While the placement of this line is somewhat open for debate, the division used below is commonly accepted as a good spot.

Cool vs. Warm Colors

CSS

CSS

Color Theory

Warm Colors

CSS

CSS

Color Theory

Cool Colors

CSS

CSS

Red

~ I am my beloved's, and my beloved is mine. ~

CSS

CSS

Red

Chemical spill on the 3rd floor - Please avoid the area

CSS

CSS

Red

Red is a powerful color. It can be used to communicate both positive and negative messages. Red is just as much associated with Cupid as it is with the devil.

Common words/emotions/actions associated with red are:

CSS

CSS

Red

CSS

CSS

Yellow

Fresh lemonade!

CSS

CSS

Yellow

Construction ahead!

CSS

CSS

Yellow

Like red, yellow can be a powerful color. It can be used to communicate both positive and potentially negative messages.

Common words/emotions/actions associated with yellow are:

CSS

CSS

Yellow

CSS

CSS

Shades/Tones of Yellow

Yellow
+
Black
=
...

CSS

CSS

Orange

CSS

CSS

Orange

Orange, created from a mix of red and yellow, is a great option when you want a strong impact (like red), but with a little more subtlety.

Common words/emotions/actions associated with orange are:

CSS

CSS

Orange

CSS

CSS

Orange

CSS

CSS

Black

CSS

CSS

Black

While technically a lack of color, black can be used to communicate lots of things and is a very handy color when properly used alongside other hues.

Common words/emotions/actions associated with black are:

CSS

CSS

Black

CSS

CSS

Green

Our company is going green!

CSS

CSS

Green

John is not feeling well today...

CSS

CSS

Green

Green is on the edge of the divide between 'warm' and 'cool' colors. Because of this, it is very versatile and can invoke lots of varying emotions depending on its tint/shade and colors it is used with.

Common words/emotions/actions associated with green are:

CSS

CSS

Green

CSS

CSS

Blue

Providing financial well-being for over 100 years.

CSS

CSS

Blue

Keeping your whites white and your colors bright!

CSS

CSS

Blue

Relax.

Blue is a powerful color and is worth exploring at a more granular level.

CSS

CSS

Dark Blue

Common words/emotions/actions associated with darker shades of blue are:

CSS

CSS

Bright Blue

Common words/emotions/actions associated with pure blue hues are:

CSS

CSS

Light Blue

Common words/emotions/actions associated with lighter blue tints are:

CSS

CSS

Blue

CSS

CSS

Purple

CSS

CSS

Purple

Purple is a powerful color that can draw in some users and alienate others. Because of this, it is best used with other colors.

Common words/emotions/actions associated with purple are:

CSS

CSS

Purple

CSS

CSS

White

CSS

CSS

White

White is one of the most useful colors at our disposal. It blends well with almost any other color and can provide excellent contrast in most cases. Because it doesn't draw the eye as much as other colors, it is usually not recognized as impacting the meaning of a given color scheme. That said, it's still worth noting some common associations for the color.

Common words/emotions/actions associated with white are:

CSS

CSS

White

CSS

CSS

Color and Culture

CSS

CSS

Color Mixing

"There are no bad colors. Only bad combinations."

CSS

CSS

Color Schemes

The following color schemes are a convenient approach to selecting colors to use in your website designs. Color schemes:

CSS

CSS

Color Schemes - Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

CSS

CSS

Color Schemes - Monochromatic Scheme

Monochromatic Website Design

CSS

CSS

Color Schemes - Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

CSS

CSS

Color Schemes - Analogous Scheme

Analogous Website Design

CSS

CSS

Color Schemes - Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

CSS

CSS

Color Schemes - Complement Scheme

Complement Website Design

CSS

CSS

Color Schemes - Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

CSS

CSS

Color Schemes - Split Complement Scheme

Split Complement Website Design

CSS

CSS

Color Schemes - Triad Scheme

CSS

CSS

Color Schemes - Triad Scheme

Triad Scheme

CSS

CSS

Color Schemes - Triad Scheme

CSS

CSS

Color Schemes - Triad Scheme

Triad Website Design

CSS

CSS

Color Schemes - Don't reinvent the wheel

Working with a color wheel, determining color values, etc. can be daunting work to do by hand. Fortunately, there are a number of color scheme generators that use the principles described above. One example is:

http://www.colorsontheweb.com/colorwizard.asp

While most tools will provide you with some convenience when developing color schemes for your designs, you are still expected to use your best judgment when it comes to picking colors.