Extracting colours with alpha
Sampling a colour from an image is easy — open it in Photoshop, choose the Eyedropper tool, and click the target pixel. Sampling a non-opaque colour that’s been flattened onto a background is harder, but not impossible.
Before we begin, let’s discuss tools. Many designers will be familiar with the Eyedropper tool in Photoshop, but may not be familiar with the Color Sampler tool. In this scenario, the Color Sampler tool is far more valuable — it can sample four points and once, and the location of the points are locked, so it’s possible to tweak values and observe the results at the same time.
Having four samplers means you can watch the original and the new version together as they converge. To place a sampler, select the Color Sampler tool and click on the canvas. Turning caps lock on (or changing your settings) will give you a more precise cursor while doing so.
Let’s work out the colour and alpha of the highlight used in macOS’s menubar icons. It looks like pure white, so we’ll start with that and lower the opacity to see if we can get a match.
The #2 and #4 values in the info panel change as the opacity is altered. White at 35% opacity matches in two places in the Notification Center icon, so that looks like a good fit.
Now for something a little harder. Assume we’re trying to extract the red colour and opacity from the image above, and we only have a flattened file to work with.
There’s quite a few places on the map where the background looks identical under and beside the overlay. Placing some colour samplers and drawing a small shape layer gets us started.
When tweaking the colour, the fastest way to zero in is one channel at a time.
Try to guess the alpha — my attempt here is 70%. Now open up the shape’s colour, altering red only for now (or a prominent channel, if not much red is used). An easy way to alter just the red while looking at the info panel is to click inside the text field, then use the up and down arrow keys (or shift-up/down for steps of 10). If you’re able to get the red to match, try the same technique for green and blue. If you can’t find a match, adjust the alpha and try again.
Eventually everything will line up. This one turned out to be 80% opacity. Remember that a designer or a developer probably chose the opacity, so there’s a very good chance it’ll land on a nice, even number.
Gradients, shadows and glows
The same technique works well for linear gradients — just place samplers at the start and end of the original and your copy, and adjust each colour to match.
Recreating shadows and glows is harder, but possible. Start with a couple of points and match as per the instructions above. The image below shows some initial work recreating the macOS in-focus window shadow, using a drop shadow and stroke.
Good artists use the Eyedropper tool. Great artists use the Color Sampler tool.
Published 29 August 2013.