Color

print vs. web 
web : RGB : Red, Green, Blue
additive color : combines light to produce color used on monitors, tvs, digital cameras

print : CMYK : cyan, magenta, yellow, black
subtractive color : combines pigment to produce color; used for printing

color gamut
Color gamut is the range of color that can actually exist any particular device.
If consistent color usage from print to web is important, stay within the range of cmyk

Colors vary from monitor to monitor

color formats:
rgb :  rgb(153,153,153)
hex :  #cc3399
name :  LightGray

rgba :  rgba(153,153,153, 0.2)   – where alpha (a) is opacity

lynda.com

choosing a palete

  1. What colors do you have to include or match? (logo? images?)
  2. Is there a theme to the topic? (nature? corporate?)
  3. Has the client requested colors?

exercise:

Create a color study:

Continue developing your site plan for unit 2. Format your color study similar to pages 9-11 of this pdf.

  1. Show the inspiration for your colors: a logo, an image or object with a color palette, several images used on the site, or something else?
  2. Create five possible color sets. Try at least two of the examples shown on 10 Beautiful Website Colors.
  3. Take the favorite of the five color sets and refine it, creating three main colors with one shade of each for a total of six colors. Convert colors to hex# and list hex#’s on your page.

 

Add color to your unit 2, index.html :

  1. Open your unit 2 index.html. Add a color key to styles.css.
  2. Place all six colors on the page using some for backgrounds and some for type.
  3. Add at least one of your images.
  4. View in a browser and adjust as needed. Do colors need tweaking? Are you able to place different colors of text over different backgrounds using only these six colors with various opacities
  5. It should look something like this: color.html
    *note: I have labeled my file color.html, but yours will be in your index.html. Also – my example is bad color–what not to do. Notice how the gray title doesn’t show up on the dark blue and the green doesn’t show up on white. Making small adjustments now may give you more options later.

resources: