Color Picker
Pick colours, sample any pixel on screen with the eyedropper, and convert between HEX, RGB and HSL.
About Color Picker
The Color Picker lets you choose a colour visually and copy it in the format you need — HEX, RGB, HSL or HSV — with live conversion between all four as you drag. Alpha (transparency) is supported, and picked colours can be saved to a local palette for quick reuse.
HEX and RGB are common in CSS and design handoff, while HSL and HSV make hue, saturation and lightness/value adjustments easier to reason about when building themes. Live conversion keeps every representation synchronized so you do not need separate calculators.
On Chrome, Edge and Opera, the EyeDropper API lets you sample any pixel on your screen — useful for matching a brand colour from a mockup, screenshot or live site without guessing.
How Color Picker works in practice
- 1Drag inside the colour panel or type a known value directly.
- 2Fine-tune hue, saturation and lightness with the sliders.
- 3Adjust alpha if you need a semi-transparent colour.
- 4Click the format you need (HEX, RGB, HSL or HSV) to copy it.
- 5Optionally use the eye-dropper icon to sample a pixel on screen (Chrome, Edge or Opera), then save favourites to the local palette.
Jobs this tool is built for
- Sample a brand colour from an on-screen mockup and copy its HEX value into CSS.
- Convert an RGB design specification into HSL for easier theme token adjustments.
- Build a small local palette while comparing interface accent colours.
- Check whether black or white text provides stronger contrast against a chosen background colour.
What you can do here
- Live HEX / RGB / HSL / HSV conversion
- Alpha channel support
- EyeDropper screen sampling on supported browsers
- Saved palette in local storage
- Quick contrast check against black and white
Limits and honest caveats
- EyeDropper sampling requires a Chromium-based browser that exposes the EyeDropper API; Safari and Firefox do not support it the same way.
- Palette colours are stored only in this browser's localStorage and are never uploaded.
- The contrast helper is a quick black/white check — verify final WCAG contrast for real text sizes and UI states.
Common questions about Color Picker
Which browsers support the eye-dropper?
Chrome, Edge and Opera. Safari and Firefox do not expose the EyeDropper API in the same way.
Are my picked colours saved anywhere?
Only in your browser's localStorage on this device — never uploaded to ToolSink servers.
Why can the same colour look different on two screens?
Display calibration, brightness, colour profiles and ambient lighting affect appearance even when the numeric value is identical.
Does the contrast check guarantee accessibility?
No. It is a quick comparison against black and white. Confirm the final foreground/background pair, font size and applicable WCAG threshold in the real interface.
Which format should I copy for CSS?
HEX and RGB(A) are the most common. Prefer HSL when you want to adjust lightness systematically for hover states or dark-mode variants.
This page was written by the ToolSink team to explain how Color Picker works on this site — it is not syndicated, scraped, or spun from another publisher. How we write tool guides · Site updates · About ToolSink.
All Utility
Tap any tool to jump straight in — no signup, works on mobile.