HEX, RGB and HSL: Understanding Colour Formats
The same colour can be written three different ways in CSS, and which one you meet depends entirely on where it came from. Design tools hand you one, brand guidelines another, and the code you are editing a third. The Colour Picker shows you all three at once.
What each format actually says
HEX is six characters after a hash, like #2563EB. The first two are red, the next two green, the last two blue, each from 00 to FF. It is compact and it is what most brand guides quote, but you cannot read it - nobody looks at #2563EB and pictures a blue.
RGB says the same thing in decimal: rgb(37, 99, 235). Identical information, easier to read, and it gains a fourth value for transparency as rgba.
HSL describes the colour the way a person would. Hue is a position on a 360-degree wheel, saturation is how vivid it is, lightness is how close to white or black. hsl(221, 83%, 53%) is the same blue again.
Why HSL is worth the trouble
Because it is the only one you can edit by hand and predict the result. Need a lighter version of a button colour for its hover state? In HSL you raise the lightness and nothing else changes. In HEX you are guessing at six characters, and the guess usually shifts the hue as well as the brightness.
That single property is why design systems are increasingly written in HSL. One hue, a handful of lightness steps, and the whole palette stays in tune.
Which to use
Whichever the project already uses - consistency beats preference. If you are starting fresh, HSL for anything you will adjust, HEX for anything you are copying from a brand document and never touching again. To move between them, the Colour Converter translates in both directions.
Where each one turns up
Knowing the format tells you something about where a colour came from. HEX is what brand guidelines, logo files and most design handovers use, because it is compact and unambiguous to copy. RGB is what image editors and screen-capture tools report, since it maps directly onto how a display actually works. HSL turns up mostly in CSS written in the last few years, and in design systems where the shades are generated rather than chosen one at a time.
Mixing them in one stylesheet is legal and makes the file hard to read. If you inherit a project that uses two, converting as you touch each rule is usually less disruptive than changing them all at once.
Common questions
Is one format more accurate than another?
No. All three describe exactly the same range of colours. Only the readability differs.
What are the three-character hex codes?
Shorthand. #F00 expands to #FF0000, each character doubled. Handy for simple colours, useless for most real ones.
Do browsers treat one format as faster?
No. All three are parsed into the same internal value, and the difference is unmeasurable.
What about the newer colour formats?
CSS now supports wider-gamut notations for displays that can show more colours than sRGB. They are worth knowing about, but HEX, RGB and HSL remain what almost every project uses.
Want to see a colour in all three formats at once?