Color Picker Tool — Pick, Convert, and Copy HEX, RGB, HSL Colors Free
Pick any color and instantly get its HEX, RGB, HSL, and CMYK values. A free browser-based color tool for designers and developers — no uploads, no data sent anywhere.
Whether you’re a web developer matching a brand colour or a designer building a palette, you constantly need to move between colour formats. SimpleTools Color Picker gives you a full-featured colour tool that runs entirely in your browser — no account, no uploads, just instant colour values.
What Does the Color Picker Do?
- Pick any colour using an interactive colour wheel and sliders
- Enter a value in HEX, RGB, HSL, or CMYK and see all other formats instantly
- One-click copy for any format — paste directly into your CSS, design tool, or code
- Colour previews showing the selected colour in context
- Eyedropper integration on supported browsers to sample a colour directly from your screen
Understanding Color Formats
HEX
The most common format in web development — #FF5733 is red, green, blue in hexadecimal. Supported everywhere in CSS and most design tools.
RGB
rgb(255, 87, 51) — human-readable red/green/blue values from 0 to 255. Also supports an alpha channel as rgba(255, 87, 51, 0.8) for transparency.
HSL
hsl(11, 100%, 60%) — Hue, Saturation, Lightness. Much more intuitive for creating colour variations: to make a colour lighter, increase the L value. Used extensively in modern CSS.
CMYK
Cyan, Magenta, Yellow, Key (black) — the format used in print design and professional colour specifications.
Why Use a Browser-Based Color Tool?
Colour values are just numbers — no privacy risk in the traditional sense. But a browser-based tool has practical advantages:
✅ No page navigation — pick and copy without leaving your current project
✅ Works offline — no internet required after the page loads
✅ Instant conversion — all formats update simultaneously as you pick
✅ No ads or distractions — clean, focused interface
How It Works
The tool performs all colour space conversions using JavaScript math:
- HEX ↔ RGB: Simple hexadecimal parsing and formatting
- RGB ↔ HSL: Mathematical conversion using the standard colour space transformation formulas
- RGB ↔ CMYK: Conversion via the standard formulas normalised to 0–100% ranges
All calculations happen in your browser tab in real time as you move sliders or type values.
How to Use the Color Picker
- Visit simpletools.one/color-picker
- To pick a colour: drag the circle on the colour wheel, or move the hue slider
- To enter a specific colour: type into any of the HEX, RGB, HSL, or CMYK fields
- To sample from screen: click the eyedropper icon (Chrome and Edge) and click any pixel on your display
- Click Copy next to any format to copy the value to clipboard
Use Cases
- CSS development — pick a colour and copy the exact HEX or
hsl()value into your stylesheet - Design-to-code handoff — convert a design tool’s RGB value to HEX for CSS
- Brand colour management — cross-reference HEX codes with CMYK for print specs
- Accessibility checking — check contrast ratios between text and background colours
- Palette building — use HSL to systematically generate lighter/darker variations
Pro Tip: Use HSL for Consistent Palettes
To build a consistent colour palette, start with your base colour in HSL and vary only the Lightness component:
| Shade | HSL |
|---|---|
| Darkest | hsl(220, 70%, 20%) |
| Dark | hsl(220, 70%, 35%) |
| Base | hsl(220, 70%, 50%) |
| Light | hsl(220, 70%, 70%) |
| Lightest | hsl(220, 70%, 90%) |
This produces a harmonious scale because hue and saturation stay constant.
Start picking colours at simpletools.one/color-picker — free, instant, and fully private.