Color picker from image

Open a picture above and click any spot: its color appears as a HEX code, an RGB value and an HSL value, each with its own Copy button. A magnifier follows the pointer and enlarges the pixels around it, so you can land on the exact one you want, and the panel lists the picture's main colors as a ready-made palette. Every pick joins a list of picked colors, so you can collect a set and copy them together.

HEX, RGB and HSL

• HEX, such as #1E90FF, gives red, green and blue as three pairs of hexadecimal digits. It is the compact form used in CSS and in the color fields of many apps.
• RGB, such as rgb(30, 144, 255), gives the same three amounts as numbers from 0 to 255.
• HSL, such as hsl(210, 100%, 56%), describes the color as a hue on the color wheel, a saturation and a lightness. It is the easiest to adjust by hand: raise the lightness for a paler version of the same color.

All three describe the same color, and CSS accepts each of them as written.

Picking the exact pixel

The magnifier shows a small square of the picture around the pointer, enlarged so every pixel is visible, with the pixel that will be read outlined and its HEX code underneath. On a phone, hold your finger on the picture: the magnifier appears above your finger, and the color is picked where you lift it. With a keyboard, move into the picture with Tab, nudge the cursor with the arrow keys (hold Shift for 10 pixels at a time) and press Enter to pick.

Photos rarely have one flat color: neighboring pixels differ a little because of light, sensor noise and JPEG compression. 3 × 3 average and 5 × 5 average read the mean color of the square around the spot, which gives a steadier value for skin, sky, fabric or a painted wall. For a logo or an illustration with flat colors, a single pixel is exact.

The picture's main colors

When a picture opens, its pixels are grouped into up to six main colors, the largest area first, and the panel starts on the biggest one. Select any of them to see its codes, or Copy all to take the list of HEX codes, one per line, for a brand palette or a mood board. Colors that the eye can barely tell apart count as one, so a gradient of the same blue doesn't fill the palette, and clearly different colors come first, so a small accent such as a red stripe on a gray shoe still makes the list.

Named colors

Each pick also gives the closest of the 148 color names defined by CSS, such as dodger blue or tomato, with the keyword to use in CSS. The closeness is measured the way the eye sees color differences, not by the raw numbers. A name is a description, not a match: most picks are only close to one.

When the numbers look off

• Transparent spots have no color; the panel says so. Partly transparent pixels give the color without its transparency and show the opacity.
• Reduced pictures. Very large pictures are reduced to fit the browser's memory, which can blend the thinnest details.
• Color profiles. The picker reads colors in sRGB, the standard color space of the web. A picture saved with a wider profile is converted first, so an app working in that profile can show slightly different numbers.

To use a color as a solid background behind a cutout, the background changer takes a color of your choice. To turn a logo into shapes you can recolor, use PNG to SVG.