Color codes are ways of representing the colors we see every day in a format that a computer can interpret and display. Commonly used in websites and other software applications, there are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others.
The most popular are Hex color codes; three-byte hexadecimal numbers (meaning they consist of six digits), with each byte, or a pair of characters in the Hex code, representing the intensity of red, green and blue in the color respectively.
RGB, which stands for Red, Green and Blue, is a color system commonly found in many design applications and technologies and more recently has become a go-to for web designers and programmers alike. In CSS, RGB colors can be used by wrapping the values in parentheses and prefixing them with a lowercase ‘rgb’. One of the benefits of using RGB in your CSS is the ability to control the opacity in addition to the color. Adding an ‘a’ to the rgb() prefix enables a fourth value to be assigned which determines transparency of the color on a scale of 0 to 1.
You may have heard of HSL, which stands for Hue, Saturation, and Lightness, another color system used in many applications. Hue is measured in degrees from 0 – 360, while Saturation and Lightness use a scale of 0% – 100%. In CSS, HSL can be easily implemented following a syntax similar to RGB but prefixed instead with ‘hsl’. Likewise, HSL also supports an alpha channel to control the transparency of the color. Its use is identical to RGB, with the fourth value between 0 and 1 enabled when using the ‘hsla’ prefix.
HTML color names are another way to style your content in CSS, and can often be easier to understand. You can use a color name in the same way as a Hex color code, setting it as the value for the CSS color property in your stylesheet.