Color Picker
Pick colors from a color wheel or any image - get HEX, RGB, HSL and CSS color codes instantly
Color picker
Preview
Pick from image
Get the Exact Hex Code Behind a Color in a Screenshot
Two ways to land on a color here: the native browser color-wheel input for picking one from scratch, or dropping an image and reading pixels straight out of it. The image route draws your upload onto a hidden canvas at up to 640px wide, then every mouse movement reads back the RGB values of the exact pixel under the cursor with getImageData, converting them live to hex, RGB, and HSL. That's a genuinely different feature from a plain color wheel: it lets you match a brand's exact blue from their logo file, or pull the precise background color out of a screenshot, rather than eyeballing it and hoping the swatch you pick looks close enough.
Once a color is selected, whether from the wheel or from an image pixel, eight formats are shown side by side: HEX, RGB, HSL, the individual R/G/B channel values, a ready-to-paste CSS custom property, and a Tailwind-style bg-[#HEX] utility class. Each has its own one-click copy button. HSL is computed from the RGB values using the standard hue/saturation/lightness conversion math, which matters if you're trying to programmatically lighten or darken a color, since nudging the L value in HSL is far more predictable than adjusting R, G, and B by hand. Every color you click from an image is kept in a running history of up to twelve swatches so you can compare several picks side by side before deciding which one to use.
How to Use
- 1
Pick a starting color
Click the swatch to open your browser's native color picker, which updates every code format instantly.
- 2
Or drop an image to sample from
Upload any image into the 'Pick from image' panel. It renders onto a canvas so individual pixels can be read.
- 3
Hover to preview, click to lock it in
Moving your cursor over the image previews the color under the pointer live; clicking sets it as the active color and adds it to your history.
- 4
Copy whichever format you need
HEX, RGB, HSL, individual channel values, a CSS variable, or a Tailwind class are each one click away from your clipboard.
- 5
Revisit past picks in the history strip
Every color you've clicked from an image stays available as a swatch below, up to the last twelve, for quick reuse or comparison.
Key Features
- →Sampling from an image is pixel-exact, useful for matching a brand's logo color rather than guessing at a similar-looking swatch.
- →HSL is the easier format to work with when you need a lighter or darker version of the same color, since only the L (lightness) value needs to change.
- →The Tailwind-style output (bg-[#HEX]) is meant for Tailwind's arbitrary value syntax, drop it straight into a className string.
- →Large images are automatically scaled down to 640px wide for the picker canvas, so exact pixel coordinates shift slightly from the original file's resolution.
- →Keep a few reference colors in the history strip while designing, so you can compare a new pick against ones you've already sampled without re-uploading anything.
Frequently Asked Questions
Can I get the exact color from a specific pixel in a photo or screenshot?
Yes. Drop the image into the 'Pick from image' panel, hover to preview the color under your cursor in real time, and click to lock in that exact pixel's value across every code format.
What's the practical difference between HEX and HSL for the same color?
They describe the identical color using different math: HEX/RGB store red, green, and blue channel intensities, while HSL separates hue, saturation, and lightness, which makes lightening or darkening a color a single-value change instead of adjusting three.
Does the image color picker upload my photo anywhere?
No. The image is drawn to a canvas element entirely inside your browser, and pixel colors are read locally with getImageData. Nothing about the image or the colors you pick is sent anywhere.
How many colors can I keep in the picked-colors history?
The last twelve distinct colors you've clicked from an image are kept as swatches, with the most recent pick shown first. Picking a duplicate color moves it back to the front instead of adding a repeat.
What format should I use for a Tailwind CSS project?
The Tailwind-style entry (formatted as bg-[#HEX]) is built specifically for Tailwind's arbitrary-value utility syntax and can be pasted directly into a className.
Last updated: June 2026