为要分层以获得最大色域的颜色选择 alpha

Question

a 是灰度颜色的 alpha 值： rgba(0,0,0,a)

我想在白色 rgb 背景上最多堆叠此颜色 z 次。

给定 z，我如何确定 a 将创建最广泛的灰度值色域？

我天真地认为我可以用 255/z 解决，但这导致我的最暗灰度值远不及 255。这里有三层 (z = 3)，我在其中设置 a = 85。唉！它得到的最暗是 180，所以我可以增加 a 并最终得到更宽的色域。但是怎么办？

https://codepen.io/jedierikb/pen/JjRebjB?editors=1010

const $c = document.getElementById( 'c' );
$c.width = 200;
$c.height = 200;

const ctx = $c.getContext( '2d' );
const numLayers = 3;

const alpha = Math.round(255/numLayers);
ctx.fillStyle = '#000000' + intToHex(  alpha );
for (var i=0; i<numLayers; ++i) {
  ctx.fillRect( i*10, i*10, 100, 100 );
}

//let's get a pixel
var id = ctx.getImageData(numLayers*10, numLayers*10, 1, 1).data;
console.log( 'for ' + numLayers + ' layers, using alpha ' + alpha );
console.log( 'resulting in darkest alpha being', id[3] );

Answer 1

在您的示例（图像和 CodePen）中，alpha 为 0.33。

最浅的颜色是170，即255中的67%。因此，第一层黑色移除了等于其 alpha (0.33 = 33%) 的亮度测量值。

现在，当应用第二层时，不是从白色而是从第一层减去亮度。它的亮度为 67%，因此第二层的亮度为 67% * (1 - 0.33) = ~44%，在 RGB 中为 255 * 44% = ~112，等于第二层的颜色。

第三层的亮度为 44% * (1 - 0.33) = ~30%，在 RGB 中为 255 * 30% = ~75，等于第三层的颜色。

因此，如果您将带有 alpha a 的黑色应用到白色背景 z 次，第 z 种颜色将为

255 * (1 - a)^z

可以使用以下方法计算值的范围：

range = 255 * (1 - a) - 255 * (1 - a)^z

first color - last color

通过绘制此函数的图形，您可以看出，例如，对于 z = 3，局部最大值位于 0.4226。您还可以求解多项式或作弊，以 0.05 为增量计算 a 的值，然后选择最高的结果。

function greatestGamutAlpha(layers, precision = 5) {
    let maxRangeAlpha,
        maxRange = 0;
    for (let a = 0; a < 100; a += precision) {
        const alpha = a / 100,
            range = 255 * (1 - alpha) - 255 * (1 - alpha) ** layers;
        if (range > maxRange) {
            maxRange = range;
            maxRangeAlpha = alpha;
        }
    }
    return maxRangeAlpha;
}

为要分层以获得最大色域的颜色选择 alpha

selecting alpha for a color to be layered for largest gamut

javascript

colors

color-space