Web Colors: How To Use Color In Your Website [2020 Edition]

Learn how to declare colors in RGB, hexadecimal, and HSL.

Claire Broadley
Last Updated on August 5, 2020
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

When the HTML specification was originally defined, all of the colors in a web page were controlled by HTML. Now, we define them in CSS. But the color definitions that we choose borrow some elements of the original HTML names.

You can specify colors using the:

Understanding Pixels and Colors

In order to understand the other ways of declaring colors, we first need to understand how pixels work.

Every pixel is made up of red, green, and blue light. By blending different intensities of these three component colors, any visible color can be created.

RGB and hexadecimal color values have three separate sets of variables to control the red, green, and blue subpixel values.

Color Mixing - Paint vs Light

Both RGB and hexadecimal systems use additive color mixing, and they are collectively known as the cubic-coordinate system. HSL and HSV systems use subtractive mixing.

Color Names

The original list of valid color names in HTML corresponded with the 16 ‘web safe’ colors on old VGA displays. Now that display technology is more sophisticated, the number of color names has been expanded.

There are now 140 color names in the CSS specification, 17 of which are valid in HTML as well. But now that we have CSS, it’s important to declare colors in the styles for the document and not in HTML for three reasons:

  1. Keeping colors in the stylesheet lets developers keep HTML for the structure of the document, while CSS controls its appearance
  2. Accessibility guidelines state that HTML documents should not specify colors, so that browsers may use default colors, if applicable
  3. Using a disallowed color name will stop a HTML document from validating.

For new developers or non-technical web users, color names offer flexibility without the need to remember complicated strings of numbers or characters. But alternate methods offer more precise control over the color of your web page elements.

Sorted "named" colors
Sorted “named” colors

Declaring RGB Values in CSS

The RGB value of a color is made up of three three-digit numbers:

rgb(255, 0, 0);

Each number can have a value between 0 and 255:

  • The first three-digit number is the red sub-pixel value
  • The second is green
  • The third is blue.

For example, if you need to specify red using this method, you would set the red value to be 255 – the maximum. The blue and green values would be zero, since you do not need any other colors blended in.

Here’s what it looks like as a CSS declaration:

.red-rgb {
 background-color: rgb(255, 0, 0);
}

RGB is an additive color mixing method. So if we wanted to specify a white color in CSS, we would specify all of the red, green, and blue sub-pixels to be the maximum value, 255:

.white-rgb {
 background-color: rgb(255, 255, 255);
}

Alternatively, we can specify each channel as a percentage:

.white-rgb-pc {
 background-color: rgb(100%, 100%, 100%);
}

Remember: you can’t mix a percentage and RGB value in the same declaration.

Further Reading on RGB Colors

 

RGB Cube
Illustration of an RGB cube

Specifying Opacity

If you need to set the opacity of a colored object, rgba provides this functionality. You can declare red, green, and blue values, and an additional value for transparency.

For example, this would make a red object 50% opaque:

.red-rgb-opaque {
 background-color: rgba(255, 0, 0, 0.5);
}

Most modern browsers will render rgba values.

Declaring Hexadecimal Color Values in CSS

A hexadecimal color value is a string of six characters preceded by a hash (pound sign).

The principle is very similar to an RGB value. There is a pair of characters for the red subpixel, one for blue, and one for green.

In hex, 0 is the minimum value possible for a character, and F is the maximum. So colors range from 00 to FF. In the example below, the hexadecimal code specifies a red color:

.red-hex {
 background-color: #ff0000;
}

The first two characters are the red value set to max (FF), the second is blue (00), and the third is green (00).

And here’s white. We’re still using additive color mixing, so red, green, and blue are all set to their maximum values (FF, FF, and FF):

.white {
 background-color: #ffffff;
}

Further Reading on Hexadecimal Colors

Declaring HSL Colors

HSL (and HSV) are designed to be more intuitive than RGB and hexadecimal. They use subtractive rather than additive mixing, which is similar to the way we mix paint.

Color wheel
Color wheel

HSL stands for hue, saturation, and luminosity. While RGB and hex are cubic-coordinate systems, HSL is a cylindrical-coordinate system. It helps to understand the geometric strategies behind HSL and HSV if you plan to use either to specify CSS colors, but the concept is reasonably simple:

  • The first number in a HSL declaration is the color position on a color wheel, or the hue, where 0 and 360 are both red, and other colors are denoted by the integers between
  • The second number is a percentage figure to denote color saturation
  • The final number is a number to denote luminosity.

For example, both of these snippets would produce a red color with 70% saturation and 100% luminosity, since 0 and 360 occupy the same position on the color wheel:

.red-hsl-0 {
hsl(0, 70%, 100%);
}

.red-hsl-360 {
hsl(360, 70%, 100%);
}

Further Reading on HSL and HSV Colors

  • HSL and HSV Colour Models: this SlideShare presentation takes you through the basics of HSL and HSV, the pros and cons, and some of the mathematics behind the models.
  • HSL and HSV: a thorough primer from Wikipedia.

Resources

Use these resources to play with colors and discover how different color mixing methods work:

Read previous post:
website optimization
7 Effective Mobile Optimization Tips For A Mobile Friendly Site

In the era of smartphones and small screens, everybody has a mobile device. You can use it wherever you are,...

Close