CSS Colors Tutorial
Tags: css, beginners, tutorial, writing
Published: 2022-07-12 16:30:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqfggouisdq8y4frljcu.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgdsqcpxsn5c7d0y6z6w.png)
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](https://www.w3schools.com/colors/colors_names.asp).

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ostws1y1xw4otwr9rnt2.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stcb03p9grn62zswwgg1.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eey0zdstt9bjqbrrf7zu.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qztjy3whelu5jqfsoddc.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6fmp3922nx624lwfvzar.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1u47381mqxrdk01bap3.png)

### 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](https://contrastchecker.com/) 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](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)