Color Picker

Color Picker is a free, browser-based tool that lets you sample the exact color of any pixel in an image and read it back as HEX, RGB and HSL codes. Load a screenshot, photo, logo or mockup, move the eyedropper to the spot you care about, and click to grab the color.

Every pixel in an image stores a color as red, green, blue and alpha (transparency) values. The tool reads those raw values from the image and converts them into the three notations developers and designers use most. The same pixel always yields the same codes, so you get an exact, repeatable match rather than a guess by eye.

Because it runs entirely on this page, you can pick colors from private mockups, internal dashboards or client screenshots without any of them leaving your device.

Native OS eyedroppers and design apps can sample colors, but they are not always at hand: you might be on a locked-down machine, on someone else's computer, or working from a screenshot rather than a live design file. A web tool opens instantly, needs no install, and shows every common format side by side so you do not have to convert by hand.

The usual worry with online image tools is privacy - many upload your file to a server to process it. Dev Nexus does not. The image is read locally with the <canvas> API and its pixel data stays in your browser. Nothing is uploaded, logged or retained, so it is safe for confidential designs and internal assets, and it keeps working even when you are offline.

Start by loading an image - drag it onto the drop zone or click to browse. The tool draws it onto a canvas so it can read individual pixels.

Move your pointer across the image and a crosshair follows it, previewing the color under the cursor. When you are over the exact pixel you want - a button fill, a brand accent, one stop in a gradient - click to lock it in. The sampled color is shown as a swatch plus three ready-to-copy codes: HEX (for example #6d3ae0), RGB (rgb(109, 58, 224)) and HSL (hsl(258, 74%, 55%)).

For fine work, zoom in so a single pixel is easy to target - this matters on anti-aliased edges and smooth gradients where neighbouring pixels differ slightly. Once you have the code you need, copy it with a single click and paste it straight into your stylesheet or design tool.

Picking a color from an image comes up constantly in day-to-day work:

• Matching a brand color: pull the exact HEX from a logo or brand screenshot instead of eyeballing it.
• Rebuilding a design in code: sample fills, borders and text colors from a mockup to reproduce them accurately in CSS.
• Extracting a palette: grab several colors from a photo or illustration to build a coordinated scheme.
• Auditing a live site: screenshot a page and sample its real rendered colors when you do not have the source styles.
• Preparing icons and favicons: lock down the exact accent color before you generate assets with the Favicon Generator.

When you also need to change an image's format or size after sampling, reach for Convert Image.

A few habits make color picking more accurate:

• Zoom before you click. On gradients and soft edges, adjacent pixels vary. Zooming lets you hit the exact pixel you mean rather than an averaged neighbour.
• Beware JPEG artifacts. Lossy compression shifts colors slightly, so a HEX sampled from a JPEG may differ from the original design value. Prefer PNG or the source file when precision matters.
• Mind color profiles. A screenshot rendered on a wide-gamut display can encode slightly different values than the source. Sample from the original asset when you can.
• Keep transparency in mind. A pixel's visible color depends on what is behind it. A semi-transparent pixel over a dark background looks different from the same pixel over white.
• Copy the format your target expects. Use HEX for most CSS and design tools, RGB/RGBA when you need an alpha channel, and HSL when you want to tweak hue, saturation or lightness by hand.