How do I get CSS color values from a mockup PNG my designer sent me?

Three formats, ready to paste

The picker shows every color in three formats written exactly the way CSS accepts them. A primary button color in the mockup, for example, reads #0F6B5F, rgb(15, 107, 95) and hsl(172, 75%, 24%). Copy whichever fits your codebase and paste it straight into the property value, no manual conversion.

• HEX: the shortest and most common in stylesheets and color variables.
• rgb(): handy if you will add transparency later, as rgba or with the modern slash syntax.
• hsl(): convenient if you will derive lighter and darker shades by changing the last number.

Clicking the preview reads the original

Mockups are usually large, so the tool shows a scaled preview that fits your screen. It maps your click to the matching pixel of the original, though. Example: a 4000 × 3000 mockup shown in a 400 × 300 box. A click at 100 across and 50 down in the preview reads pixel X = 1000, Y = 500 of the original. So the value comes from the real design, not from a shrunken copy with blended colors.

Small elements: a divider, an icon, a border

1. Open the image in the Image color picker and click roughly near the element.
2. Focus the image and use the arrow keys: each press moves the marker one pixel, and with Shift it moves 10.
3. Watch the magnifier, which shows 11 × 11 pixels around the marker, until the outlined square sits inside the element.
4. If your designer gave you the element's position, type X and Y straight into the fields.
5. Copy the value, and press Enter if you want it added to the history so you can gather the page's colors.

The marker never leaves the image: at X = 795 in an 800 px wide image, Shift plus the right arrow stops at 799, the last pixel in the row.

Things developers learn the hard way

• If the mockup was exported at 2x, pixel coordinates in the image are double the CSS coordinates on the page. Colors are unaffected, but it matters if you carry positions over.
• If the mockup is a JPEG, flat areas can wobble by a level or two. Ask for a PNG if you can, since PNG does not shift colors when saved.
• Values are sRGB as the browser decodes them. If the design was exported with another color profile, numbers can differ from what the designer sees in their app, so ask for the official color list if one exists.
• Shadows and gradients in the mockup are not single colors, and the picker does not extract gradient or shadow values. Read the start and end colors only, as a reference.