Colors in CSS

Like with text manipulation, CSS allows for broad or narrow changes in page colors. A designer may change a color of an element throughout the site or only for an individual element. Colors can be applied to about any element (besides images) which we have examined thus far. Today we address two fundamental means of changing colors within a page:

• The color declaration: Changes the color of the assigned text.
• The background-color declaration: Changes the color that appears behind the element to which it is assigned.

The values used to manipulate colors may be the following:

• Color name: Assign the English language word to the appropriate color. There are only 17 standard color names that are widely recognized by browsers.
  
• Hexadecimal value: Assign the six-digit representation of millions of colors. This is the most commonly employed method of color assignment.
• RGB value: Assigned the levels of our three light-based color sources. Supports colors as widely as hexadecimal values.

Examples of coding color with hexadecimal values:

body {
background-color: #333333;
}

h1 {
color: #ffffff;
background-color: #000000;
}

p {
color: #999999;
}

A conscious decision

Good idea to consider many different schemes when deciding on colors.

• Done with online palettes or Photoshop color picker
• Consider color harmonies and examine their properties -- Do not randomly choose colors, please!
• Highly subjective decision but basic guidelines should be considered.
• The preferred online color scheme generator is here.

Less is more

If unsure about harmony between multiple colors, choose a single color and work with shades of that color.

• More color does not equal better design
• Extreme examples: More color / less color
• This also applies to font choices -- variation should not be extreme: If in doubt use a single font at different weights and sizes

Use white background / black text (or close equivalent)

This ensures easy readability.

• Not an absolute rule but usually integrated
• Readability examples: poor / better / good
• Beyond simply applying a BW contrast, to aid readability limit lines of text to 60 characters or less accomplished with narrow columns made with divisions.

Avoid distraction

The selection of color should not distract the visitor from the content

• Bright colors may cause this, even with black text/white bg
• Great contrast (shimmering effect) will cause this
• From previous example, muting the background

Theme should match content

Audience considerations should be reflected in color and font choices

Children's site may have many colors, a financial site should not

Consider the two-color palette that includes black or white

Limiting your palette limits your potential for color chaos

• Black/white and a primary or secondary color may be mixed to provide contrasting shades
• Examples: red / blue

Border colors should frame content effectively

By relating the border to the background color, content can either be brought out from background or merged with background gradually

Examples: merging with background / standing out from bg

Incorporate dominant photograph with like colors

When designing a site or page around a photso or series of photos, select a color from the photograph for use in the template. Use the PS color picker.

Example: desert page

Account for color blindness

Color blindness affects 1/12 people -- males are more susceptible than females -- and most often affects perception of red and greens (though blues are also affected rarely).

• Consider when designing: reds appear brown
• Check your site at http://colorfilter.wickline.org

 

jour 355

• Assistant Professor Matthew Blake
• Office: Tehama 339
• Office hours: M 10-11 & 4-5;
  T 4-5; Th 11-12.
  Virtual office hours: T & Th 5-6.
• (530) 898-3608
• mdblake@csuchico.edu

weekly schedule

1. Internet & Web / HTML
   Readings: Get books
2. Bits & bytes / HTML / Embedding / Code
   Readings: Briggs ch. 1
3. Images / Exercise 2
   Readings: Briggs ch. 2
4. Exam 1 / CSS Intro / Colors
   Readings: Briggs ch. 3
5. Divisions / Web typography / Photoshop text
   Readings: Briggs ch. 4
6. CSS ID / Project one guide
   Readings: Briggs ch. 5
7. Exam 2 / Uploading / Backgrounds
   Readings: Briggs ch. 6
8. Project one due / Evaluation guide
   Readings: Briggs ch. 7
9. Spring Break
10. Search / Project eval / Online advertising
    Readings: Briggs ch. 8
11. Standards / Audio / Backgrounds
    Readings: Briggs ch. 9
12. Exam 3
    Readings: Briggs ch. 10
13. CSS3 / Usability / Lightbox
    Readings: Briggs ch. 11
14. Project editing
    Readings: TBD
15. Material review / Exam 4
16. Final project
17. Final project due

Matthew Blake    Department of Journalism    CSU-Chico   
mdblake@csuchico.edu    (530) 898-3608