Pick a colour and read its HEX, RGB and HSL codes side by side. Change any one of them and the other two follow straight away, so a colour written down in one notation becomes usable in the others. Copy whichever code you need with one click — no sign-up, nothing to install, no file to upload.
RGB
HSL
#0f766ergb(15, 118, 110)hsl(175, 77%, 26%)A colour rarely arrives in the notation the code expects. A hand-off gives you #0f766e, the stylesheet you are editing wants rgb(), and the person reviewing the artwork is thinking “a bit lighter”. Those are the same colour written three ways, and doing the arithmetic by hand is exactly the kind of small task that goes wrong without anyone noticing.
This page keeps all three in step. Move the swatch, retype a hex code, nudge one channel number or turn the hue, and the others follow at once — so you copy out the version your file needs instead of converting anything yourself.
| Notation | Where you meet it |
|---|---|
| HEX | #0f766e — six digits, two per channel. The default in design hand-offs, CSS variables and swatch libraries: short, exact, easy to paste into anything. |
| RGB | rgb(15, 118, 110) — the three channels as 0–255 values. Common in older CSS, in graphics APIs, and wherever a colour has to be computed rather than typed. |
| HSL | hsl(175, 77%, 26%) — hue, saturation, lightness. The one to use when you want to derive a colour: same hue and saturation with less lightness gives you a darker version that still reads as related. |
Every other tool here takes a file; this one takes a decision. There is no image to decode and no worker to start, so the whole interaction is arithmetic on numbers you can see on screen — which is also why it stays instant on a phone.
One behaviour is worth knowing, because it looks like a bug and is not: hue has no meaning for grey. Lower the saturation to zero and the colour becomes grey while the hue value stays where you left it, so raising the saturation again brings back the colour you meant instead of resetting to red.
Open the swatch on the left to choose a colour, or type a code straight into the HEX field. Everything else follows: the RGB channels, the HSL channels and the three code strings below all describe the same colour. Change any one of them and the rest update, so you can copy out the notation your file expects.
They are three ways of writing the same colour. HEX packs the three channels into six hexadecimal digits (#0f766e) and is what most design hand-offs and CSS variables use. RGB gives those channels as three numbers from 0 to 255. HSL describes the colour the way people talk about it — hue in degrees, saturation and lightness as percentages — which makes it the useful one when you want the same colour a little darker rather than a different colour.
Yes, into the HEX field. Three digits (#f00) and six digits (#ff0000) both work, with or without the leading hash, in upper or lower case. A code with eight digits is not accepted: the last two would be transparency, and this tool would rather say it does not recognise the code than quietly drop the two digits you pasted.
Each channel has a real range: 0–255 for red, green and blue, 0–100% for saturation and lightness, and 0–359 degrees for hue. A value outside its range snaps to the nearest allowed one once you leave the field, because a colour cannot be brighter than 255. Hue wraps instead of clipping — 360 degrees points the same way as 0 — so typing 400 gives you 40.
Free, with no account. Converting between these notations is a handful of arithmetic operations, so the page does it itself. There is no file to upload and no colour code of yours is sent to a server.
Shrink photos to an exact target size — right in your browser.
Resize images by percent, longest edge or exact box.
Open iPhone HEIC photos anywhere — convert them to JPG.
Turn WebP images into JPGs that open everywhere.
Convert JPGs to WebP for smaller, faster-loading files.
Render SVGs to crisp PNGs at exactly the size you need.
Turn AVIF images into JPGs that open everywhere.
Turn PNGs into smaller WebP files with transparency intact.
Render SVGs to JPGs at the right size, flattened onto white.
Join several images into one long picture, stacked or side by side.
Stamp your name on photos — one corner or tiled across the image.