How to calculate actual color for opacity on white background
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)
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) = 23721 => getResultColor(21, 0.3) = 21 * 0.3 + 255 * (1 - 0.3) = 184.840 => getResultColor(40, 0.3) = 40 * 0.3 + 255 * (1 - 0.3) = 190.5result = rgb(237, foor(184.8), floor(190.5)) = #EDB8BE
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
Golang/Node, React, TypeScript, Docker/K8s, AWS/GCP, NextJS.
20+ years in dev.