Color Picker

Pick a colour and get its code in HEX, RGB and HSL.

Choosing a colour and reading its code

A colour picker lets you select a colour visually and read its value in the formats you need for code. This gives you a colour's HEX, RGB and HSL codes as you pick, so you can grab exactly the shade you want and drop it straight into a stylesheet or design tool.

Pick a colour to see its codes.

Three ways to read the same colour

Having the colour in several formats is handy because each is suited to different tasks. HEX is the compact code you paste most often. RGB spells out the red, green and blue mix, useful when you need the channels or want to add transparency. HSL describes the colour as hue, saturation and lightness, which is far friendlier when you want to adjust it — nudge the lightness for a shade, shift the hue for a related colour. Picking visually and reading all three means you can choose by eye and then work with whichever representation the job calls for, which is exactly how colour tends to be used in practice.

Common questions

What formats does the picker give?

HEX, RGB and HSL — the same colour in each, so you can use whichever your stylesheet or tool needs.

Which format is easiest to adjust?

HSL — because it describes hue, saturation and lightness, you can nudge the lightness for a shade or shift the hue for a related colour intuitively.

Is anything uploaded?

No. It runs entirely in your browser.

More Color & Design tools