Three ways of writing the same colour
A colour on screen can be described in several notations, and different tools prefer different ones. Design software tends to show HEX, CSS is written in any of the three, and colour manipulation is far easier in HSL. Converting by hand is tedious, so this tool does it live: change any value and the others update immediately.
HEX
The hexadecimal notation packs red, green and blue into six characters, two per channel, each ranging from 00 to FF. It is compact and is what most design tools display by default. The three-character shorthand expands each character to a pair, so the short form of a colour is equivalent to the six-character version with each digit doubled.
Its drawback is that it is opaque to reasoning. Looking at a hex code tells you very little about whether the colour is light or dark, or what would happen if you wanted it slightly less saturated.
RGB
RGB states the same three channels as decimal numbers from 0 to 255. It maps directly onto how a display actually works, mixing red, green and blue light additively. It is marginally more readable than hex but shares the same weakness: adjusting a colour means changing three numbers whose relationship to the visual result is not obvious.
HSL, and why designers prefer it
HSL describes a colour as hue, saturation and lightness. Hue is a position on the colour wheel from 0 to 360 degrees, where 0 is red, 120 is green and 240 is blue. Saturation runs from grey to fully vivid. Lightness runs from black through the pure colour to white.
This is far more useful for design work because each value corresponds to something you can reason about. Building a set of tints and shades for a palette means holding hue and saturation constant and varying lightness. Finding a complementary colour means adding 180 to the hue. Neither operation is expressible in hex or RGB without conversion, which is exactly why the shade strip below the preview on this page is generated in HSL.
A note on accessibility
Converting between notations does not change the colour, so it does not change how readable text will be against it. If you are choosing colours for an interface, check the contrast ratio between your text and background separately. The widely used standard requires a ratio of at least 4.5 to 1 for normal body text, and 3 to 1 for large text.
Frequently Asked Questions
Which format should I use in CSS?
All three work identically in every modern browser. HEX is most common in existing codebases, but HSL is easier to work with when you need to generate variations of a colour systematically.
What does the three-character hex shorthand mean?
Each character is doubled to form the full six-character value, so a three-digit code is simply a compact way of writing certain six-digit codes.
Why do designers prefer HSL?
Because its three values map to things you can reason about. Making a colour lighter means changing one number, rather than recalculating three unrelated channel values.
Does converting between formats change the colour?
No. All three notations describe exactly the same colour; only the way it is written changes. Rounding in HSL can occasionally shift a value by one unit on a round trip.
What are the shades below the preview?
Variations of your colour at different lightness levels, holding hue and saturation constant. Click any of them to select it.