Colour Picker & Converter
Pick a colour or type a HEX, RGB, or HSL value — every field updates live, including alpha transparency.
Last updated
How to convert a colour between HEX, RGB and HSL
- Pick a colour, or type a HEX, RGB or HSL value and press Enter.
- Adjust the opacity if you need transparency.
- Click Copy beside the format you need.
About this tool
Every field represents the same colour and stays in sync: drag the picker or the opacity slider, or type directly into the HEX, RGB, or HSL field and press Enter or click away to apply it. HEX accepts 3, 4, 6, or 8 digit forms (with or without a leading #) — 4 and 8 digit forms include an alpha channel. RGB and HSL accept both the full CSS function syntax (rgba(34, 85, 221, 0.5), hsla(224, 78%, 50%, 0.5)) and bare comma-separated values.
HSL conversion uses the standard sRGB formulas, rounding to whole degrees and percentages — converting back and forth repeatedly can shift a value by a point or two due to that rounding, which is normal and not a bug. Nothing you enter here is sent to a server; the entire tool runs as JavaScript in your browser tab.
Questions about colour codes
How do I convert HEX to RGB?
Each pair of hex digits is one channel from 00 to FF (0 to 255). #2255DD is red 34, green 85, blue 221: rgb(34, 85, 221). Type it in and every format updates.
What is HSL?
Hue (the colour, 0–360°), saturation (how vivid, as a percentage) and lightness (from black to white). It’s easier than RGB for making lighter or darker shades of the same colour.
How do I add transparency to a HEX colour?
Use 8 digits: the last two are the alpha. #2255DD80 is about 50% opaque. Move the opacity slider and the HEX, RGB and HSL values all include it.
Why does a value change slightly when I convert back and forth?
HSL is rounded to whole degrees and percentages, so a round trip can shift a value by a point or two. That’s normal.