Free Colour Picker Online
Colour Picker - visually or type HEX / RGB / HSL / HSV - all four stay in sync, with CSS4 syntax and per-format copy.
Pick a colour visually or type it in any format — HEX, RGB, HSL, HSV all stay in sync, with CSS4 syntax and per-format copy.
How to Use Free Colour Picker Online
- Click the large swatch (or focus it and press Enter/Space) to open your operating system's native colour picker - the OS picker drives all four text inputs underneath.
- Or type directly into any of the four inputs - HEX, RGB, HSL, or HSV. Whichever one you edit becomes the source of truth and the other three plus the swatch update immediately.
- Use CSS4 syntax if you prefer - space-separated
rgb(79 70 229)and the optional slash-alpha formrgb(79 70 229 / 0.5)are both accepted alongside the classic comma form. - Watch for the inline error: if you mistype one format (for example
#xyzorrgb(300, 0, 0)), a red banner names the field and the other three stay on their last valid value. - Copy any single format with the Copy button next to its input. A toast confirms exactly what was copied.
- Copy all four formats in one go with the primary button, or download a timestamped
.txtreport for pasting into design tickets or style guides. - Press
Ctrl+Enter(or⌘+Enteron Mac) for the quickest possible HEX copy, or hit Reset to return to the default indigo#4f46e5.
Frequently asked questions
Is my colour data secure?
Yes. Every conversion is a handful of arithmetic steps done in your browser – nothing is uploaded, cached, or tracked. You can disconnect the network and keep using the tool.
Is this colour picker free?
Yes, 100% free. No sign-up, no watermark, no daily limits, no premium tier.
Does this work offline?
After the page loads, yes. The HTML, CSS, and JavaScript are self-contained – once the page has loaded you can turn off Wi-Fi and keep picking colours indefinitely.
Which colour formats does it accept?
All four, both ways. You can enter 3-digit hex (#f00), 6-digit hex, RGB as rgb(59, 130, 246) or the CSS4 space-separated rgb(59 130 246), optionally with / 0.5 alpha, HSL in either comma or space form, and HSV in the same styles. Whichever one you type gets parsed and the other three are recalculated and displayed.
How do I open the operating system’s native picker?
Click the big coloured square on the left – or focus it with Tab and press Enter or Space. It forwards the click to a hidden <input type="color"> which opens whatever picker your OS provides (macOS colour panel, Windows eyedropper, Chrome on Linux, etc.).
What happens if I type an invalid colour?
An inline red error names the field that couldn’t be parsed (for example “Not a valid hex colour” or “RGB channels must be 0-255”). The other three fields and the swatch hold their last valid values so you never lose your place.
Are HSL and HSV rounded?
Yes – the displayed HSL and HSV values are rounded to whole numbers for readability, which means round-tripping through all four formats may drift a single unit on the least significant channel. For pixel-exact work, HEX and RGB are the sources of truth.
Can I copy just one format?
Yes. Each of the four inputs has its own Copy button that grabs only that string. The Copy-all button emits all four on separate lines with a HEX: / RGB: / HSL: / HSV: prefix and a timestamp, ready to paste into a design ticket.
What does the downloaded .txt file contain?
The same four lines produced by Copy-all – a timestamp header plus HEX:, RGB:, HSL:, and HSV: values. The filename is color-<hex>-<timestamp>.txt so you can save several colours side-by-side without overwriting.
Is there a keyboard shortcut?
Yes. Ctrl+Enter (or ⌘+Enter on macOS) copies the current HEX value from anywhere on the page – handy when you’ve just picked a colour and want to paste it into a CSS file without reaching for the mouse.