Cover image

How to calculate actual color for opacity on white background

← Back to list
Last updated: May 14, 2020
Image by Crissy Jarvis on Unsplash

Table of contents

***

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)
📃 Copy
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
📃 Copy
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:

opacity(#,) =
***

Hooray, now we know how this works!

Sergei Gannochenko
Sergei Gannochenko
Business-focused product engineer,  in ❤️ with amazing products 
AI, Golang/Node, React, TypeScript,  Docker/K8s, AWS/GCP, NextJS 
20+ years in dev