How to calculate actual color for opacity on white background

← Back to list
Posted on 14.05.2020
Image by Crissy Jarvis on Unsplash

From time to time I observe designers making derivative colors by applying opacity to a base color against white background. While this approach works perfectly on the design stage, in production an element might not be always located on white. Therefore we need to know exact value to make use of it.

One way to do this is to use a screen color picker like ColorPick Eyedropper. But sometimes it is interesting to know how to make it "by hands". This is how to do that.

Let's take a red color as an example: #c31528:
To make a dirty pale pink color, we can use opacity: opacity(#c31528, 0.3):

If we put this color over something else than white, the color will be different:

To get the real color we can use the formula:

getResultColor(baseColor, opacity) => baseColor * opacity + white * (1 - opacity)
The code is licensed under the MIT license

baseColor is our color: #C31528

Let's apply this formula to each byte of the color vector:

#C31528 = rgb(195, 21, 40).
195 => getResultColor(195, 0.3) = 195 * 0.3 + 255 * (1 - 0.3) = 237
21 => getResultColor(21, 0.3) = 21 * 0.3 + 255 * (1 - 0.3) = 184.8
40 => getResultColor(40, 0.3) = 40 * 0.3 + 255 * (1 - 0.3) = 190.5
result = rgb(237, foor(184.8), floor(190.5)) = #EDB8BE
The code is licensed under the MIT license

The result color is #EDB8BE: , looks the same as before:

But against green background it works absolutely correct:

This calculator may help us to find out right value for every base color and opacity:

) =

Hooray, now we know how this works!


Sergei Gannochenko

Business-oriented fullstack engineer, in ❤️ with Tech.
Golang, React, TypeScript, Docker, AWS, Jamstack.
15+ years in dev.