CSS Colors: Names, HEX, RGB, HSL and Opacity

What you will learn

Colour is the fastest way to change how a page feels. In this lesson you will learn the CSS properties that set colour, and the four ways to write a colour value: names, HEX, RGB and HSL. You will also learn how to make colours transparent, and how to convert between the formats with the free Color Converter tool.

Which properties use colour?

You have already used color. These three are the ones you will use most:

• color sets the colour of the text (and of anything that borrows the text colour).
• background-color sets the background behind an element.
• border-color sets the colour of a border (you will meet borders in a later lesson).

.swatch {
  color: white;
  background-color: tomato;
}

Easy to mix up: color is the text, background-color is the background. There is no text-color and no font-color in CSS.

All colour properties accept the same set of values, which you will learn now.

1. Colour names

CSS understands about 140 built-in colour names, such as red, tomato, steelblue, seagreen and gold.

.by-name {
  background-color: tomato;
}

.title {
  color: darkslateblue;
}

Names are easy to read and great for learning and quick tests. The limit is that you can only get the colours that have a name. For an exact shade you need one of the next three formats.

Tip: the names are not case-sensitive, but write them in lower case. Also note it is gray (and grey works too) but always color, never colour.

2. HEX colours

HEX is the most common format on the web. It is a # followed by six characters:

.by-hex {
  background-color: #2e8b57;
}

The six characters are three pairs: red, green and blue, in that order (#RRGGBB). Each pair goes from 00 (none of that colour) to ff (the maximum). HEX numbers use base 16, so the digits are 0-9 and then a-f.

HEX	Meaning	Result
#ff0000	full red, no green, no blue	red
#00ff00	no red, full green, no blue	bright green
#0000ff	no red, no green, full blue	blue
#000000	nothing at all	black
#ffffff	full red, green and blue	white
#808080	half of each	gray

Useful things to know:

• Shorthand: when each pair repeats a digit, you can use three characters. #ff0000 becomes #f00, and #ffffff becomes #fff.
• Case does not matter: #FF0000 and #ff0000 are the same.
• Always include the #. ff0000 on its own is not a colour.

.title {
  color: #333;
}

.lead {
  color: #666666;
}

3. RGB colours

RGB writes the same three ingredients, red, green and blue, as ordinary numbers from 0 to 255:

.by-rgb {
  background-color: rgb(65, 105, 225);
}

RGB	Result
rgb(255, 0, 0)	red
rgb(0, 128, 0)	green
rgb(0, 0, 0)	black
rgb(255, 255, 255)	white
rgb(255, 165, 0)	orange

HEX and RGB are two ways of writing exactly the same thing. #ff0000 and rgb(255, 0, 0) give identical results, because ff in HEX is 255.

Modern syntax: you can also write RGB with spaces instead of commas, as in rgb(65 105 225). Both styles work in all current browsers. This course uses commas, because you will see them in most existing code.

4. HSL colours

HSL describes a colour the way people naturally think about it, using three values:

• H, hue: the colour itself, as a position on the colour wheel from 0 to 360 degrees. 0 is red, 120 is green, 240 is blue, and the numbers in between blend through yellow, cyan and purple.
• S, saturation: how vivid the colour is, from 0% (gray) to 100% (fully vivid).
• L, lightness: from 0% (black) through 50% (the pure colour) to 100% (white).

.by-hsl {
  background-color: hsl(280, 60%, 45%);
}

HSL	Result
hsl(0, 100%, 50%)	red
hsl(120, 100%, 50%)	green
hsl(240, 100%, 50%)	blue
hsl(0, 0%, 50%)	gray
hsl(0, 0%, 100%)	white

Why developers love HSL

With HEX or RGB, “make this colour a bit darker” means guessing three numbers. With HSL you change one number, the lightness. Here is a whole family of blues made by changing only L:

.swatch {
  padding: 16px;
  margin-bottom: 8px;
  color: white;
}

.by-name {
  background-color: hsl(220, 80%, 20%);
}

.by-hex {
  background-color: hsl(220, 80%, 35%);
}

.by-rgb {
  background-color: hsl(220, 80%, 50%);
}

.by-hsl {
  background-color: hsl(220, 80%, 65%);
}

The colour stays the same blue and only gets lighter. That makes HSL excellent for hover effects, palettes and light or dark versions of a brand colour.

5. Transparency

A colour can be see-through. There are two different ways to do this, and the difference matters.

The alpha channel

RGB, HSL and HEX can all take an extra alpha value: 0 is fully transparent, 1 is fully solid.

.panel-alpha {
  background-color: rgba(255, 255, 255, 0.5);
}

rgba() and hsla() are the classic names for the versions with alpha. The modern forms use a slash: rgb(255 255 255 / 50%) and hsl(0 0% 100% / 0.5). You can also add alpha to a HEX code with two more digits: #ffffff80.

There is also the keyword transparent, which means fully see-through.

The opacity property

opacity also takes a value from 0 to 1:

.panel-opacity {
  opacity: 0.5;
}

The difference: alpha makes only that colour see-through. opacity fades the whole element, including its text, borders and everything inside it.

Try both together with Try it:

.stage {
  background-color: steelblue;
  padding: 20px;
}

.panel {
  color: black;
  padding: 16px;
  margin-bottom: 10px;
}

.panel-opacity {
  background-color: white;
  opacity: 0.5;
}

.panel-alpha {
  background-color: rgba(255, 255, 255, 0.5);
}

Both panels have a half-see-through white background, but the text in the first panel is faded too, while the text in the second stays solid black. Use alpha when you only want a see-through background (for example a dark overlay behind text), and opacity when you want to fade an entire element.

Choosing a format

They all produce identical results. In practice:

• Names for learning and quick tests.
• HEX for exact brand colours. It is the format you get from design tools and colour pickers, so you will see it everywhere.
• RGB or HSL with alpha whenever you need transparency.
• HSL when you want to build shades and palettes, or adjust a colour in a predictable way.

Pick one style and stay consistent within a project.

Converting between formats

Found a HEX code and want the HSL version? The Color Converter turns any colour into HEX, RGB and HSL, lets you pick a colour visually, supports transparency, gives you a ready-to-paste CSS value, and includes a contrast checker.

Readable colour combinations

A colour choice is only good if people can read it. Gray text on a slightly lighter gray background looks stylish and is hard to read. As a simple rule, text needs a strong contrast against its background. The accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5 : 1 for normal text. Check your pairs in the contrast checker of the Color Converter instead of trusting your eyes, especially when using light text on coloured backgrounds. Also never use colour as the only way to give information (for example, “the red items are on sale”), because some people cannot tell certain colours apart.

Common mistakes

• Writing colour (British spelling). CSS only knows color, and background-color.
• Forgetting the # in a HEX code, or using the wrong number of digits (only 3, 4, 6 or 8 are valid).
• Missing units or % in HSL. Saturation and lightness need the percent sign: hsl(200, 50%, 50%), not hsl(200, 50, 50).
• RGB values above 255. Values that are too high are simply capped, so you will not get the colour you intended.
• Using opacity when you only wanted a see-through background. It fades the text inside as well.
• Very low contrast, such as light gray text on white.
• Setting only the text colour and forgetting the background (or the opposite). This can produce unreadable text if the user’s browser or a later rule supplies the other colour.

Practice

1. Click Practice in Editor. Change the four swatches to four colours of your choice, using a colour name, HEX, RGB and HSL once each.

2. Write the same orange four ways: as a name (orange), in HEX, in RGB and in HSL. Use the Color Converter to find the matching values.

3. Create a “family” of five shades of one colour by changing only the lightness in HSL.

4. Give .panel-alpha a rgba(0, 0, 0, 0.6) background and white text. This is the typical “dark overlay” look.

5. Try opacity values of 0, 0.3 and 1. What happens to the text?

6. Find the errors in these lines:

   .a { colour: red; }
   .b { background-color: ff0000; }
   .c { background-color: hsl(200, 50, 50); }
   .d { color: rgb(300, 0, 0); }

Recap

• color sets text colour, background-color sets the background, and border-color sets the border colour.
• A colour can be written as a name, HEX (#RRGGBB), RGB (rgb(r, g, b)) or HSL (hsl(h, s%, l%)). They are just different notations.
• HSL is the easiest for making lighter and darker shades: change only the lightness.
• The alpha value makes just a colour transparent, while opacity fades the entire element, text included.
• Check text contrast (aim for 4.5 : 1) and convert colours with the Color Converter.
• Next you will style text with fonts, sizes, weights and alignment.