Colour theory · Palettes · Design inspirationPractical guides for everyday creativity
Tools & Resources · PRACTICAL GUIDE

HEX, RGB, and HSL Colour Codes Explained

Understand common digital colour formats and when HEX, RGB, or HSL is useful in design and development.

ColourMatching EditorialUpdated 12 November 20268 min read
HEX, RGB, and HSL Colour Codes Explained — colour matching reference photograph
In brief: Understand common digital colour formats and when HEX, RGB, or HSL is useful in design and development. This guide explains the core idea, practical ways to apply it, and common considerations to check before making a final choice.

HEX colour values

A HEX colour code represents red, green, and blue channel values using hexadecimal notation. A common six-digit form is #RRGGBB, where each pair ranges from 00 to FF. Some formats also support alpha transparency, such as #RRGGBBAA.

RGB values

RGB describes a colour using red, green, and blue channel values. In the common 8-bit form, each channel ranges from 0 to 255. RGB is useful for understanding how digital displays combine light to produce colours.

HSL values

HSL describes a colour using hue, saturation, and lightness. It can be easier to adjust a colour family or make a shade lighter while keeping the hue roughly consistent. HSL is a different representation of the same general RGB colour space in common CSS usage.

Choosing a format

HEX is compact and common in design specifications. RGB is useful when thinking about channel values or transparency. HSL can be convenient when generating related shades. Modern CSS also supports other colour functions, so check browser support and project requirements.

Frequently asked questions

What does a HEX colour code represent?

A HEX code represents channel values for a colour, commonly red, green, and blue in the #RRGGBB format.

Is HEX more accurate than RGB?

No. HEX and RGB can represent the same sRGB colour values in different notations.

What is HSL useful for?

HSL can make it more intuitive to adjust hue, saturation, and lightness independently.

Keep exploring

Browse more tools & resources guides or return to the ColourMatching.com home page for more practical colour resources.