Which files can the color picker open?

Upload a JPG, PNG, WebP, or GIF. The canvas draws that file at its natural size. Convert a HEIC still to JPG or PNG first, then sample the converted file. The page has no separate size limit written into the tool.

Are the palettes pulled from colors in the photo?

The rows come from the color you selected. You get eleven shades mixed toward black and eleven tints mixed toward white, plus complementary, triadic, tetradic, analogous, and monochromatic sets from that hue. A multi-color photo still contributes the pixel you clicked.

Which color codes can I copy from a pixel?

The readout offers HEX, RGB, HSV, HSL, and CMYK for the pixel under the pointer. Copy the spelling your file already uses. Hover or click after you have lined the sample up in the magnifier so the code matches the fill you wanted.

How large is the color picker magnifier?

The magnifier shows an 11 by 11 block of pixels at 10 times size. Use it on fabric, small type, and anti-aliased edges. Click the middle of a flat color when the border between two areas would blend the reading.

Where is the contrast checker?

A WCAG contrast checker on the page compares a text color with the selected background. Sample the background from the photo, set a text hex, and read the contrast before you paste the pair into a design. The check runs in the browser with the rest of the tool.

Are HEX, RGB, HSV, HSL, and CMYK a separate picker?

They are codes for the same pixel on this page. After you sample a color, the selected swatch shows HEX and HSL, and the board lists RGB, HSV, HSL, and CMYK for that color. Copy the spelling your stylesheet or print notes already use. You do not open a second tool to translate the pixel.

What should I do with a HEIC photo before picking a color?

Convert the HEIC to JPG or PNG first. The picker file list is JPG, PNG, WebP, and GIF, so the converted still is the one to upload. After it opens, the canvas uses the natural pixel size and you can sample as usual.

Canonical Color Picker Tool

Color Picker: copy HEX, RGB, HSL, or CMYK

Selected color

HEX

HSL

Advanced pickers

Image canvas sampling · Interactive color board · Multi-format output

Image sampler

Drop image to sample colors

JPG, PNG, WebP, GIF

Color board

Hue217°

Color formats

HEX

RGB

HSV

HSL

CMYK

Color variations

Shades mix pure black · Tints mix pure white · Click to copy & apply

Shades (black mix)

Tints (white mix)

Color harmonies

Theory-based palettes from your selected hue

Harmony wheel

WCAG contrast checker

Background uses your globally selected color · Evaluate text readability

Text color (HEX)

Contrast ratio

3.68

Normal text

Fail

Small text

Fail

Large text

Pass AA

The quick brown fox jumps over the lazy dog

Sample body text on your selected background. Large text is typically 18pt+ regular or 14pt+ bold.

100% client-side · Canvas pixel sampling · No uploads

Written by Safaat Rahman Siham, Founder & Developer at Convertify4u. Contact us.

Upload a JPG, PNG, WebP, or GIF and click a pixel to read its color. The page copies HEX, RGB, HSV, HSL, and CMYK from that pixel, and the whole job stays in your browser. The canvas is drawn at the photo’s natural size, so the sample is the pixel in the file rather than a shrunk preview. Hover or click to read it. A magnifier shows an 11 by 11 patch at 10 times size, which helps when you are aiming at a thread, a logo edge, or a tiny UI fill. Convert a HEIC still to JPG or PNG before you bring it here, because the file chooser takes JPG, PNG, WebP, and GIF. Palettes on this page grow from the color you selected. You get eleven shades mixed toward black and eleven tints mixed toward white, plus harmonies from that same hue: complementary, triadic, tetradic, analogous, and monochromatic. They are mixes of the swatch you picked. A busy photo contributes the pixel you clicked. A WCAG contrast checker sits beside the swatch so you can compare a text color with that background. This page has no separate size box. Open the still the browser can decode.

One pixel, then the codes and mixes around it

A pixel read at the photo’s real size

Drop a JPG, PNG, WebP, or GIF. The canvas uses the image’s natural pixel size, and a hover or click reads the color under the pointer. The magnifier is an 11 by 11 window drawn at 10 times size, so a soft edge is easier to avoid. Convert HEIC to JPG or PNG first, then sample that file.

Shades, tints, and harmonies from your swatch

The page builds eleven shades and eleven tints from the selected color, then harmony sets from that hue: complementary, triadic, tetradic, analogous, and monochromatic. Those rows are mixes and hue shifts of the swatch you picked. They are a palette of that color, even when the photo contains many other colors.

Codes you can paste, plus a contrast check

Copy HEX, RGB, HSV, HSL, or CMYK for the pixel you sampled. The WCAG contrast checker compares a text color with the selected background so you can judge readability before you paste the pair into a stylesheet. Everything stays in the browser, and the page sets no file-size cap of its own.

How it works

1
Open a still the browser can show
Choose a JPG, PNG, WebP, or GIF. Convert a HEIC photo to JPG or PNG first, then upload that copy. The canvas opens at the picture’s natural size, and the file stays in this tab.
2
Aim with the magnifier
Hover or click the pixel you want. The magnifier shows an 11 by 11 patch at 10 times size. Click inside a flat area of color when the edge between two shades would mix the sample.
3
Copy a code or a related swatch
Copy HEX, RGB, HSV, HSL, or CMYK. If you need neighbors of that color, use the eleven shades, eleven tints, or a harmony built from the same hue. Check contrast when the color will sit under text.

Use cases

A hex code from a screenshot

Sample a button, a banner, or a chart color and paste HEX or RGB into your stylesheet. The magnifier keeps you off the anti-aliased edge where two colors blend.

A set of tints from one brand color

Pick the brand pixel, then take shades and tints from that swatch, or a complementary, triadic, tetradic, analogous, or monochromatic set. The set follows the color you selected.

A contrast check before you ship type

Put the sampled background next to a text color in the WCAG contrast checker. Adjust the text hex until the pair looks readable, then copy both values.

Problems we solve

The sample keeps changing by a shade

JPEG blocks and soft edges mix neighboring pixels. Zoom with the 11 by 11 magnifier and click a flatter area. Two nearby clicks that disagree are usually compression, so pick the fill you meant.

A HEIC photo never appears in the chooser

The picker accepts JPG, PNG, WebP, and GIF. Convert the HEIC to JPG or PNG first, then drop that file. The canvas will show it at its natural size.

Specialized color picker guides

Trust & technology

The photo stays in the tab

Sampling is entirely in the browser. The canvas, the magnifier, the codes, and the contrast check all read the local image. Close the tab when you are done and the working bitmap goes with it.

The palette follows the click

Eleven shades, eleven tints, and the harmony sets start from the selected color. You get a precise pixel reading plus mixes of that swatch, which is the job this page is built for.