Image Color Picker

HEX, RGB and HSL explained

All three describe the same color in different ways:

• HEX (like #6D28D9) is the compact code used in web design, CSS and most design tools. Each pair of characters is the amount of red, green and blue, from 00 to FF.
• RGB (like rgb(109, 40, 217)) gives the same red, green and blue amounts as numbers from 0 to 255. It’s easy to read and works in CSS and many apps.
• HSL (like hsl(263, 70%, 50%)) describes hue, saturation and lightness. It’s the most intuitive for tweaking: raise the last number for a lighter shade of the same color, lower the middle one for a more muted version.

The image’s palette

Under the picked color you’ll find up to six main colors found in the image, most common first. The tool groups similar pixels together and averages each group, which is a quick way to build a color scheme from a photo you like, match a brand’s colors from its logo, or choose text and background colors that suit a picture. Click any swatch to see its codes and copy them.

Every color you click is kept in Your picks (up to twelve), so you can compare shades and come back to one without hunting for the same pixel again.

Precise picking, with a mouse, finger or keyboard

Photos are made of millions of tiny pixels, and neighboring ones often differ slightly. The loupe shows a magnified grid of the pixels around your pointer so you can land on exactly the one you want. On a touch screen, press and drag to move the loupe, then lift your finger to pick.

The picker also works without a mouse: click the image (or reach it with Tab), move the crosshair with the arrow keys, hold Shift to move ten pixels at a time, and press Enter to pick. In Chrome and Edge, the Pick from anywhere on screen button lets you grab a color from outside the page too, such as another window.

Accuracy and privacy

Colors are read from the image as your browser displays it, in the standard sRGB color space used on the web. Photos taken in wider color spaces (such as Display P3 on recent iPhones) are converted to sRGB first, so the codes you get match what the color looks like on a website. Very large images are analyzed at up to 4,096 pixels on the longest side, which is far more than enough for picking.

The image is never uploaded; the picker reads the pixels inside your browser. If you also need to change the image itself, try Crop Image or Convert Image, and use Image to Base64 to embed small graphics straight into CSS.