Skip to content
TinySolve

Color Picker

Pull the exact colour out of any image — as HEX, RGB or HSL, ready to paste.

Runs in your browser — your files are never uploaded

Drop an image here

or

JPG, PNG or WebP, up to 30 MB. The image is read on your device and never uploaded.

About the Color Picker

You have a screenshot of a design, a photograph with a colour you want to use, or a logo whose exact brand blue nobody can find written down. Tap the pixel and this gives you the value, in the three notations anyone actually pastes into code: HEX, RGB and HSL.

The reading comes from the image's own pixels, not from what the screen is showing. That distinction matters — the picture is scaled to fit the page, and sampling a scaled copy returns a blend of neighbouring pixels rather than the colour that is genuinely there.

Alongside the picker, the tool works out the handful of colours the image is mostly made of. It does that by grouping near-identical shades together and averaging within each group, so a photograph returns six usable colours rather than six thousand greys a pixel apart. Tap any of them to select it.

Each colour also shows its contrast against black and against white. If you are choosing a colour for text or a button, that number is the difference between a design that everyone can read and one that fails an accessibility audit: body text needs a ratio of at least 4.5:1.

The image is read on your device and never uploaded, so pulling colours from an unreleased design or an internal screenshot is safe.

How to use the Color Picker

  1. Add an image

    A screenshot, a photograph, a logo — anything your browser can display.

  2. Tap the colour you want

    Move over the image to preview, tap to lock it in. The value is read from the image's real pixels.

  3. Or take one from the palette

    The main colours in the picture are listed with the share of the image each covers. Tap one to select it.

  4. Copy the notation you need

    HEX for CSS and design tools, RGB for canvas and image code, HSL when you want to adjust the colour afterwards.

Frequently asked questions

Is the colour exact?
Yes. The reading comes from the image's own pixel data rather than from the scaled preview on screen, so it is the value that is genuinely in the file, not an average of nearby pixels.
When would I use HSL rather than HEX?
When you want to change the colour rather than just use it. HSL separates hue, saturation and lightness, so making a shade lighter or less vivid is one number. In HEX the same change means recalculating all three channels.
How are the palette colours chosen?
Near-identical shades are grouped together and averaged, then ordered by how much of the image each group covers. Counting exact values instead would return thousands of almost identical entries and no usable palette.
What does the contrast figure mean?
The WCAG contrast ratio against black and against white, from 1:1 to 21:1. Body text needs at least 4.5:1 against its background, and large text 3:1. It is the standard accessibility audits measure against.
Is my image uploaded?
No. It is drawn into a canvas in your browser and read from there, so nothing is transmitted — which matters if the screenshot is of something unreleased.

You may also need

Image to Base64

Turn an image into a data URI you can paste straight into CSS or HTML.

Image Tools

Image Converter

Convert between JPG, PNG and WebP — whatever you have, whatever you need.

Image Tools

Image Compressor

Make JPG, PNG and WebP files smaller without a visible drop in quality.

Image Tools

Image Resizer

Resize an image to exact pixel dimensions, with the aspect ratio locked or free.

Image Tools