Image Color Picker Free color picker from image

How to use this color picker from image files

Getting an exact color out of a picture usually means opening a design app. This page does the same job in the browser. Load a photo, a screenshot or a logo, move the pointer over it and watch the magnifier: it shows the pixels under the cursor at 12x zoom with a crosshair on the one you will pick. Click, and the color lands in the panel on the right with every common code ready to copy. On a phone, touch and drag: the magnifier floats above your finger, and the color is picked when you let go. With a keyboard, focus the image and use the arrow keys, then press Enter.

Your image is never uploaded. The file is decoded by your own browser and read from a local canvas, which is why the tool works offline once the page has loaded and why it is safe for screenshots of private work.

HEX, RGB, HSL, HSV and CMYK: which code do you need?

• HEX (#3D8BFF) is the short form used in CSS, Figma, Canva and most web tools.
• RGB (rgb(61, 139, 255)) lists the red, green and blue light values from 0 to 255. Same color as HEX, written in decimal.
• HSL describes hue, saturation and lightness. It is handy when you want a lighter or darker version of the same color: change only the last number.
• HSV (also called HSB) is the model behind most color picker squares in design software.
• CMYK is for print. The value here is a plain conversion from screen color. Real print values depend on the paper and the printer profile, so treat it as a starting point and confirm with your print shop.

Why the color you pick may not match the brand guide

If you pick a logo color from a JPG and get #E8312F while the brand guide says #E53935, the tool is not wrong. The pixels really are that color. Several things change pixels on the way to your screen:

1. Compression. JPG and WebP files blur colors at edges and add slight noise inside flat areas. Use the 3 x 3 or 5 x 5 average setting to smooth that out, and pick from the middle of a large flat area.
2. Anti-aliasing. Edges of text and icons blend with the background. Pick inside the shape, not on the border.
3. Color profiles and screenshots. Screenshots capture what the screen shows, which can differ from the source file on wide-gamut displays.
4. Photos. Light, shadows and camera processing mean a red product photographed outdoors has hundreds of reds. The dominant colors list gives a better summary than any single pixel.

When an official brand color exists, use it. When it does not, average a clean area, check the result against the dominant colors, and round to a value you can reuse.

Dominant colors and palettes

The dominant colors panel groups similar pixels with a k-means algorithm in Lab color space, which is closer to how people see color differences than RGB. Each color shows its share of the image. Use it to pull a quick palette from a mood board photo, or to check which colors really carry a design. If you are naming a new brand at the same time, the free business name generator and the free tagline generator help with the words.

Check contrast before you use a color for text

Every picked color shows its contrast ratio against white and black, using the WCAG formula. For body text aim for at least 4.5:1, and 3:1 for large headings and icons. If neither white nor black reaches 4.5:1 on a mid-tone color, use it for backgrounds or accents rather than behind small text.

Want images that use your colors from the start? Write better image prompts with the DALL-E prompt guide, or browse all free AI generators and tools.

FAQ