Colors and backgrounds
1 / 60

Colors and Backgrounds - PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Colors and Backgrounds. Learning Web Design: Chapter 13 Beautiful Web Design: Chapter 2. Lesson Overview. Understand basic color theory Learn how to specify color in CSS Understand how to use foreground and background colors Manage link colors with Pseudo-classes

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Colors and Backgrounds

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Colors and Backgrounds

Learning Web Design: Chapter 13

Beautiful Web Design: Chapter 2

Lesson Overview

  • Understand basic color theory

  • Learn how to specify color in CSS

  • Understand how to use foreground and background colors

  • Manage link colors with Pseudo-classes

  • Add and tile background images

  • Intro to External Style Sheets

The Psychology of Colors

  • Color can have an impact on a viewer

  • Color has long been the subject of study for advertisers, print designers and artists

  • How do we feel about the use of one color over another?

  • Consider the following…


  • Blue is the most sedate of all colors

  • Blue is used to represent ice and minty freshness

  • Blue symbolizes heaven and divinity

  • Blue is the color of choice for business suitsand logos


  • Red is the most arrogant, attention grabbing, energetic color

  • Red is often associated with love and passion

  • Advertisers use red to catch our attention:

    • Red tag specials

    • Fast sports cars

    • Lipstick on beautiful women


  • Yellow is a warm, bright and vibrant color

  • Yellow is the color of the sun, and gold

  • Yellow representsgoodness and joy

  • Also represents caution

  • Yellow roses are the symbol of friendship


  • Orange is the marriage of red and yellow

  • Orange is considered happy and lively

  • Orange is used in autumnal landscapes and fire’s flame

  • Orange captures our attention: ex. Signs on roads and highways


  • Green is the color of the natural world, represents freshness and growing things

  • Green represents life and hope

  • Its cool quality sooths, calms, and has healing powers


  • Purple is the most exotic color

  • Purple is represents royalty, and wealth

  • Purple is a deep, mysterious hue,mystical and meditative


  • White represents perfect balance and perfection

  • White symbolizes purity, truth and goodness

  • Good guys wear white

  • White also suggests cleanliness


  • Black is the absence of white light

  • Black is the antithesis of white, bad guys wear black

  • Black represents funerals, death and mourning

  • Black can bring feelings of despair and loneliness

  • Black is mysterious, evil, and intriguing

The Practical Side of Color

  • Knowing that colors affect us emotionally can aid us in choosing how and where to place color on our pages

  • Use the symbolic meanings of colors to add a subtle, deeper meaning for your Web pages

  • Use bright colors to grab attention

  • Use calm colors to encourage the viewer to stay around and relax

The Color Wheel

  • The color wheel is based on the three primary colors ( Red, Yellow and Blue ) placed evenly around a circle

  • The secondarycolors (Green, Orange and Violet) are mixtures of the two primaries they sit between

  • The tertiarycolors fall between each primary and secondary. Between yellow and orange, for example, is yellow orange, between blue and violet is blue violet and so on

More Color Terminology

  • Complimentary colors are opposite each other on the color wheel

  • Saturated colors contain no black, no white and none of their complimentary color

  • Compound colors contain a mixture of the three primaries, for example: the browns, khakis and earth colors

  • Tints are made by adding white to a color

  • Shades are made by adding black

This illustration shows the compound mixtures between red and green, as are tints and shades of the color wheel

Color in terms of HSV

  • In HSV, any color is decomposed along three axes

    • Hue: a pure rainbow color from the color wheel

    • Saturation: the proportion of this pure color vs. colorless gray

    • Value (also called luminance): the overall brightness of the color

Web Site Color Schemes

  • Choosing an aesthetically pleasing set of colors for a Web site may be challenging for non-designers

  • Using what we know about the color wheel, you can use different color combinations or schemes that are harmonious and pleasing to the eye

  • These schemes are used in other disciplines but also have their place in web design

Color Scheme Tools

  • There are several online tools that can help you with choosing a color scheme for a Web site

  • One is Color Scheme Designer:


    • This tool helps you view different schemes and then choose the one you like and transform the information into usable Web format

Monochromatic Scheme

  • Monochromatic color schemes use a single color as the basis of the scheme

  • Differing values of the chosen color can be used to create the feel of different colors

  • Monochromatic color schemes are usually seen as harmonious and peaceful

  • Using a single color creates unity and can help to create or tie things together

Monochromatic Scheme

A Monochromatic Web Site

Analogous Scheme

  • Analogous color combinations use colors that are adjacent on the color wheel

  • A selection of blues and purples, or reds and oranges creates an analogous color scheme

  • Two or more colors can be used in an analogous color scheme however, one color is often used as a dominant color while others are used as accents

Analogous Color Scheme

Analogous Web Site

Complementary Scheme

  • Complementary colors are opposite from each other on the color wheel

  • These contrasting colors are pleasing to the eye

  • This scheme usually combines a warm color and a cool together

  • Probably should not be used in a foreground and background relationship

  • Can be discordant if the colors are not true opposites on the color wheel.

Complementary Scheme

Complementary Web Site

Triadic Color Scheme

  • The three colors in a triadic color scheme are evenly spaced on the color wheel

  • This scheme combines primary or secondary colors together

  • Using highly saturated colors can make your site look amateurish

  • A more subdued value of one or more color can help to create greater subtlety, harmony and readability for your site

Triadic Color Scheme

Tetradic Color Scheme

  • The tetradic scheme combines four colors evenly spaced on the color wheel

  • Can be seen as combining two sets of complementary color schemes

  • May appear too busy if all colors are given equal footing on a Web site

  • Consider choosing one dominant color and use others as accents

Tetradic Color Scheme

Displaying Color on the Web

  • Web color is grouped by its Red, Green, and Blue elements (RGB)

  • Newer monitors use 24 bit color: sometimes called true color

    • 8 bits for Red, 8 bits for Green and 8 bits for Blue

    • Can display millions of colors using this combination

Bit Depth

1 - bit2 colors

2 - bits4 colors

3 -bits 8 colors

4 – bits16 colors

5 – bits32 colors

6 – bits64 colors

7 – bits128 colors

8 – bits 256 colors

16 – bits65,536 colors

24 – bits16, 777, 216 colors

(Usually referred to as “millions of colors”)

Color Name or Number

  • A color can have a name

    • These are names recognized by the browser

    • User-friendly way of giving a color attribute value

    • Ex: “forestgreen”, “aquamarine”, “indianred”

  • A color can have a number

    • Uses a hexadecimal value to represent the RGB color

    • The # symbol designates this as a hexadecimal number to the browser

    • Ex: aqua = “#00FFFF”, darkviolet=“#9400D3”

Web-Safe Colors

  • Choosing only web-safe colors is no longer critical because most monitors can now handle millions of colors

  • A color is web-safe if all pairs of digits are the same

  • Examples:

    • #00CCFF – is web-safe

    • #9400D3- is not web-safe

    • #FFF – shorthand notation for #FFFFFF

    • #FF – even shorter notation for #FFFFFF

Foreground Text Color

  • The color property is used to set the foreground text color

    • Values include: color name or hexadeimal number

  • Setting the text color in the body selector will set the default text foreground color for the entire page or site

    • body { color: black;}

    • body { color: #000000;}

Background Color

  • The background-color property is used to set the background color on any element

    • Values include: color name or hexadecimal number

  • Again, adding the background-color property to the body selector will color the background of the entire page

    • body { background-color: white;}

    • body { background-color: #FFFFFF;}

Anchor Pseudo-Classes in CSS

  • An anchor pseudo-class defines styles for anchor state changes

  • You can determine a pseudo-class style because it contains the : character

  • Links exist in multiple states:

    • a:link – the unvisited state

    • a:visited – the link has been visited

    • a:active – the link is active

    • a:hover – the mouse is hovering over the link

Anchor Pseudo Classes

  • Using CSS you can change the color and appearance of a link in these states

    • Ex. a: link { color: blue;}a: active { color: red; }a: visited { color: green; }a: hover { color: yellow; }

  • Descendent selectors may include a pseudo-class

    • Ex. ol a:link { color: blue;}

Watch Backgrounds and Link Colors

  • Poor choice of background colors and background images can make your text or links unreadable

  • Make sure you have enough contrast between background and foreground

  • Often, increasing font size can make a world of difference

  • Subtle background patterns and colors are best

Creating a Web Color Palette

  • A color scheme may provide you with only three or four colors to work with

  • Shades and tints of the main colors from a scheme that can be used to create a more complex color palette as needed for a Web site

  • Hexadecimal values of colors are needed to translate the color palette to CSS code

  • The Color Scheme tool can aid us in putting together a more complete palette

What Colors are Needed ???

  • The two most important colors for a palette are the text color and the background color

    • These two colors must have enough contrast to make the text readable

  • Heading colors may be an accent color

  • Link, visited link, hover link, and active link colors must be readable on background and differ from text colors

  • Key graphics may echo accent or dominant color

Additional Tool Features

  • The Color Scheme tool can generate an HTML file with embedded CSS that shows the color palette as hexadecimal values

  • A light background with dark text Web page can be viewed

  • A dark background with light text Web page can be viewed

Export Palette as HTML + CSS

HTML Page for TetradicColor Palette

<style type="text/css">

/* Palette color codes */

/* Feel free to copy&paste color codes to your application */

.primary-1 { background-color: #7109AA }

.primary-2 { background-color: #5F2580 }

.primary-3 { background-color: #48036F }

.primary-4 { background-color: #9F3ED5 }

.primary-5 { background-color: #AD66D5 }

.secondary-a-1 { background-color: #CD0074 }

.secondary-a-2 { background-color: #992667 }

.secondary-a-3 { background-color: #85004B }

.secondary-a-4 { background-color: #E6399B }

.secondary-a-5 { background-color: #E667AF }

.secondary-b-1 { background-color: #9FEE00 }

.secondary-b-2 { background-color: #86B32D }

.secondary-b-3 { background-color: #679B00 }

.secondary-b-4 { background-color: #B9F73E }

.secondary-b-5 { background-color: #C9F76F }

.complement-1 { background-color: #FFFF00 }

.complement-2 { background-color: #BFBF30 }

.complement-3 { background-color: #A6A600 }

.complement-4 { background-color: #FFFF40 }

.complement-5 { background-color: #FFFF73 }

Color Palette CSS Code

Tetradic Light Page Example

Tetradic Dark Page Example


  • The HTML background attribute of the <body> tag has been deprecated in favor of the background-image CSS property

  • A background image can be applied to the entire body of the page or any element

  • Use the body selector in a style sheet to set the background-image for a page

  • Examples:

    • body {background-image: url (path/filename);}

    • body { background-image: url (Images/chart.jpg) ;}

Background-Repeat in CSS

  • A background image will automatically try to cover the entire browser window

  • If it is a small image, it will repeat or tile to cover the window

    • This repeating is called tiling

  • The background-repeat property can help you to control the tiling of an image

Background-Repeat Values

  • background-repeat values include:

    • background-repeat: repeat-x; will tile an image in the horizontal direction

    • background-repeat: repeat-y; will tile an image in a vertical direction

    • background-repeat: no-repeat;will not tile an image, it will only appear once

    • background-repeat: repeat; will tile the image in both directions, this is the default

To Tile or Not Tile ???

  • If your background image is smaller than the dimensions of the browser window, it will tile by default

  • Creating a small seamless image to tile is not easy

  • Advantage:A small tiled image will load very fast!

  • Disadvantage:While the texture may look perfect with the page heading or navigation bar, it may make text in the body area unreadable

  • A better solution might be to incorporate the same texture right into the graphics where it is needed, or use a non-tiling background

Non-Tiling Backgrounds

  • Expanding the background image in both dimensions creates a background which is not subject to tiling

  • This technique, used by many professionally designed pages, gives the most creative control over layout

  • A non-tiling image must be large (at least 1200 pixels wide; its necessary height should be determined by the contents of the page) 

  • To keep file sizes down, only GIFs with few colors or JPEGs with high compression levels should be used

  • The loss of quality in highly compressed JPEGs is less noticeable if the image has low level of contrast, or is artificially faded or blurred. 

Background Image Warnings

  • Background images can make the page hard to read

  • Use a background image like a light watermark and it will be more readable

  • Once the image is cached, subsequent pages can be displayed without incurring a loading time penalty

  • Always provide a background-color in case the background-image is not available

Background Attachment

  • The background-attachment property can be used to determine if the image scrolls with the document or stays fixed as content scrolls

    • Values include: scoll, fixed

  • This property is not supported by IE6 and earlier browsers

  • Examples:

    • body { background-attachment: fixed;}

    • body { background-attachment: scroll;}

External Style Sheets

  • External style sheets keep style rules as a separate file

  • Allows use of many style rules with a single file

  • Modifications to style sheet file will change all the associated pages

  • Uses the .css file extension

Example External Style Sheet


body { background-image: url(Images/back.jpg); font-family: Verdana, Arial, sans-serif; font-size: medium;

color: navy;


h1, h2, h3 { color: blue; line-height: 125%;


a:link { color: brown;}a:visited { color: red; }

a:hover { color: orange;}a:active { color: yellow; }

.bigger { font-size: large; }.imageleft { float: left; padding-right: 10px;


Attaching an External Sheet

  • Like an HTML page, a style sheet is just an ASCII text file

  • Usually this file is placed in your site folder

  • Attach the style sheet by using the <link> tag in your page header

<link> tag

  • Example:<link rel=“stylesheet” href=“mystyles.css” type=“text/css” />

  • This creates a persistent style that is applied to your page regardless of the user’s local selections

  • The name of the styles heet linked in this case is: mystyles.css

More on External CSS Later

  • We will concentrate more on creating and using external style sheets in Chapters 14, 15, and 16

  • Microsoft’s Expression Web environment makes creating and managing external CSS a breeze

  • Read Project instructions carefully to see when to use external CSS and when to use embedded CSS

Lesson Summary

  • Color schemes are based on combinations of colors related to their placement on the color wheel

  • RGB color is specified with color names and hexadecimal numbers

  • Link Pseudo-classes can be used to set link colors for different link states

  • Background images can be repeated or not repeated, fixed or scrolled

  • A color palette for a Web site maps colors to elements on a Web page

  • Login