Loading...

You can use your knowledge of inline styling and color selection to create a color scheme.

When designing a website, it's helpful to decide on a color scheme so your pages will have a consistent feel. They are often inspired by the site's theme, content or product. So let's take a moment and practice creating a color scheme of our own.

Make up a color scheme based on an object, feeling, animal, or anything else that you think has a great color combination. The scheme should consist of four colors. Build a table with information about the color scheme. Your table should include the names of your colors as well as how to make each color with the different color selection methods we learned (hex, rgb and hsl). They don't have to match exactly, but should be fairly close to show you understand how to build colors with each of these methods. Below is an image of generally what your assignment should look like.

a sample color scheme table

Your completed assignment should contain all of the following:

a tiger
  • Your color scheme's name should be set as the table's header. It should have one or more font styles applied to it to differentiate it from other text in the table.
  • You should list each color name, with each cell having its color set as its background color.
  • Include cells that give each color's hex value.
  • Include cells that give each color's rgb value.
  • Include cells that give each color's hsl value.
  • Your HTML table should be logically and properly constructed.

When you're done, save your HTML file and upload it to your Neocities account. Then submit the assignment link to your teacher. You will be graded using the following rubric:

Scheme Name

1 point A color scheme name is included as a table header, with one or more CSS font styles applied to it.

Color Names

1 point Color name cells with their changed background colors are present.

Hex Colors

1 point A hexadecimal value was written for each color.

RGB Colors

1 point An rgb value was written for each color.

HSL Colors

1 point An hsl value was written for each color.

Table

1 point

The HTML table was created correctly and logically.