Colour codes are ways of representing the colours 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 colour codes, RGB and HSL values, and HTML colour names, amongst others.
The most popular are Hex colour 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 colour respectively.
RGB, which stands for Red, Green and Blue, is a colour 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 colours 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 colour. Adding an ‘a’ to the rgb() prefix enables a fourth value to be assigned which determines the transparency of the colour on a scale of 0 to 1.
You may have heard of HSL, which stands for Hue, Saturation and Lightness, another colour 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 colour. Its use is identical to RGB, with the fourth value between 0 and 1 enabled when using the ‘hsla’ prefix.
HTML colour names are another way to style your content in CSS, and can often be easier to understand. You can use a colour name in the same way as a Hex colour code, setting it as the value for the CSS colour property in your stylesheet.