How Colors Work On the Web In 2018

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:

• Name of the color
• Its RGB value
• Its hexadecimal value
• A HSL or HSV cylindrical value.

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.

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.

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

• Color Tutorial – RGB: a basic introduction to RGB.
• RGB Colors for CSS: a handy generator to help you learn how to style colors in CSS using RGB.

 

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

• A Brief Explanation of Hexadecimal: a full explanation of hexadecimal numbering in clear, simple language. If you’re new to the hex system, start here.
• #c0ffee is the Color: An interesting gallery of hexadecimal color codes that spell real words.

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.

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:

• HSL Picker: use this tool to quickly pick colors. Supports HSL, RGBA, and hexadecimal.
• Color Names: a visual chart showing all 140 allowed colors.
• Understanding HSL Colors: a brief primer to HSL colors from Canon.
• HTML Color Codes: this picker makes it easy to generate color codes and color values.