Color Picker is now live on Tools.Town — a clean, visual color selection tool that gives you HEX, RGB, and HSL values for any color you choose, with a gradient canvas, hue slider, and opacity control.
Click the spectrum, drag the hue slider, and copy the value in whatever format your code needs.
What Does It Do?
Visual Selection
A two-axis gradient canvas lets you move between light and saturated shades within any hue.
Hue & Opacity
Dedicated sliders for hue (0–360°) and opacity (0–100%). All outputs update in real time.
Multi-Format
Get HEX, RGB, HSL, and rgba/hsla values. Copy any format with one click.
On supported browsers, the eyedropper tool lets you sample any color directly from your screen — great for matching colors from screenshots or designs.
How It Works
Click the canvas
Click or drag anywhere on the gradient canvas to select a saturation and lightness for your current hue.
Adjust the hue
Drag the hue slider to move through the full color spectrum from red to violet.
Copy any format
Click any output field (HEX, RGB, HSL) to copy that value directly to your clipboard.
Why We Built It
Designers work in Figma, developers work in code, and the two worlds constantly hand off color values. A reliable color picker that outputs all three major CSS formats — and has an eyedropper for sampling from anywhere on screen — eliminates the friction of that translation step.
Try It Now
Color Picker
Select any color visually and get HEX, RGB, and HSL values instantly. Opacity slider and eyedropper included.
See all color tools — Color Converter, Color Palette Generator, and Contrast Checker.
Related Posts
Frequently Asked Questions
Can I enter a color value directly?
Does it support transparency / alpha?
Can I pick a color from my screen?
Explore more on Tools.Town Blog
Finance guides, tool launches, and engineering stories — updated weekly.