Color Theory and Typography

A layered approach to Web Design, focused on content, accessibility & the user.

Progressive Enhancement

Primary Colors

Red, Yellow, Blue

Secondary Colors

Orange, Green, Violet

Tertiary Colors

Red Orange

Yellow Orange

Yellow Green

Blue Green

Blue Violet

Red Violet

Orderly System for creating a whole range of colors from a small set of primary colors

Color Model

Two types of Color Models

Additive and Subtractive

Color model that use light to display color

Additive

Color models that use printing inks

Subtractive

Colors perceived at additive colors are the result of?

Transmitted lights

Colors perceived at subtractive colors are the result of?

Reflected light

Primary Colors of additive color model

Red

Green

Blue

Primary Colors of Subtractive Models

Cyan

Magenta

Yellow

Medium of Additive

Light

Medium of Subtractive

Ink/Pigment

Red + Green + Blue =?

White

Often called Four Color Printing

CMYK (Subtractive Color Model)

What is your favorite color?

Purple 💜💜

By using ____ _____ you can send positive of negative message, encourage sales, calm a crowd or make an athlete pump iron harder

Color Psychology

Associated with energy, war, danger, strength, power, determination as well as passion, desire, and love.

Red

Enhances human metabolism, increases respiration rate, and raises blood pressure

Red

It attracts attention more than any other color, at times signifying danger.

Red

Combines the energy of red and the happiness of yellow

Orange

Associated with joy, sunshine, and the tropics.

Orange

Represents enthusiasm, fascination, happiness, creativity, determination, attraction, success,encouragement, and stimulation.

Orange

Associated with joy, happiness, intellect, and energy.

Yellow

Produces a warming effect, arouses cheerfulness, stimulates mental activity.

Yellow

indicates honor and loyalty

Yellow

Color of nature.

Green

It symbolizes growth, harmony, freshness, and fertility.

Green

Srong emotional correspondence with safety. Has great healing power.

Green

It is often associated with depth and stability. Symbolizes trust, loyalty, wisdom, confidence, intelligence, faith,truth.

Blue

Associated with light, goodness, innocence, purity, and virginity.

White

Color of Perfection

White

Associated with power, elegance, formality, death, evil, and mystery.

Black

nature's way of saying that two or more things together make sense.

Harmony

represents a satisfying balance or unity of colors.

Color Harmony

The Name of Color

Hue

Intensity or purity of hue

Saturation

The degree of lightness and darkness of hue

Value

A hue produced by adding black

Shade

A hue product by adding white

Tint

A hue produced by adding grey

Tone

4 color schemes

Monochromatic

Analogous

Complementary

Triadic

uses only one hue or color and its lighter or darker variations. This means one color is used with different amounts of black and white.

Monochromatic

Scheme that involves three adjacent colors on the color wheel. This pertains to three hues, all positioned next to each other on the color wheel.

Analogous

Pair colors that neutralize each other when mixed, typically resulting in white, black, or a grayscale shade. This approach, also called the "opposite color" scheme, creates a high contrast.

Complementary

consists of three colors spaced evenly around the color wheel. To identify these colors, you can place an equilateral triangle on the wheel; each corner will point to a color 120° apart from the others.

Triadic

is the set of design features that characterize a particular style of lettering.

Typeface

is a design style for letters, numbers, and symbols

Typeface

is a specific style, size, and weight within a typeface.

Font

is just a more specific way of defining the kind of text you’re using. It hones in on both the size and weight of a typeface

Font

It refers to how a typeface is displayed.

Font

Thickness of the font

Weight

Variations in the horizontal stretch of characters.

Width

Refers to the point size (e.g., 10pt, 12pt, 24pt). Determines how large the characters appear.

Size

A group of related fonts with variations of weight and style within the same typeface.

Font Family

is a type classification which is evident by the short lines attached to the end of the stroke in a letter.

Serif

Also known as 'Gothic', is the opposite of serif -it isa type classification which does not have the short line on the end of the stroke in a letter.

Sans serif

also known as 'Display' or 'Ornamental', is a type classification which is identified by its decorative style and use of ornaments.

Decorative

based on handwriting, particularly the cursive style.

Script