Colors

Color is the first thing people change when they start styling a page. In CSS the same color can be written in several ways, and you will meet all of them in other people's code. Let's go through them one by one.

Text and background color

The color property sets the text color, and background-color sets the background of the element:

<style>
  .banner {
    color: white;
    background-color: teal;
  }
</style>
 
<p class="banner">White text on a teal background</p>

The background fills the whole width of the paragraph, not just the line of text: a paragraph is a block as wide as the available space.

Color names

CSS has about 140 ready-made names: from simple red and blue to tomato, gold and rebeccapurple. They are handy in learning examples:

<p style="color: tomato;">tomato</p>
<p style="color: seagreen;">seagreen</p>
<p style="color: slateblue;">slateblue</p>

Names are not enough for design: an exact brand color cannot be written this way. Numeric notations exist for that.

Hex code

The most common notation is hex: a hash and six characters. These are three pairs — the amount of red, green and blue from 00 (none) to ff (maximum). The digits are hexadecimal: after 9 come the letters a to f.

<p style="color: #ff0000;">#ff0000 — pure red</p>
<p style="color: #7c3aed;">#7c3aed — purple</p>
<p style="color: #333;">#333 — short for #333333</p>

Such codes are copied from graphics editors and palettes.

The rgb() function

rgb() describes the same three channels with numbers from 0 to 255. It is easier to read than hex:

<p style="color: rgb(220 38 38);">rgb(220 38 38) — red</p>
<p style="color: rgb(22 163 74);">rgb(22 163 74) — green</p>

The numbers are separated by spaces. Older code uses commas — rgb(22, 163, 74) — and that works too.

The hsl() function

hsl() describes a color the way people think about it: hue (an angle on the color wheel from 0 to 360), saturation and lightness in percent. To get a lighter or darker version of the same color, you change only the last number:

<p style="background-color: hsl(210 80% 30%); color: white;">hsl(210 80% 30%)</p>
<p style="background-color: hsl(210 80% 60%);">hsl(210 80% 60%)</p>
<p style="background-color: hsl(210 80% 90%);">hsl(210 80% 90%)</p>

Transparency

After a slash in rgb() and hsl() you give the opacity: 0 is fully transparent, 100% is solid. The opacity property makes the whole element transparent, text included:

<style>
  .bg { background-color: rgb(124 58 237 / 20%); }
  .faded { background-color: rgb(124 58 237); color: white; opacity: 0.4; }
</style>
 
<p class="bg">Only the background is transparent</p>
<p class="faded">Everything is transparent, including the text</p>

Common mistake

Light gray text on a white background looks neat but is hard to read — especially in sunlight or for people with weak eyesight. Text should differ noticeably from the background in lightness:

<p style="color: #cccccc;">This text is barely visible.</p>
<p style="color: #52525b;">This gray reads well.</p>

You can check contrast in the browser developer tools: when you pick a color there, they show whether it stands out enough.