Pick a color from an image

What you get: a hex code

Octoolo gives the color as a hex code: a # and six characters, two each for red, green and blue, from 00 to ff. #ffffff is white, #000000 is black, and #2a62f2 is a strong blue. It is written in lowercase, which every program accepts: hex codes ignore case, so #2A62F2 is the same color.

Hex is the format most tools ask for: CSS on websites, design apps such as Canva and Figma, the custom color boxes in current versions of Word and PowerPoint, and most brand guides. A few boxes want the six characters without the #; simply leave it out when you paste.

If you need RGB or HSL instead, paste the code into the color converter in Octoolo's Dev Toolbox. Hex to RGB shows the color as rgb() and hsl(), and how well it reads against white and against black.

Picking the right pixel

A few habits give truer results:

• Use an average on photos. The Sample size list in the bar above offers One pixel, 3 × 3 average, 5 × 5 average and 11 × 11 average. JPG photos have slight noise, so two single pixels side by side can differ; an average gives the color you actually see.
• Pick from the picture as it was. The Eyedropper reads the picture as it looks, with any adjustments you added. Hide adjustment layers with their eye first for the color as photographed.
• Aim for the middle of flat areas. Edges blend into their neighbors, so stay clear of them.
• Try two or three spots on a photo of a wall or a fabric, since light and shade change the color across it.
• Use the original logo file, ideally PNG or SVG, not a photo of it, and zoom in (Ctrl +) for thin lines.

Where people use picked colors

• Matching a brand: take the exact blue of a logo for a slide, a flyer or a website.
• Decorating: get the code of a paint or a fabric from a photo to look for something close. A photo's colors depend on the light it was taken in, so treat the code as a guide.
• Design: build a color scheme from a photo you love, one color at a time.
• Web and app work: grab a color from a screenshot of a design to use in CSS.
• Readability checks: pick the colors of a button or a heading from a screenshot and see in hex to RGB how each one reads against white and against black.
• Inside the same photo: a picked color becomes the foreground color, which new text and color fills take, so a border or a caption matches the picture.

Picking does not change the picture, so you can close it afterwards without saving.

Other ways on Windows

Microsoft's PowerToys includes a Color Picker that works anywhere on the screen with Win Shift C and shows several formats at once. It suits people who pick colors from apps and websites all day. Paint has a color picker as well, and its Edit colors window shows the values of the color you picked.

Octoolo's Eyedropper is handiest when the color is in a picture you have, or are already editing, with nothing extra to install. It gives one color per click: it does not draw up a palette of a picture's main colors. For that, the Dev Toolbox's color palette generator takes a picture and gives its main colors.

To pick from a website or an app with Octoolo, take a screenshot first with Win Shift S and paste it into the Photo Editor. A screenshot keeps on-screen colors exactly, which a photo of a screen never does.