Color Picker
← All toolsDrag the sliders or open the native color picker to land on a color, and hueshift shows you the HEX, RGB, HSL and ready-to-paste CSS for it at the same time. Everything updates as you move — there's no separate “convert” step.
HEX#8b5cf6
RGBrgb(139, 92, 246)
HSLhsl(262, 83%, 66%)
CSSbackground-color: #8b5cf6;
How to use the Color Picker
- Click the color swatch to open your browser's native picker, or drag the Hue, Saturation and Lightness sliders.
- Watch the HEX, RGB, HSL and CSS values update live below the preview.
- Click Copy next to any value to put it straight on your clipboard.
- On supported browsers, use “Pick from screen” to sample a color from anywhere in the browser window with the EyeDropper tool.
FAQ
- Does this work offline?
- Yes — once the page has loaded, the picker runs entirely in JavaScript in your browser. No color ever leaves your device.
- Why does my copied HSL look different from a design tool I use?
- Some tools store hue in radians or use different rounding. hueshift rounds to whole degrees and percentages, which matches CSS's own hsl() syntax.
- Can I paste in a value instead of using the sliders?
- Yes — the color swatch itself accepts typed input in supporting browsers, or use the Color Converter for typing HEX, RGB or HSL directly.
- Is the “Pick from screen” eyedropper available everywhere?
- It uses the browser's EyeDropper API, currently supported in Chromium-based browsers. The button only appears when your browser supports it.