CSS Home

CSS Activity 2

Let's try and pull together some new color ideas into your CSS file. In this activity, we will develop a color palette/scheme for your site by selecting a background, base, and at least one accent color.

How to pick colors:

Most web color schemes contain 2-6 colors, and often include combinations of white, dark gray and/or light gray, black, and an accent color(s).

When selecting colors for your site, think about the subject of your site and target audience. The colors of a website for an architecture firm would likely be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (serious, playful, etc). If you have a logo with an established color, that will usually be a good color to use as an accent on different elements.

Color Contrast

It is important to note that when using color and text you need to ensure that there is sufficient contrast between the background and the copy. This will help people with color blindness or low vision read the text on your website. There are many tools you can use - You can check the contrast of your color choices by using WebAIM's contrast analyzer.

Choosing elements to change:

In order to understand the use of color on the web in a practical way, it is important to identify the difference between background, base and accent colors, and to systematically apply colors across elements:

The Activity

Use your existing HTML elements to implement your new color scheme. The palette for your website is 100% up to you to create, but please be prepared to describe your rationale.

Helpful Resources

Next: JavaScript
Previous: Color Schemes