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:

• Background Color: This color is typically the most dominant and sets the general look and feel of the site. The default background is white. Some common background examples are white, black, grey and blue. The CSS property to address background is background-color. In the following example, I am setting my background to the web color Old Lace (white with a slightly peachy hue). I have used the web color name, but the same effect could be achieved by swapping OldLace with rgb(253, 245, 230), or #FDF5E6 (Hex).

  body{	
  	background-color:OldLace;
  }
  				

• Base Color(s): This color is used to break up the background color and is often a neutral color (white, grey, brown, and black colors). The base color normally applies to menu elements, heading and text element backgrounds, and sometimes images/illustrations. A common example is a website with a white background and dark grey base. Base colors can be achieved by changing the background of specific elements (like tables, headings, divs) and borders. In the following example, I change the border and background of all table elements to light gray. I have used the web color name, but the same effect could be achieved by swapping the LightGray for rgb(211, 211, 211), or #D3D3D3 (Hex).

  table {
      background-color:LightGray;
      border: 1px solid black;    
  }
  				

• Accent Color: This color is used least but gives the site additional personality. Your accent color is distinct from background and the base colors - and is typically the boldest color. The accent is typically found in logos, buttons, links, and sometimes headings, images, or illustrations. An example is a website with white background, the title and texts are dark grey and there is a big button in color red that reads "buy here". The CSS property to influence text is color. In the following example, I set my link text and button background to red (default links are blue). I have used the web color name, but the same effect could be achieved by swapping the word red for rgb(255, 0, 0), or #FF 00 00 (Hex). If you want to use more than 1 accent, consider either an analogous, or complementary scheme.

  a {
  	color: red;
  }
  
  button {
      background-color: red;
    	border: none;
    	color: white;
    }
  				

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

• Test your foreground and background colors using Webaim's contrast analyzer (accepts RGB and Hex values).
• Colorhexa.com: This website has all the information you need to create colors. The edit field allows you to enter any color value, i.e., hex number, RGB, or just the plain color word, such as "dark green," and then gives you all the ways to create it. It also lists colors by name, defines all sorts of color terminology, and tells you if the color is web safe. (Huge thank you to Kestrel Verlager for finding and sharing this and the previous resource!)
• 35 Logo Color Combinations to Inspire Your Design
• Instant Color Schemes: This website takes 5 related images from Yahoo Image Search and then show the most prominent 6 colors from each image. Each column of colors is taken from a single image.