Colors and Typography
In this project, you will follow step-by-step instructions to improve a vibrant, color-rich web page for a home paint business. It displays information about using color in a home and color swatches with varying lightness, saturation, and hue.
The page is almost ready to be published. You’ll be making the following color-related changes:
- Exchange some named colors with hexadecimal color values.
- Add some semi-transparent overlays to the banner and footer using RGBA.
- Fill in the first color column of the swatch samples using HSL colors.
-
1. In style.css, find the three CSS rules that use the named color orange. This color is not exactly the right orange to match the paint store brand. Replace orange with the hex color #ff8000.
- The first place of
orange
is the background of the header, under the selectorheader
. - The second location is the text color for the “Color Guide” heading, under the selector
#color-guide h2
.
- The first place of
-
2. Make the main title text of the
h1
element semi-transparent to match the spooky text theme. To do so, set thecolor
property withrgba()
to make the text black (0
for red, green, and blue values) with0.7
alpha value. -
3. Give the header’s background image a semi-transparent orange overlay to simulate a photographic filter. In the
#banner:before
selector on line 95, add a background color with the valuergba(255, 128, 0, 0.75)
. -
4. Now do the same for the footer, adding a semi-transparent layer on top of the image to soften and darken it. Find the selector
footer:before
and add a background color with same semi-transparent value that you used for theh1
element. -
5. Soften the subtitles which say “Saturation,” “Lightness,” and “Hue.” Currently, they are the default black. Add a property to the
.color .swatches h4
rule to change the text color to the light gray hex value#9b9b9b
. -
6. There are three
span
tags which describe the “base color” for each color section. Each of them falls under a<div>
tag with a class specific to the color. Currently, all these base colors are described with hex values. Change these to HSL. For example, the value for color within the rule.reds .base-color
is currently#ff002b
. Change this to the HSL valuehsl(350, 100%, 50%)
. You can find the base color values for the green and blue sections in the web page text. Update those to their corresponding HSL value as well. -
7. In each section (red, green, and blue), there are 15 color cells. Each cell has its own rule specifying its color in style.css. Notice that at the beginning of each color swatch, the first cell is empty. Find the rule for each of the empty cells and fill in the
hsl()
value which completes the pattern. For example, the first blank swatch is.reds .lightness .color-1
. In each HSL value in this section, notice that the lightness value decreases by 15 percentage points. Following the pattern, fill in the value for the background-value for this cell,hsl(350, 100%, 80%)
. Use the patterns for each of the other 8 rows and fill in the missing cell for each row. In style.css, there is a comment above each empty cell’s rule that describes the pattern.