Colors and backgrounds
1 / 60

Colors and Backgrounds - PowerPoint PPT Presentation

  • Uploaded on

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

PowerPoint Slideshow about 'Colors and Backgrounds' - gabriel-russell

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

Colors and Backgrounds

Learning Web Design: Chapter 13

Beautiful Web Design: Chapter 2

Lesson overview
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
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…

Colors and backgrounds

  • 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

Colors and backgrounds

  • 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

Violet purple

  • 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
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

  • 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
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
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
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
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 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

A monochromatic web site
A Monochromatic Web Site

Analogous scheme
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 web site
Analogous Web Site

Complementary scheme
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.

Triadic color scheme
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

Tetradic 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

Displaying color on the web
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
Bit Depth

1 - bit 2 colors

2 - bits 4 colors

3 -bits 8 colors

4 – bits 16 colors

5 – bits 32 colors

6 – bits 64 colors

7 – bits 128 colors

8 – bits 256 colors

16 – bits 65,536 colors

24 – bits16, 777, 216 colors

(Usually referred to as “millions of colors”)

Color name or number
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
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
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
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
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
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
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
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
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
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

Color palette css code

<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

Background image

  • 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
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

  • 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
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
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 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
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

  • 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
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
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
<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
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
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