HTML and CSS Reference
Problem Solving: Choosing a Color Scheme
One of the worst things you can do to your Web site is to associate interesting and useful
content with jarring and disagreeable color. Many designers prefer the HSL color system
because it makes it easier to select visually pleasing color schemes. The following are some
basic color schemes you may want to apply to your own Web sites:
• monochrome —a single hue with varying values for saturation and lightness; this color
scheme is easy to manage but is not as vibrant as other designs
• complementary —two hues separated by 180° on the color wheel; this color scheme is the
most vibrant and offers the highest contrast and visual interest, but can be misused and
might distract users from the page content
• triad —three hues separated by 120° on the color wheel; this color scheme provides the
same opportunity for pleasing color contrasts as a complementary design, but might not
be visibly striking
• tetrad —four hues separated by 90° on the color wheel; perhaps the richest of all color
schemes, it is also the hardest one in which to achieve color balance
• analogic —two hues close to one another on the color wheel in which one color is the
dominant color and the other is a supporting color used only for highlights and nuance;
this scheme lacks color contrasts and is not as vibrant as other color schemes
Once you have selected a color design and the main hues, you then vary those colors by
altering the saturation and lightness. One of the great advantages of style sheets is that you
can quickly modify your color design choices and view the impact of those changes on your
Web page content.
You show Tammy the work you've done on colors. She's pleased with the ease of using
CSS to modify the design and appearance of elements on the Sunny Acres Web site. In
the next session, you'll continue to explore CSS styles, focusing on text and image styles.
Session 3.1 Quick Check
1. What are inline styles, embedded styles, and external style sheets? Which would
you use to defi ne a design for an entire Web site?
2. What keyword do you add to a style property to override style precedence and
3. Specify the code to enter the comment Sunny Acres Color Styles in a style sheet.
4. Provide the style rule to display blockquote text in red using an RGB triplet.
5. The color chartreuse is located at 90° on the color wheel with 100% saturation
and 50% lightness. Provide a style rule to display address text with chartreuse as
the background color.
6. What is progressive enhancement?
7. Based on the following style rule for paragraph text, which style property will be
used by an older browser that supports only CSS2?
color: rgb(232, 121, 50);
color: hsla(23, 80%, 55%, 0.75);
8. Provide a style rule to display h1 and h2 headings with a background color of
yellow (an equal mixture of red and green at highest intensity with no blue) at