Colors

Colors in CSS

CSS has lots of properties that deal with color. The primary ones you’ll deal with are

• color for text color.
• background-color for the background color of any element.
• border-color for the color of a border.

CSS Color Values

In our examples, we’ve mostly used named color values, like mediumorchid and darkslateblue and hotpink. You may have also seen hex color values, like #483d8b, which specify the red, green, and blue color values for a color.

There are more ways to specify colors than named values and hex values!

As usual, MDN has your guide. The page on color values explains lots of other ways of specifying color values.

Choosing Good Colors

Choosing bad colors makes a site look amateurish. So, what makes good colors?

If you don’t have enough contrast, the text won’t be readable.

In the lesson on Styling Text, we said

Your primary goal should be to create contrast between the background color and the text color. Dark text on a dark background is hard to read. So is light text on a light background.

Usually, the best choice is black or dark gray text, on a white or near-white background.

This is still true.

What colors do good sites have?

When designers create a color palette, they usually pick:

• Theme color (or several related theme colors) for background colors for the header and footer.
• Accent color, for links and highlights.
• Background color (usually an off-white, like #eeeeee).
• Body font color (usually a dark gray, like #222222).

Try it: Count the colors

Try it: A color palette

Even on a site that looks very colorful, there’s only a handful of colors.

Building a color palette means choosing just a few colors to use on your site.

CSS Variables

If you’re going to use the same value in lots of places in your CSS code, there’s a really useful tool: CSS variables. Here’s how they work.

html {
  --theme: #D231A0;
}

a:hover {
  color: var(--theme);
  text-decoration-color: var(--theme);
}

This snippet creates a CSS variable called --theme, then uses it as the color for the text and the underline when a link is hovered. When the browser sees var(--theme), it looks up the variable --theme and uses that value, #D231A0.

You can use CSS variables for any values — colors, sizes, numbers, percentages, or any other property values. CSS variables are really useful for color palettes, since it’s common to use the same colors again and again.

Related colors

If you choose colors that look “related”, the site will look more natural.

How can colors be related? In this course, we won’t get too deep into color theory. Instead, here’s a couple activities that might help you think about choosing a family of related colors.

Practice: Color Method Game

Practice: Apply a palette