DEV Community

Cover image for CSS Colors Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Colors Tutorial

In this tutorial, we’ll be learning about colors in CSS.

Without CSS, our web pages would look pretty dull. In HTML we get a plain white background, black text and blue links. And that’s about it.

So let’s use CSS to add some color!

Working with colors

The CSS color property sets the color of our text:
CSS Colors
The color property can accept any CSS color value. Which are categorized as: named colors, hex colors, RGB & RGBa colors or HSL & HSLa colors.

Let’s take a look at each!

Named Colors

CSS Colors
Named colors (or keyword colors) are CSS keywords that define colors. Such as: red, blue, lime, aqua, light coral, etc.

CSS originally started with 16 colors, however today there are tons of options. Check out the list of supported colors.

Named colors are great for convenience. However, to get more specific colors we should look at other options.

Hex Colors

Hex (or hexidecimal) colors, are defined with alphanumeric values.

For example:
Hex Color
Each hex color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB).

In the above example, the first two characters represent the red value, the second two the green value, and the third the blue value. The range is from 00 to FF.

The hex code is essentially shorthand for its RGB value!

In the case where our pairs of red, blue, and green values are all doubles, we can abbreviate the value to a 3 character shorthand. So #FFFFFF can be abbreviated to #FFF.
Hex Color

RGB and RGBa Colors

Alternatively, you can use rgb() to calculate a color from its RGB notation.

To define our colors, we use a comma-separated list of three numeric values (ranging from 0 to 255). The first represents the red value, the second is the green value, and the third is the blue value. For example:
RGB Color
We can use rgba() to adjust opacity. With RGBa we add a fourth value. The value is a number within a range from 0.0 (fully transparent) to 1 (fully opaque). For example:
RGBA Color

HSL and HSLa Colors

HSL (Hue Saturation Lightness) colors are a more recent addition to CSS.

As with RGB we also use a comma-separated list of three values. The first is the degree of Hue (from 0 to 360), then a Saturation percentage (from 0% to 100%), and then a Lightness percentage (from 0% to 100%).
HSL Color
HSL colors are opaque by default.

To add opacity, use hsla() adding a fourth value ranging from 0.0 (fully transparent) to 1 (fully opaque).
HSLa Color

Color accessibility

When working with colors we should always mindful of accessibility. By ensuring the contrast ratio between the color of the text and the background meets a certain standard. This way people with vision considerations are still able to read the content of the page.

The ratio is determined by comparing the luminosity of the text and background color values. And we can compare colors with the Web Content Accessibility Guidelines (WCAG) color checker tool.

Summary

And there you go! We’ve seen how to add color to our pages with named, HEX, RGB & HSL colors. Next up we’ll be looking at working with backgrounds in CSS. See you then!

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)