StylMorph logoStylMorph.

Image color picker

Click or tap an image to sample a pixel. See its HEX, RGB and opacity, refine the position with your keyboard, and copy the color code.

Pick a color
An eyedropper sampling yellow from a vase into a matching swatch.
Add your image

JPG, PNG, WebP · up to 10 MiB · 24 megapixels

Opening image…

Free · Your image stays in your browser.

Find the shade that belongs in your design

Sample an even patch

For a product color, start away from reflections and shadow edges. Compare two nearby pixels before choosing which color to use in your layout.

Copy a code for its next use

Use HEX for a CSS color or design field. RGB gives you the red, green and blue components separately for tools with three numeric inputs.

Check transparency before matching

A pixel from a transparent image can look lighter or darker on a different background. Check its opacity beside the coordinates before using the color on its own.

How it works

STEP 1

Open an image

Choose a photo, screenshot or graphic, or use the yellow and blue sample.

STEP 2

Pick a point

Click or tap a color in the image. With the image focused, use the arrow keys to move the selection. You can also enter X and Y coordinates.

STEP 3

Copy the code

Copy HEX or RGB and paste it into your design tool or stylesheet.

Frequently asked questions

Where do X and Y start?

The upper-left pixel is X 0, Y 0. X increases to the right and Y increases toward the bottom.

Does the picker use the full image?

Yes. The display fits the page, and sampling uses the corresponding pixel in the decoded source image.

Can I move one pixel at a time?

Focus the picture and use the arrow keys to move one pixel. Hold Shift to move ten pixels.

Why do nearby pixels have different colors?

Lighting, shadows and anti-aliased edges create small color changes. Sample inside a flat area when you want a steadier value.

What does opacity mean?

Opacity shows how much of the pixel is visible. A fully transparent pixel has 0% opacity and may show a zero RGB value after browser decoding.

What if the Copy button doesn’t work?

Select the HEX or RGB value and copy it using your device’s controls.

Which images can I pick from?

Use JPG, PNG or WebP files up to 10 MiB and 24 megapixels.

Does my image leave my device?

The browser reads the image and samples pixels on your device.

Related tools