Color Picker
Pick a color and get its HEX, RGB, and HSL values.
🔒 Runs entirely in your browser — nothing is uploaded.
How Color Picker works
How does the color picker work?
You choose a color from the browser's native <input type="color"> swatch, or grab one straight off your screen with the EyeDropper API. From that HEX value, the tool bit-shifts out the red, green, and blue bytes, then runs the standard min/max luminance formula to derive the equivalent HSL values, all recalculated live as you pick.
When would I use this tool?
It is useful for pulling an exact color from a design mockup, screenshot, or another application on screen, then getting that color in HEX, RGB, and HSL notation to paste straight into CSS.
Why is the "Pick from screen" button sometimes missing?
It only appears when window.EyeDropper exists, which today means Chromium-based browsers like Chrome and Edge. Firefox and Safari have not implemented the EyeDropper API yet, so the button is hidden and you are left with the standard color swatch.