Pam Van Londen, Corvallis Artist, Oregon Artist. Creating Every Day…paintings, web sites, and courses Oregon daily painter, murals and portraits. Corvallis Web Designer / Web Developer. Original abstract landscape oil paintings

Choosing a Color Scheme

Posted in Design and Production 2 years, 11 months ago at 4:51 pm

Objectives

At the end of this lesson, students will be able to:

  1. Create a color scheme using an online generator.
  2. Create a colors scheme using Adobe Photoshop, Dreamweaver, or Illustrator.

Requirements

  1. To complete objective 1, students will need access to one of the following applications: Adobe Photoshop, Dreamweaver, or Illustrator, along with basic knowledge of the editing tools.
  2. To complete objective 2, students will need access to the internet with FireFox, Internet Explorer, Safari, or other browser.

Further Reading

Color Theory
WebReference. Web Graphics for Non-Designers, Chapter 2. Using Color.
A Starting Place for Your Scheme
WebReference. Web Graphics for Non-Designers, Chapter 2. Using Color.
Good Color Practice
WebReference. Web Graphics for Non-Designers, Chapter 2. Using Color.

Introduction

Really cool RV with shingles for rent at American RVOver many years, I have taught various workshops and college courses about web development, using a variety of online materials. Some clients and students have a great sense of color combinations and others do not. Many people have not had adequate experience learning about and using color in their education, work, or home life, and consequently do not have the language or skills to create a pertinent scheme for their web projects. In addition, other problems can interfere with perception of a colors scheme: color blindness, personal perception, cultural norms, and computer display differences. The two methods I teach have helped many students find successful color schemes for their web site designs. View a list of sites (scroll down to see screenshots) students have built in my classes. A varity of methods was used to choose the color schemes.

Color Jack color scheme generatorMethod 1: Color Scheme Generators

Online color scheme generators are easier to understand than the second method (see below). The color choices are dynamic, immediate, and organized in a way that speeds up the process. The color output table lends itself to copying into a site styleguide for easy reference.

  1. Choose one of the following tools to find at least 3 colors that work well together.
  2. Save examples of dark, medium, and light versions of the same hue for use in your web site.
    • Write down or copy and paste the hexidecimal or RGB numbers into into a text file, style sheet, or web site table.
Kuler.Adobe.com
Color Scheme generator. Requires updated Flash player plugin.
Color Jack
Color Scheme Generator. Includes color blind views and schemes.
Color Scheme Generator
Wellstyled.com Tools. Includes a helpful way to view color schemes as the color blind do.
Site Pro Central Color Code Tool
Easy sliders, menus, and layout.
Dreamweaver’s Color Scheme generator
Command->Set Color Scheme
Color Palette Generator
Uses your uploaded photo to choose related colors.

Method 2: Pick colors from a photograph or illustration

Photoshop's Color Picker is used to find a color in a photo.

Color Scheme
#333366 #6699CC #B8DEEB
#996633 #CC9966 #FFFFCC

Perhaps you have a color logo but no requirements to stick to specific colors. Consider finding the color scheme from supporting materials such as a photo or illustration. Click the screenshot at the left to view a larger image.

  1. Choose a photograph or illustration that appeals to your audience.
    • Digitize the image if it isn’t already a file.
      • Be sure you adhere to copyright laws and cite the artist properly in your web site.
    • Add the digital file to a Dreamweaver or Photoshop document.
  2. Click the Color Picker box to reveal the Color Picker screen (A).
  3. Pick the two most common colors represented in the image.
    • Use the eyedropper tool to click on the colors (B).
    • Copy the hexadecimal color values found by the eyedropper too (C)l.
    • Paste the color values into an .html table, text file, or style sheet.
  4. Use the color sliders to choose lighter and darker values of the colors for use in backgrounds, highlights, rollover hovers, navigation sets, etc.
    • Add them to the table.