Image Color Picker

1. Drop an image onto the tool, or choose Upload image.
2. The sample points land on the image's dominant colors. Drag a circle, or click anywhere on the image, to sample that exact pixel instead.
3. Use the arrows next to the palette to add or remove points (up to 8), or shuffle them across the image.
4. Copy the selected color as HEX, RGB, HSL or OKLCH, or export the whole palette as CSS, SCSS or JSON. The panels below show its harmonies, tints and shades, conversions, contrast and how it looks with color blindness.

The two features answer different questions. Pixel sampling answers "what exact color is this spot?" It reads one pixel, which is what you want for matching a logo fill or a button in a screenshot. Dominant-color extraction answers "what is this image made of?" It groups similar pixels, ranks the groups by how much of the image they cover, and places the sample points on the largest ones.

Because extraction is weighted by area, a small but important detail, such as a red logo on a large gray photo, can miss out. Drag a point onto it instead. Mostly transparent pixels are skipped, so a logo PNG on a transparent background is not swamped by empty space.

The image is decoded and read with the browser's Canvas API on your own machine. Nothing is uploaded, so you can sample unreleased designs, client work or personal photos without sending them to a server, and the tool keeps working if your connection drops after the page has loaded.

• Sample flat areas. Click in the middle of a solid region, not near its edge. JPEG compresses in 8×8 pixel blocks and usually stores color at lower resolution than brightness, so color near edges and fine detail is smeared.
• Avoid anti-aliased edges. Pixels along curves and text edges are blends of the shape and its background, so a sample there returns a color that exists nowhere in the design.
• Prefer PNG for graphics. A PNG export of a logo or interface keeps exact colors; a JPEG of the same file can shift pixels by a few values.
• Sample more than once. If three nearby clicks give three different hexes, you are on noise or a gradient. Use the value that repeats, or the dominant color.

For brand work, a sample from a screenshot gives the color as rendered, which can differ from the official value by a few units after compression or scaling. Treat it as a strong lead, confirm it against the brand guide when you have one, and paste it into the color converter for RGB, HSL, OKLCH and CMYK. For mood boards, drop in a reference photo, take the sampled palette as a starting point, and build lighter and darker steps with the tint and shade generator. Photos rarely hand you readable text pairs, so check any extracted color you plan to use for text in the contrast checker.