DF2254 Fundamentals of Web Design :: Art Institute

Week 6: Web Color

Unhappy with Your Grade?

I have two ways you can bump up your grade if it is sagging.

"Get Out of Zero, Free" Card

get out of zero, free card

I'm issuing a new amnesty program for single assignments which received a zero. Here are the rules:

  • Resubmit an assignment to the correct basket in the eCompanion. It must meet the following requirements:
    • An assignment which is already late is turned in by midnight of our Week 7 class.
    • A future assignment which is late must be in no later than a week after the due date.
  • Put the text "Get out of zero free" in the comment box, so I know to give you credit.
  • You can use this virtual card once per course only, and only for a single assignment.
  • This can be applied toward assignments/projects but not attendance.
  • Absolutely NO work will be accepted after the final minute of the final class session.

Redos

Here's a reminder from the syllabus:

On-time projects may be redone with instructor approval.

Hardly anybody takes advantage of this, but it's a great deal. If you turned in work on time and reasonably complete—but received less than full credit—come talk to me to arrange a redo.

The Traditional Color Wheel

The traditional color wheel is used for paints and other pigments.

traditional color wheel

Primary colors in the traditional color wheel:

red

      

blue

      

yellow

      

Secondary colors: two primaries mixed together

orange

      

(red and yellow mixed)

violet

      

(blue and red mixed)

green

      

(yellow and blue mixed)

Tertiary colors: a primary plus a neighboring secondary

yellow-orange

      

red-orange

      

red-violet

      

blue-violet

 

blue-green

 

yellow-green

 

Complementary Colors

Complementary colors are two colors which sit opposite each other on the color wheel.

      

blue & orange

      
      

yellow & violet

      
      

red & green

      
 

blue-green & red-orange

      
      

yellow-orange & blue-violet

 
      

red-violet & yellow-green

 

The RGB/Photoshop Color Wheel

The RGB/Photoshop color wheel is based on the way colors are mixed in light, and therefore on a monitor screen.

Photoshop color wheel

Primary colors in RGB:

red

      

green

      

blue

      

Secondary colors (CMY):

cyan

      

(green and blue mixed)

magenta

      

(blue and red mixed)

yellow

      

(green and red mixed)

RGB Values

Click for a larger image:

RGB Color Wheel

CMYK and RGB: Subtractive vs. Additive Color Models

CMYK stands for Cyan, Magenta, Yellow and Key color (which is black). CMYK is the color model used for printing presses. It is based on the chemistry of mixing translucent printing inks rather than paint. It is called subtractive because if you mix the three primary colors (cyan, magenta and yellow) together, you get black (in theory; in reality you need to added pure black ink to get real black.)

RGB stands for Red, Green, Blue. It is based on the way the light mixes on a computer screen. It is called an additive color model because if you add the three primaries (red, green and blue) together, you get pure white light.

CMYK   and RGB

Color Schemes

The following color schemes are based on the traditional color wheel, although the color is "mixed" in RGB.

Complementary Colors

Complementary colors are often used together in a composition to create excitement. Each color in the pair makes the other seem more vibrant.

blue & orange

    
    

yellow & violet

    
    

red & green

    
    

Analogous Colors

Analogous colors are those which sit next to each other on the color wheel.

red, red-orange & orange

    
    

yellow-orange, yellow & yellow-green

    
    

green, blue-green & blue

    
    

blue-violet, violet & red-violet

    
    

Tints, Shades & Neutrals

Tints, shades and neutrals are those colors which are not pure and vivid. They are created in different ways.

Tints

A tint is a color in which white has been added to a pure color. The more white, the lighter the tint. Tints are otherwise known as pastels.

 

Yellow

Orange

Red

Violet

Blue

Green

Pure color

 

 

 

 

 

 

Slightly tinted (a little white added)

 

 

 

 

 

 

Heavily tinted (a lot of white added)

 

 

 

 

 

 

Shades

A shade is a color in which black has been added to a pure color. The more black, the darker the tint.

 

Yellow

Orange

Red

Violet

Blue

Green

Pure color

 

 

 

 

 

 

Slightly shaded (a little black added)

 

 

 

 

 

 

Heavily shaded (a lot of black added)

 

 

 

 

 

 

Neutrals

A neutral is the combination of complementary colors, and these combinations tend to be brownish. Grays are also considered to be neutrals.

Color Temperature

Warm Colors Cool Colors

Red   ColorOrange ColorYellow Color

Green ColorBlue   ColorPurple Color

Red, orange and yellow are warm and visually tend to jump forward into prominence in a piece of design.

The cooler hues — green, blue, and purple — tend to recede in a design.

Emotional and Cultural Meanings of Color

Red

Red   Color passion, anger, stop, battle, love, blood

Orange

Orange Color creativity, invigoration, unique, energy

Yellow

Yellow Color joy, intellect, caution, cowardice, youth

Green

Green Color fertility, money, healing, success, growth

Blue

Blue   Color knowledge, tranquility, calm, peace, cool

Purple

Purple Color royalty, wisdom, spirituality, imagination

White

White Color perfection, purity, wedding, clean, virtue, death

Black

Black Color fear, negativity, death, evil, secrecy, power, elegance, wealth

Hexadecimal Color

How Hexadecimal Is Calculated

  • subdivided pixelspixels are subdivided into 3 vertical parts: one for red, one for green, and one for blue
  • the pixel's "color" is created by the varying amounts of light coming out of those 3 sub-pixels
  • we typically count in "base-10"
  • to understand hexadecimal, we start with binary code
  • binary ("base-2") describes whether an electrical connection is "on" (1) or "off" (0)
  • a bit is a single record of "on" or "off" (that is, a single digit)
  • one byte equals 8 bits
  • each half-byte has 16 possibilities (24)
  • a complete byte = 162 = 256 possibilities
  • 256 possible values each for red, green and blue
  • color can be described using RBG notation, like this for white: rbg(255, 255, 255)
  • hexadecimal ("base-16") counting starts at 0, switches to letters after 9, and stops at f
  • this gives us 16 possible values for a single digit
  • each digit represents one half-byte of information
  • each pair represents a byte (or 8 bits): the first 2 characters are red, next 2 for green, last 2 for blue
  • this explains the term "8 bits per channel"
  • lowest value (00) means no color value at all, or black
  • highest value (ff) means full brightness (pure color or white)
  • 2563 = 16,777,216 possible color values
  • color can therefore also be described using hex notation, like this for white: #ffffff
  • how hexadecimal color shorthand works (shortening 6 digits to only 3)

Hexadecimal Color Wheel

Click for a larger image:

Hexadecimal Color Wheel

The color wheel above shows three primary colors (red, green and blue) and three secondary colors (yellow, cyan and magenta). This color mode is just like in the RGB Color Wheel, but the colors here are identified with a different code – hexadecimal. The hexadecimal code always starts with a pound (#) sign in CSS coding. You will also find a field for hexadecimal values in the Color Pickers for Photoshop and Illustrator.

Color Picker

 

The Rules of Hexadecimal Color

There are three important things to remember about hexadecimal color:

  1. In decimal (“base ten”) counting, each digit can be any number from 0 to 9, or ten possibilities. That’s how we normally count, of course. In hexadecimal (“base sixteen”) counting, each digit can be any number from 0 to 9 -OR- any letter from A to F. That gives us sixteen possibilities. You would count in this order, from lowest to highest: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
    Base Ten vs. Base Sixteen

    Base Ten vs. Base Sixteen

  2. In decimal counting, two digits side-by-side can give you 100 possibilities (0 to 99). That’s ten for the first digit times ten for the second digit. In hexadecimal, you get 16 times 16, which gives you 256 possibilities. That’s convenient, since there are 256 possible values for red in RGB, 256 for green, and 256 for blue.
    Double-Digit Hexadecimal

    Double-Digit Hexadecimal

  3. The first two digits in hexadecimal tell you the red values. The second pair tell you the green values, and the last pair tell you the blue values. 256 for Red x 256 for Green x 256 for Blue equals just under 16.8 million.
    Combining Red, Green and Blue

    Combining Red, Green and Blue

High-Saturation Hues in Hex

The higher the number in the first pair of a hexadecimal number, the more that red is contributing to the color. Ditto for green in the second pair, and blue in the third pair. Alternatively, a lower number means a color is contributing less.

           
#ff0000 pure red #ffff00 yellow: pure red plus pure green #00ff00 pure green #00ffff cyan: pure green plus pure blue #0000ff pure blue #ff00ff magenta: pure blue plus pure red

Tints of White in Hex

Pure white is indicated by the highest hexadecimal value there is: #ffffff. The background behind this text is #ffffff. You can get softer whites by decreasing the values of red, green, and especially blue.

               
#eeffff #efffff #ffefff #ffeeff #ffffef #ffffee #ffffde #ffffdd

Notice that if you reduce just the red values, the color gets more cyan. If you reduce just the green values, the color gets more magenta. And if you reduce just the blue values, the color gets more yellow.

Shades of Black and Gray in Hex

Pure black is indicated by the lowest hexadecimal value there is: #000000. This text is #000000. You can get softer blacks and grays by increasing the values of red, green, and blue.

           
#440000 #004400 #000044 #444444 #999999 #cccccc

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Muted Colors in Hex

Muted colors are less saturated (vivid) and more natural. You get these in hexadecimal by adding a touch of two other two primaries to your main primary color, and reducing the value for that main primary.

           
#ff0000 red #ffff00 yellow #00ff00 green #00ffff cyan #0000ff blue #ff00ff magenta
           
#cc3333 muted red #cccc33 muted yellow #99cc99 muted green #339999 muted cyan #6666cc muted blue #993399 muted magenta

Notice that if you increase just the red values, the color gets more red. If you increase just the green values, the color gets more green. And if you increase just the blue values, the color gets more blue. Adding equal amounts of red, green and blue results in a gray; the higher the number, the lighter the gray.

Shades of Brown in Hex

Browns tend to be versions of muted orange. Try mixing middle values of red and green (more red than green,) and leaving blue as 00.

     
#996600 #663300 #683500

Using CSS for Color Presentation

CSS1+ Color

Text

#box {color: #57BAA8;}

Backgrounds

#box {background-color: #57BAA8;}

Borders

#box {border: solid 1px #57BAA8;}

CSS3 Color

CSS3 Generator

Text Shadow

#box {text-shadow: 2px 2px 2px #57BAA8;}

Box Shadow

#box {-moz-box-shadow: 2px 2px 4px #57BAA8;
-webkit-box-shadow: 2px 2px 4px #57BAA8;
box-shadow: 2px 2px 4px #57BAA8;}

Color Transparency

#box {background-color: rgba(87, 186, 168, .7)}

#box {color: rgba(87, 186, 168, .7)}

#box {border: solid 10px rgba(87, 186, 168, .7)}

Color-Finding Resources

  1. Photoshop color picker
  2. Dreamweaver color picker (a poor choice because it it hard to use)
  3. Colorzilla - a Firefox browser plugin which allows you to "eyedrop" any color in your browser window; it will retunr both the RGB and hexadecimal color formulas
  4. ColorPicker.com - online color picker similar to Photoshop's
  5. HTML Color Names
  6. COLOURLovers - find an harmonious color palette, pattern, or single color

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
6 Color Project color-project.zip

Assignment Details

Color Project

Basic Requirements

Create a web page and external CSS file together in a site folder named color-project.

Select a color palette from COLOURlovers. It must be from this site, although you are allowed to create your own palette there and name it, if you wish.

Create a color scheme on your page which is faithful to your color palette (you can also add black and white.) You MUST use all five colors in your CSS and they must be apparent on the page.

Some items which you can control the color for within the CSS:

  • body background and/or color (text color)
  • h1 background and/or color
  • a:link color (as well as a:visited, a:hover and/or a:active)
  • a div with an id applied: background, color, and/or borders (remember that id names begin with a pound sign (#) in the CSS rule.)
  • img border
  • CSS3 applications of: text-shadow, box-shadow, and RGBa (see bottom of left-hand column)
  • etc.
CSS Cheat Sheet

Some basic CSS applications of color. Use these as reminders of how to develop the color for your page in CSS (change the color values, of course.) These are just some reminders!-don't simply copy and paste what you see here:

body {
background-image: url(images/background.jpg); /* background image for the whole body */
}

#wrapper {
background-color: #fff; /* background color for the wrapper div */
border: solid 1px #ccc; /* border color for the wrapper div */
}

a:link { color: #00f; } /* an unvisited link */
a:visited { color: #f0f; } /* a visited link */
a:hover { color: #0f0; } /* hovering over a link */
a:active { color: #f00; } /* link color just after being clicked */

h1 {
color: #999; /* text color for all h1 elements */
}

Text

For text content, you might find a topic page from Wikipedia.

Alternately, you may use "greeking" text from Lipsum.com.

At the bottom of your page, add a paragraph which identifies the name of the color palette you selected from COLOUR lovers.com.

Image

Add at least one image to your page. Try to find an image that corresponds with your color palette. For example, in Google Images, you can narrow your image search by color:

  1. Enter your search term and click Search.
  2. An options panel appears on the left. Click on one of the colors shown on the bottom of the options panel. Google will narrow your search to images which predominantly feature the color you clicked.

Student Work