All Tools VerseColour Picker
Colour Picker - visually or type HEX / RGB / HSL / HSV - all four stay in sync, with CSS4 syntax and per-format copy.
- Runs in your browser
- Nothing uploaded
- Free, no sign-up
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 Colour Picker
- 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.
Related Tools
Change Image Base Color →
Change Image Base Color with tint, hue-shift, or overlay modes and an intensity slider.…
Colour Blindness Simulator →
Colour Blindness Simulator 8 types of colour vision deficiency (protanopia/deuteranopia/tritanopia + anomaly + achromatopsia)…
Color Contrast Checker →
WCAG Contrast Checker - 2AA/AAA contrast between text and background. Pastes hex, shows live…
Color Converter →
Color Converter any colour between HEX, RGB, HSL, HSV, and CMYK. Accepts alpha and…
Colour Palette Extractor →
Extract dominant colours from any image with real k-means clustering. Frequency sort, hex/RGB/HSL, JSON/CSS/SVG…
Colour Palette Generator →
Colour Palette Generator | 6 harmony palettes - complementary, triadic, tetradic, analogous, monochromatic, split-complementary…
Convert Image to Color Mosaic →
Convert images to color mosaics - 4 tile shapes, color quantization, adjustable gaps. Free,…
Create Image With One Color →
Create solid color images at any size with optional alpha transparency. 8 quick presets.…
Create Two Color Image →
Create two-color patterns - stripes (H/V/diagonal), checkerboard, dots, hexagons, linear/radial gradient. Configurable scale +…
Extract Object By Color from Image →
Pick a color (or click on the image) and extract pixels matching it -…
Change WebP Color →
Change a colour inside a WebP image with tolerance control. Preview live, keep alpha,…
Emoji Picker →
Browse, search, copy emojis by category. Recent emojis remembered for the session. Free, offline,…