Color Picker & Converter
Pick any colour and instantly get HEX, RGB, and HSL values — with one-click copy for each format.
About the Color Picker
This tool provides a native browser colour picker backed by real-time format conversion. Select any colour using the picker or type a hex code directly, and the tool instantly calculates the equivalent RGB and HSL representations along with ready-to-use CSS custom property declarations.
All conversions happen in your browser using standard colour-space mathematics. No images or colour data are sent to a server.
Frequently Asked Questions
What colour formats does this tool output?
The tool outputs the selected colour in HEX (e.g. #3b82f6), RGB (e.g. rgb(59, 130, 246)), HSL (e.g. hsl(217, 91%, 60%)), and as CSS custom property declarations ready to paste into a stylesheet.
Can I enter a hex colour manually?
Yes. Type a 6-digit hex code (with or without the # prefix) into the hex input field and the colour picker and all output values will update automatically.
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is a degree on the colour wheel (0–360), saturation is a percentage of grey (0% = greyscale), and lightness is a percentage of black to white (0% = black, 100% = white). Many designers find HSL more intuitive than RGB.
Are the colours saved anywhere?
No. The colour picker is entirely client-side. Nothing is stored or transmitted.
Why does the hex input only accept 6-digit codes?
The HTML colour input used under the hood always works with 6-digit hex codes. 3-digit shorthand codes (e.g. #fff) are automatically expanded to their 6-digit equivalents.