CodeKitHubWhat Is This Tool?
A color picker turns a visual choice — this shade of blue, that exact pixel in a logo — into the numeric codes software understands. The same color has several equivalent notations: HEX (#3b82f6) dominates CSS and design handoffs, RGB (59, 130, 246) matches how screens and code represent color, and HSL (217°, 91%, 60%) describes hue, saturation and lightness in a way humans can reason about.
The second half of the tool is an image eyedropper. Upload a screenshot, logo or photo and click any point to sample the color under the cursor — the standard way to answer "what exact color is this?". Where the browser supports the EyeDropper API the native magnified loupe is used; in other browsers the tool reads the pixel value from a canvas copy of the image. In both cases processing is local: the image is never uploaded.
Why Use It?
- Three formats at once: every picked color is shown as HEX, RGB and HSL simultaneously, each with a one-click copy button — no separate conversion step.
- Pick from an image: upload any picture and click to sample the exact pixel color — ideal for extracting brand colors from a logo or matching a color seen in a screenshot.
- Uses the browser's native EyeDropper with magnifier when available, and falls back to precise canvas pixel reading everywhere else.
- A live preview swatch shows the current color at a glance, so you can verify the pick before copying.
- Free, instant and fully local: colors are computed and images are read in your browser — nothing is uploaded, stored or logged.
How to Use
- Pick a color with the color field, or paste/edit a value directly.
- To sample from a picture, upload an image and click the point whose color you want.
- Read the HEX, RGB and HSL values, shown together with a live preview swatch.
- Click the copy button next to the format you need — HEX for CSS, RGB or HSL for code.
Example
Input
Clicking the blue area of an uploaded logoOutput
HEX #3b82f6 · RGB rgb(59, 130, 246) · HSL hsl(217, 91%, 60%)All three lines describe the identical color. Use HEX in stylesheets and design tools, RGB where code expects channel values, and HSL when you want to derive lighter or darker variants by changing only the last number.
Which color format for which job
Modern CSS accepts all three everywhere a color is allowed, so the choice is about workflow, not compatibility. Teams typically standardize on HEX in design tokens, then use HSL while exploring variations — change the lightness by 10–15 points to get a usable hover state without shifting the hue.
| Format | Example | Best for |
|---|---|---|
| HEX | #3b82f6 | CSS, design tools, sharing colors in chat and specs |
| RGB | rgb(59, 130, 246) | Code that manipulates channels, canvas drawing, rgba() transparency |
| HSL | hsl(217, 91%, 60%) | Making lighter/darker/hover variants, building palettes |
From picked color to finished CSS
Sampling a color is usually step one of a styling task. If you need the same color in other notations — CMYK for print or an OKLCH value for wide-gamut CSS — the Color Converter continues where this picker stops.
The picked color often goes straight into a visual effect: the Box Shadow Generator takes a HEX value for realistic shadows, and rounded cards built with the Border Radius Generator complete the look.
→ Color Converter · Box Shadow Generator · Border Radius Generator
Frequently Asked Questions
What's the difference between HEX, RGB and HSL?
They are three notations for the same color model. HEX packs the red, green and blue channels into six hexadecimal digits (#3b82f6) and is the most common form in CSS and design tools. RGB lists the same three channels as decimal numbers from 0 to 255. HSL re-expresses the color as hue (0–360°), saturation and lightness — far more intuitive when you want "the same color, just lighter". Converting between them never changes the color.
How does picking a color from an image work?
The uploaded image is drawn onto an invisible canvas in your browser. When you click, the tool reads the red, green and blue values of the pixel at that exact position and converts them to HEX, RGB and HSL. In browsers that support the EyeDropper API (Chrome and Edge on desktop), a native magnifying loupe opens instead so you can pick with pixel precision anywhere on screen.
Is my image uploaded anywhere?
No. The image is opened directly by your browser and read locally from a canvas; no file and no color data is ever transmitted or stored. You can load the page, go offline, and both the picker and the image eyedropper keep working — which makes it safe for unreleased designs and internal screenshots.
Why doesn't the picked color exactly match what I see on screen?
Two common reasons. Anti-aliasing: pixels at the edges of text and shapes are blended with the background, so clicking one pixel off gives an in-between color — sample from the solid middle of an area instead. Color management: JPG/PNG files with unusual color profiles can render slightly differently across displays; the tool reports the pixel value as stored in the file, which is the value you want for design work.
Which format should I copy for CSS?
HEX is the safest default — every browser and tool accepts it. Use HSL when you plan to create hover or dark-mode variants, because adjusting only the lightness component keeps hue and saturation consistent. RGB is mainly useful when code builds colors from numeric channels, or when adding transparency, where rgba(59, 130, 246, 0.5) reads more clearly than an eight-digit HEX.