Color Picker — Free Online HEX, RGB & HSL Tool
Click the swatch to open the colour picker
Or type a hex code below
Pick any color visually and get the HEX, RGB, and HSL values instantly. Click the color swatch to open the visual picker, or type a hex code directly. All three color format values update in real time with one-click copy buttons. Free, no signup, works in your browser.
Three steps. No setup.
Drop your content into the field above, or type directly into it. The tool starts working the moment you do — no button to press.
Everything is calculated locally in your browser as you type. No waiting, no uploading, no server involved.
Hit Copy to grab the result, or Download if the tool offers a file. Close the tab — nothing is stored.
Free, private, and built to last.
Colour Picker is a free online tool that runs entirely in your browser. No data is sent to any server — your input stays private on your device and disappears the moment you close the tab.
It is designed to be fast, simple, and accessible to everyone — whether you are a developer, marketer, student, or business owner. No signup, no ads, no nonsense. Just the tool, ready when you need it.
Frequently Asked Questions
HEX is a compact six-digit code (e.g. #FF5733) used in HTML and CSS. RGB defines color using three numbers from 0–255 for red, green, and blue (e.g. rgb(255, 87, 51)). HSL uses Hue (0–360°), Saturation (0–100%), and Lightness (0–100%) for more intuitive color adjustments. All three describe the same color in different formats.
Click the color swatch in this tool to open the visual color picker and select any color. The HEX value appears instantly in the output row below. You can also type a known hex code directly into the text field to see its RGB and HSL equivalents.
A hex color code (e.g. #4845D4) is made up of three pairs of hexadecimal digits: the first pair controls red (48), the second controls green (45), and the third controls blue (D4). Each pair ranges from 00 (none) to FF (maximum intensity).
Yes. CSS supports RGB directly: color: rgb(72, 69, 212); You can also use rgba() to add transparency: color: rgba(72, 69, 212, 0.5); for 50% opacity. Copy the RGB value from this tool and paste it directly into your stylesheet.
HSL (Hue, Saturation, Lightness) is easier to reason about than RGB when making design adjustments. To make a color lighter, increase the Lightness. To make it less vivid, decrease the Saturation. CSS supports HSL natively: color: hsl(220, 70%, 55%);