How to Use Different CSS Color Values (RGB, Keywords, HSL)

Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube. Or refer to the Codepen snippet to follow along with the examples.

One of the properties that are used quite often in CSS is color. It can be used with many different types of values such as RGB, HSL and keywords.

RGB color values

RGB values are defined according to its red, green, and blue components. There are two types of RGB values: hexadecimal and functional.

Hexadecimal RGB values

Hexadecimal RGB values, or hex for short, begin with a number sign followed by six characters, using a combination of numbers from 0–9 and the letters A-F. The first two values represent the red component, followed by the green and blue component values. 0 represents black, F represents white. All other colors are a combination of the numbers and letters.

color: #rrggbb;
color: #000000; /* black */
color: #ffffff; /* white */
color: #ff0000; /* red */
color: #00ff00; /* green */
color: #0000ff; /* blue */

The letters in the hexadecimal notation are case-insensitive so whether you use all…