Pick any colour and get its HEX, RGB and HSL values instantly. Click a value to copy it for your designs and stylesheets.
Click a value to copy it:
How to Use
- Use the colour swatch control to pick any colour visually.
- Or type a hex code directly into the text field.
- Read the HEX, RGB and HSL values instantly.
- Click any value to copy it to your clipboard.
Key Features
- Live preview — a large swatch shows your colour as you pick.
- HEX, RGB and HSL — all three formats calculated instantly.
- Click to copy — grab any value for your stylesheet.
- Hex input — paste a code to inspect an existing colour.
- 100% private — runs entirely in your browser; nothing is sent or stored.
FAQs
What is the difference between HEX, RGB and HSL?
HEX is a six-digit code used in CSS, RGB sets red, green and blue levels from 0 to 255, and HSL describes hue, saturation and lightness — which many designers find more intuitive.
How do I use these values in CSS?
Paste them straight into your stylesheet, for example color: #0F766E; or background: rgb(15, 118, 110);. Click a value here to copy it.
Can I enter a 3-digit hex code?
Please use the full 6-digit form, such as #0F766E. The colour picker control always produces 6-digit codes.
Why does the HSL value matter?
HSL makes it easy to create lighter or darker shades: keep the hue and saturation, then adjust the lightness percentage.
Related Tools
Try these related tools: Color Palette Generator, Hex RGB Converter and Random Color Generator.