Calculating Opacity’s Effect on Color

In icon view (or on the desktop), OS X draws a subtle box around the icon when an item is selected. It’s a rounded-corner box with a slightly-darker background, and a slightly-lighter border. This approach guarantees that the user will be able to recognize their selection regardless of background color or brightness (e.g., desktop wallpaper). Check it:

Using Photoshop, I determined that the color changes are equivalent to overlaying the background color with black & white at 30% opacity.

For possible use on various work-related projects, here is how to accurately determine new RGB values to simulate a black or white overlay at various opacities using Python.

def dark (val, pct):
    return int(round(val*(1.0-(pct/100.0))))

def light (val, pct):
    return int(round(val+((255-val)*(pct/100.0))))

def darken (R, G, B, pct):
    return (dark(R, pct), dark(G, pct), dark(B, pct))

def lighten (R, G, B, pct):
    return (light(R, pct), light(G, pct), light(B, pct))

Let’s try it with the following image I created using Layer opacity in Photoshop. The base color green is R:61, G: 136, B: 28. I then created a white layer at 27% opacity and filled in the left third of the image. I filled in the right third with a black layer set to 47% opacity. I then flattened the image & saved it as the PNG shown here.

I then ran the 2 functions.

>>> lighten(61, 136, 28, 27)
(113, 168, 89)
>>> darken(61, 136, 28, 47)
(32, 72, 15)

I compared the output to the RGB values reported by Photoshop in the final, flattened PNG, and they matched.


3 thoughts on “Calculating Opacity’s Effect on Color

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s