Center for Spiritual Living - Charlottesville Teaching Chapter

Changing Minds – Changing Lives

Colors Mockup Page

We are starting with the image at right for our base color scheme, which everyone seemed to like.  There’s probably not all the colors we need in this image, but if we use this for starters and make other colors coordinate with this image, we should be good.

Note the background around the spotlight is textured so there are several colors imbedded in the background.

Here’s a list of colors based on the image:

Color Swatch

Taken from

Web Style

Hair

Web Style

Blouse

Web Style

Jacket

Web Style

Arm

Web Style

Arm

Web Style

Upper Spotlight

Web Style

Lower Spotlight

Web Style

Lower Shadow

Web Style

Upper Shadow

Web Style

Floor Outside Spot

Web Style

Shoes

Web Style

Light wall texture

Web Style

Dark wall texture

Web Style

Here’s our color palette:

Note: the table was copied from above, we’ll need to rearrange the color swatches to match what we want to use for each html item.

As we get the colors assigned, and new colors added for the items not covered in the original image palette, we’ll create objects on this page that illustrate the usage, and potentially change the colors on the overall mockup site.

Please note that a single swatch could be used for multiple objects.  For instance, the white-ish color could be used both for a background, as well as text where the text background is dark.

Color Swatch

System Colors

Used in

Primary Headline

Header

Secondary Headline

Header

Normal Text

Normal text

Accent Text

Accent Text

Page Background

Page Background

Text Link inactive

Links in body text

Text Link inactive

Links in body text

Text link, hover

WLinks in body text

Text Link Active

Links in body text

H1

Big headings

H2

smaller headings

H3

smaller headings

H4

smallest headings

Page Background

Pages

Box Background

Boxes containing content

Box Shadow

Edges of boxes containing content

Sample Text

Edges of boxes containing content

H1 Heading

H2 Heading

H3 Heading

H4 Heading

Normal text