colors and backgrounds learning web design: chapter 13 beautiful web design: chapter 2

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

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

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

Green

Violet/Purple Purple is the most exotic color Purple is represents royalty, and

wealth Purple is a deep, mysterious hue,

mystical and meditative

White

White represents perfect balance and perfection

White symbolizes purity, truth and goodness

Good guys wear white White also suggests

cleanliness

Black 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 secondary colors (Green, Orange and Violet) are mixtures of the two primaries they sit between

The tertiary colors 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: http://colorschemedesigner.com/ This tool helps you view different

schemes and then choose the one you like and transform the information into usable Web format

http://colorschemedesigner.com/

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

http://newark1.com/chocolate/index.htm

http://newark1.com/chocolate/index.htm

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

http://www.regines.new.au/

http://www.regines.new.au/

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 Depth1 - bit 2 colors

2 - bits 4 colors

3 -bits 8 colors

4 – bits 16 colors





16 – bits 65,536 colors

24 – bits 16, 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

Tetradic Light Page Example

Tetradic Dark Page Example

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

Background-Repeat Values

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 Background Image WarningsWarnings

Background images can make the page Background images can make the page hard to readhard to read

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

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

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

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;}

MyStyles.css

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

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

colors and backgrounds learning web design: chapter 13 beautiful web design: chapter 2

Documents

color wheelsaturated

color of choice

color wheelcolor

tertiary colors

primary colors red

vibrant color yellow

earth colors tints

web pagesuse bright