How to use it
- Upload, drop or paste an image, or start with Try a sample image.
- Move over the image to see nearby pixels in the magnifier, then click (on a phone, drag and lift) to pick; arrow keys nudge one pixel at a time.
- Copy HEX, RGB or HSL, review the largest colors under Dominant colors, and export them as CSS or JSON.
HEX, RGB and HSL compared
- HEX: the #RRGGBB hexadecimal form used by websites, Figma and most design software, for example #1E3A8A.
- RGB: red, green and blue values from 0 to 255, for example rgb(30, 58, 138), handy in code and for adding transparency.
- HSL: hue (0–360°), saturation and lightness, for example hsl(224, 64%, 33%), convenient for lighter and darker shades of one hue.
Frequently asked questions
How do I get a color from an image?
Upload, drop or paste a screenshot. Move over the image to see the magnifier and click the spot you want; on a phone, press and drag with your finger and lift to pick. HEX, RGB and HSL values each copy in one click.
Should I sample 1 pixel or 5×5?
Use 1 pixel for logos, icons and flat screenshots; for photos, fabric and noisy product shots use a 3×3 or 5×5 average so a single stray pixel does not skew the result.
How are the dominant colors worked out?
The image is reduced and every pixel is counted; median cut plus k-means clustering merges similar colors into 3–8 groups, sorted by the share of the image they cover. Transparent pixels are ignored. Dominant means largest area, not visual focus.
Why does the picked color differ from the design file?
Screenshots and photos are affected by display color management, JPEG compression, lighting and camera white balance, so they can differ from the design file or print colors such as Pantone and CMYK. Treat brand guidelines as the source of truth and picked colors as a close match.
How do I use the CSS and JSON export?
The CSS export is a set of :root variables such as --color-1 that paste straight into a stylesheet; the JSON lists HEX, RGB, HSL and share for developers or design tools. You can also export your picked-color history.
Is my image uploaded?
No. The image is decoded and drawn on a local canvas in your browser, and picking and palette extraction run on your device, which suits unreleased product images and client material.