如何计算带指定透明度的颜色，使其在白色背景匹配目标不透明色

需求明确：给定一个不透明的CSS目标颜色（例如purple），以及指定的透明度值，需要找到对应的原始颜色，让这个原始颜色加上指定透明度后，在白色背景上显示的视觉效果和目标不透明颜色完全一致。

示例场景：

• 第一个方块是不透明的目标色，完全遮挡后方内容
• 第二个方块设置了80%透明度，后方黑色条部分可见，但需要让它的视觉颜色和第一个方块完全一致

当前困境：能推导半透明色在白色背景上最终呈现色的正向公式，但无法逆向计算——已知目标色和透明度，求对应的半透明原始色。现有代码仅对单一测试颜色有效，更换其他颜色后失效。

代码示例 #

CSS 代码

:root {
  --base-color: #dbe9f8;
/*   --base-color: #59d98f; */
/*   --base-color: blue; */
}

html, body {
  height: 100vh;
}

div {
  height: 100px;
  width: 100px;
  position: relative;
  z-index: 2;
}

.original {
  background: var(--base-color);  
}

.translucent {
  --color: var(--base-color);
  --opacity: 0.8;
  background: rgb(from var(--color) min(255, max(0, calc((r - (1 - var(--opacity)) * 255) / var(--opacity)))) min(255, max(0, calc((g - (1 - var(--opacity)) * 255) / var(--opacity)))) min(255, max(0, calc((b - (1 - var(--opacity)) * 255) / var(--opacity)))) / var(--opacity));
}

.bar {
  width: 100px;
  height: 10px;
  background: black;
  position: relative;
  top: 50px;
  z-index: 1;
}

HTML 代码

<div class="original"></div>
<div class="bar"></div>
<div class="translucent"></div>

内容的提问来源于stack exchange，提问作者helion3