Alia Al-Abdulkarim and Afnan Al-Subaihin 1

Colors:

Color Theory.

Color Schemes.

Color Contrast.

Web Safe Colors.

Alia Al-Abdulkarim and Afnan Al-Subaihin 2

Although bare-bones Web Architectures

has Accessibility and Usability merits,

most Web designers want to add their

special signature touch to their sites.

They can do so using colors, baring in

mind not to lose the accessibility and

usability features.

Alia Al-Abdulkarim and Afnan Al-Subaihin 3

Colors are divided into primary, secondary

and tertiary colors.

Primary Colors: Red, Yellow, and Blue

Secondary Colors: Orange, Green, and Violet

Tertiary Colors: are mixed from the secondary

colors

Alia Al-Abdulkarim and Afnan Al-Subaihin 4

Alia Al-Abdulkarim and Afnan Al-Subaihin 5

Tint – The resulting color when white is added

Tone – The resulting color when gray is added

Shade – The resulting color when black is added

Alia Al-Abdulkarim and Afnan Al-Subaihin 6

Monochromatic color scheme.

Complementary color scheme.

Triadic color scheme.

Tetradic color scheme.

Analogic color scheme.

Accented analogic color scheme.

http://colorschemedesigner.com/

Alia Al-Abdulkarim and Afnan Al-Subaihin 7

A monochromatic color scheme:

One color and all its tints, tones and shades.

Easiest to use.

Doesn’t provide much excitement.

Alia Al-Abdulkarim and Afnan Al-Subaihin 8

Alia Al-Abdulkarim and Afnan Al-Subaihin 9

Choose two opposite colors in the color

wheel.

Including all the tints, tones and shades of both colors.

Very common, great to use in many websites.

Alia Al-Abdulkarim and Afnan Al-Subaihin 10

Alia Al-Abdulkarim and Afnan Al-Subaihin 11

Pick one color and then pick two other

colors that lie equidistant from each other

around the circle.

Alia Al-Abdulkarim and Afnan Al-Subaihin 12

Alia Al-Abdulkarim and Afnan Al-Subaihin 13

This scheme is just like the complementary

scheme, only you use two complementaries that

are equidistant.

Used by few sites.

Alia Al-Abdulkarim and Afnan Al-Subaihin 14

Alia Al-Abdulkarim and Afnan Al-Subaihin 15

Pick three adjacent colors in the color

wheel.

Provide an elegant and warm look.

Alia Al-Abdulkarim and Afnan Al-Subaihin 16

Alia Al-Abdulkarim and Afnan Al-Subaihin 17

This is the Analogic model with

complementary (contrast) color added.

Alia Al-Abdulkarim and Afnan Al-Subaihin 18

Alia Al-Abdulkarim and Afnan Al-Subaihin 19

Alia Al-Abdulkarim and Afnan Al-Subaihin 20

When you pick the colors of your website:

Color s of logo, images, etc.

Colors of headings, paragraphs, links, and other textual

content.

Color of the background.

The color of the background must have high

contrast with the colors of other page elements.

Contrast is the difference between two colors.

Black and white create the highest contrast

possible.

Alia Al-Abdulkarim and Afnan Al-Subaihin 21

Contrast in color depends on

the three factors:

1. Hue: which is another way to

say color.

2. Lightness (Value): which is

the lightness or darkness of a

color.

3. Saturation: which is the

intensity or purity of a color.

Alia Al-Abdulkarim and Afnan Al-Subaihin 22

Alia Al-Abdulkarim and Afnan Al-Subaihin 23

1. Exaggerate lightness differences

between foreground and

background colors.

Alia Al-Abdulkarim and Afnan Al-Subaihin 24

three basic guidelines for making effective color

choices that work for nearly everyone:

2. lighten the light colors and

darken the dark colors in your

design to increase its visual

accessibility.

Alia Al-Abdulkarim and Afnan Al-Subaihin 25

3. Avoid contrasting hues from

adjacent parts of the hue circle,

especially if the colors do not

contrast sharply in lightness.

Alia Al-Abdulkarim and Afnan Al-Subaihin 26

A tool that helps you choose effective color

contrast:

http://www.dasplankton.de/ContrastA/

Alia Al-Abdulkarim and Afnan Al-Subaihin 27

Alia Al-Abdulkarim and Afnan Al-Subaihin 28

Alia Al-Abdulkarim and Afnan Al-Subaihin 29

Enhance the identity of your website using

favicons.

Can help people identify your website in a

list of bookmarks (especially sighted

people)

Afnan A. Al-Subaihin

Dimensions: 16x16 pixels.

Difficult to design something is such small space.

Start with 32x32 then downsample it.

Use high contrast and very simple design elements.

The image format should be .ico but it is not supported in Photoshop. Use an online converting tool: www.convertico.com

Name the file favicon and place it in the root folder.

Afnan A. Al-Subaihin

http://dev.opera.com/articles/view/10-colour-schemes-and-design-mockups/

http://dev.opera.com/articles/view/8-colour-theory/

http://www.orangeinks.com/design/the-color-scheme-designer/

http://colors.napcsweb.com/colorschemer/color_wheel.html

http://colorschemedesigner.com/previous/colorscheme2/help-en.html

http://www.lighthouse.org/accessibility/effective-color-contrast

http://coe.sdsu.edu/eet/articles/ColorContrast/start.htm

http://www.colorsontheweb.com/colorcontrasts.asp

http://www.wellstyled.com/tools/colorscheme2/index-en.html

http://www.answers.com/topic/bare-bones-system

Alia Al-Abdulkarim and Afnan Al-Subaihin 32