Guides / Color

HEX, RGB and HSL Color Codes Explained

Every color on a screen is a mix of red, green and blue light. HEX, RGB and HSL are three ways of writing the same color. They are interchangeable, so choose whichever one suits the job.

HEX

A HEX code such as #5B5BD6 is six digits in base 16. The first pair sets red, the second green and the third blue, each from 00 (none) to FF (full, which is 255). Three-digit codes such as #FFF are shorthand for #FFFFFF. HEX is compact and common in design tools and stylesheets.

RGB

RGB writes the same three channels as decimal numbers from 0 to 255, for example rgb(91, 91, 214). Adding a fourth value, as in rgba(91, 91, 214, 0.5), sets transparency. RGB is the easiest format to read when you are adjusting a single channel.

HSL

HSL describes a color the way people often think about it:

• Hue is the position on the colour wheel, from 0 to 360 degrees. Red is 0, green is 120 and blue is 240.
• Saturation is how strong or grey the colour looks, from 0% to 100%.
• Lightness is how bright it is, from 0% (black) to 100% (white).

HSL is useful for building palettes. To make a darker shade of a brand colour, keep the hue and saturation and lower the lightness.

Which one should you use?

• Use HEX when you copy a colour from a design tool.
• Use RGB when you need transparency or are working with code that expects channel values.
• Use HSL when you want to create lighter, darker or muted variations of one colour.

Try it yourself

The Color Converter updates all three formats at once. Pick a colour with the picker or type any value, then copy the one you need.