Color Picker
Pick colours, sample any pixel on screen with the eyedropper, and convert between HEX, RGB and HSL.
What is the 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 is supported, and picked colours are saved to a local palette.
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. Live conversion keeps these representations synchronized rather than relying on separate manual calculations.
On Chrome, Edge and Opera, the EyeDropper API lets you sample any pixel on your screen.
How to use the Color Picker
- 1Drag inside the colour panel or enter a value directly.
- 2Adjust hue, saturation and lightness with the sliders.
- 3Click the format you need (HEX, RGB, HSL, HSV) to copy it.
- 4Use the eye-dropper icon to sample any pixel on screen (Chrome/Edge/Opera).
When to use the Color Picker
- 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 adjustments.
- Build a small local palette while comparing interface accent colours.
- Check whether black or white text provides the stronger contrast against a chosen colour.
Key features
- Live HEX / RGB / HSL / HSV conversion
- Alpha channel support
- EyeDropper screen sampling on supported browsers
- Saved palette in local storage
- Contrast check against black and white
Frequently asked questions
Which browsers support the eye-dropper?
Chrome, Edge and Opera. Safari and Firefox do not expose the EyeDropper API.
Are my picked colours saved anywhere?
Only in your browser's localStorage — never uploaded.
Why can the same colour look different on two screens?
Display calibration, brightness, colour profiles and ambient lighting affect appearance even when the numeric colour value is identical.
Does the contrast check guarantee accessibility?
No. It is a quick comparison against black and white. Verify the final foreground/background pair, font size and applicable WCAG threshold in the real interface.
All Utility
Tap any tool to jump straight in — no signup, works on mobile.