One colour, three notations
Every colour on a screen is a mix of red, green and blue light, and the three notations this tool shows are just different ways of writing that mix down. Hex is the compact form you will meet in CSS files and brand guidelines: six base-16 digits, two per channel. RGB spells the same three numbers out in ordinary decimal, from 0 (none of that channel) to 255 (all of it). HSL steps back and describes the colour the way a person would: which hue it is (an angle from 0 to 360 around the colour wheel), how saturated it is, and how light it is.
To convert a hex pair by hand, multiply the first digit by 16 and add the second, remembering that A to F stand for 10 to 15. So 8A is 8 × 16 + 10 = 138. The picker does all three conversions live as you drag, so you can grab whichever format your project needs.
Worked examples
Why HSL is the useful one
Hex and RGB are fine for storing a colour, but hopeless for changing one. If you want a darker shade of your brand green, there is no obvious way to see it in #1F8A70. In HSL the same colour is roughly hsl(165, 63%, 33%), and now the controls make sense: lower the lightness for a darker shade, lower the saturation for something more muted, nudge the hue and it becomes more blue or more yellow. That is why design systems increasingly define their palettes in HSL, and why the lightness formula is worth knowing:
where the channels are expressed as fractions of 255. A colour whose strongest channel is at full and weakest at zero always sits at 50% lightness, which is where colours look most vivid.
Screens lie a little
A hex code is an instruction to a screen, not a promise about what your eye receives. Two monitors showing #1F8A70 can emit noticeably different light depending on their panel, brightness and colour profile, and a phone with night mode on will warm everything up. For web work this rarely matters, because the code itself is the shared reference that every browser agrees on. If you are matching printed material, though, be careful: print uses CMYK inks and a different gamut, so pick colours under the lighting they will actually be seen in, and treat on-screen previews as a guide. When you need to check that text will stay readable on a background you have picked, run the pair through a contrast checker before committing to it.
Frequently asked questions
How does the colour picker work?
Click the large colour swatch and your browser opens its native picker, with a spectrum, sliders and often an eyedropper. As you choose, the tool converts the selection to hex, RGB and HSL and shows all three with copy buttons.
What is the difference between hex, RGB and HSL?
They are three ways of writing the same colour. Hex packs the red, green and blue values into six base-16 digits, RGB lists them in decimal from 0 to 255, and HSL describes the colour as hue, saturation and lightness, which is easier for humans to adjust.
Can I pick a colour from an image or a website?
In Chrome and Edge the native picker includes an eyedropper that can sample anything on screen. For images there is a dedicated image colour picker on this site: upload a photo and click any pixel to read its colour.
Why does the same hex code look different on another screen?
A hex code is an instruction, not a guarantee. Every screen has its own brightness, colour temperature and calibration, so the light it actually emits varies. For colour-critical work designers use calibrated monitors, but for the web the code is the shared truth.
Can I pick a transparent colour?
The native picker returns solid colours only. To add transparency, take the RGB values and use the rgba() form, for example rgba(31, 138, 112, 0.5) for 50% opacity, or append an alpha pair to the hex code, where 80 is roughly 50%.