Turn it in!
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. Below are some examples of what this assignment could look like:
| Bird Feathers | |||
| Blue | Red | Yellow | Green |
| [hex value for Blue] | [hex value for Red] | [hex value for Yellow] | [hex value for Green] |
| [rgb value for Blue] | [rgb value for Red] | [rgb value for Yellow] | [rgb value for Green] |
| [hsl value for Blue] | [hsl value for Red] | [hsl value for Yellow] | [hsl value for Green] |
| Beach | |||
| Sea Green | Turquoise | Light Cyan | Wheat |
| [hex value for Sea Green] | [hex value for Turquoise] | [hex value for Light Cyan] | [hex value for Wheat] |
| [rgb value for Sea Green] | [rgb value for Turquoise] | [rgb value for Light Cyan] | [rgb value for Wheat] |
| [hsl value for Sea Green] | [hsl value for Turquoise] | [hsl value for Light Cyan] | [hsl value for Wheat] |
| Sushi | |||
| Black | Coral | Ivory | Pale Green |
| [hex value for Black] | [hex value for Coral] | [hex value for Ivory] | [hex value for Pale Green] |
| [rgb value for Black] | [rgb value for Coral] | [rgb value for Ivory] | [rgb value for Pale Green] |
| [hsl value for Black] | [hsl value for Coral] | [hsl value for Ivory] | [hsl value for Pale Green] |
| Flower | |||
| Teal | Light Blue | Light Green | Steel Blue |
| [hex value for Teal] | [hex value for Light Blue] | [hex value for Light Green] | [hex value for Steel Blue] |
| [rgb value for Teal] | [rgb value for Light Blue] | [rgb value for Light Green] | [rgb value for Steel Blue] |
| [hsl value for Teal] | [hsl value for Light Blue] | [hsl value for Light Green] | [hsl value for Steel Blue] |
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.
Your completed assignment should contain all of the following:
- 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, upload your HTML file to your GitHub repository. Then submit the assignment link to your teacher. You will be graded using the following rubric:
| Scheme Name |
|---|
| A color scheme name is included as a table header, with one or more CSS font styles applied to it. |
| Color Names |
| Color name cells with their changed background colors are present. |
| Hex Colors |
| A hexadecimal value was written for each color. |
| RGB Colors |
| An rgb value was written for each color. |
| HSL Colors |
| An hsl value was written for each color. |
| Table |
| The HTML table was created correctly and logically. |
