Matching a brand color
Open a logo, click the colored area and copy the HEX code, for example #FF6B00, into your design tool or CSS.
Click any point of an image to get its color as HEX, RGB and HSL, and see the image's main colors.
Drag an image here, or choose one
JPG, PNG, WebP or GIF. It stays on your device — nothing is uploaded.
Runs in your browser — nothing you enter is sent to a server.
Choose an image and click or tap any point. The color of that pixel is shown as HEX, RGB and HSL, each with a copy button. For an exact position, type the X and Y coordinates instead.
The tool also lists the image's main colors with the share of the picture each one covers. Similar shades are grouped — pixels are sorted into 4,096 color groups and close groups are merged — so you get a usable palette rather than thousands of near-identical values. Select a main color to see its codes.
Open a logo, click the colored area and copy the HEX code, for example #FF6B00, into your design tool or CSS.
In an image that is three-quarters red and one-quarter blue, the main colors are #FF0000 at 75% and #0000FF at 25%. Fully transparent pixels are ignored.
JPG compression and anti-aliased edges blend neighbouring pixels, so a pixel near an edge is a mix. Click in the middle of a flat area, or use a main color, which averages similar pixels.
Three ways to write the same color. RGB gives red, green and blue from 0 to 255; HEX is the same numbers in base 16; HSL gives hue, saturation and lightness, which is easier to adjust by hand.
Images wider or taller than 1,600 px are scaled down to that size for picking, so X and Y refer to the scaled picture. Colors are unaffected for practical purposes.
Convert colors between HEX, RGB, HSL, HSV and CMYK, and check their contrast against white and black.
Converters
Build color palettes from a base color with color-wheel harmonies, with HEX, RGB and HSL values.
Generators
Crop a photo to a square, 16:9, 4:5 or any exact pixel area, by dragging or typing.
Image Tools