混合白色的HSLA颜色，然后用Chroma.js转换为非alpha HSL。

Question

我有一个多种颜色的设计系统。我已经创建了一个表的颜色，所有的颜色是混合每一个其他颜色和颜色对比度(CCR)的每一个组合是输出。目标是标记不可访问的颜色组合。

我使用Chroma.js来操作颜色并输出CCR。它的工作与我的HSL定义的大部分颜色出色。

当我的设计系统使用带有alpha通道的颜色时，问题就来了。当一种或两种颜色都是透明的时，确定一对颜色如何使用CCR是有问题的。我正在尝试一些不同的东西来混合或混合一个HSLA颜色与白色，然后运行对比功能。下面是我正在做的事情的一个片段：

// where either foreground or background has an alpha value present less than 1
var background = chroma.mix(background, '#fff', 1, 'lab').css();
var foreground = chroma.mix(foreground, background, 1, 'lab').css();
var ccr = chroma.contrast(foreground, background);
// lab gets the closest but not the same as the way CSS overlays colors

结果是可视化的这张图形我放在一起。左边是两种颜色，中间有一层。在Adobe中，我使用了25%的透明度，在棕褐色和“正常”混合模式。我在CSS中做了同样的操作，然后在屏幕上截取它，然后在Photoshop中测量结果的颜色混合。右边是色度函数的输出：

​

​

在尝试了我所理解的Chroma.js中的选项之后，我想知道还有什么可以让我的结果更接近浏览器输出，这样我的CCR测试才能准确。谢谢大家。

感谢@GrahamRitchie的公认答案，我的输出表现在看起来如下所示。小的“复合”标签显示这些功能产生的颜色，而主输出仍然将透明的颜色层叠在一起和背景上。

​

​

Answer 1

我不知道如何使用您提到的库(Chroma.js)来实现这一点，但是希望一个普通的JavaScript函数会有所帮助。

请注意，下面的函数总是假定一个不透明的背景颜色来正确工作(因此背景RGB和前景RGBA)。

如果您需要与两个颜色，都有阿尔法通道，您将运行功能的背景颜色首先(作为前景颜色)的白色背景，然后结合这两种颜色。

该函数还将组合两种RGB颜色，在传递RGB颜色(convertToRGB({r,g,b}, {r,g,b}))时只需省略alpha通道即可。

​

function convertToRGB(frontRGBA, backgroundRGB){

var rtrn = {};
//allows the function to just accept a front colour and assume the background is a plain white.
backgroundRGB = backgroundRGB || {r:255,g:255,b:255};

//allows a RGB value to be passed in assuming full alpha channel.
frontRGBA.a = frontRGBA.a || 1;

//normalise the alpha channel across the foreground and background.
rtrn.r = ((1 - frontRGBA.a) * backgroundRGB.r) + (frontRGBA.a * frontRGBA.r);
rtrn.g = ((1 - frontRGBA.a) * backgroundRGB.g) + (frontRGBA.a * frontRGBA.g);
rtrn.b = ((1 - frontRGBA.a) * backgroundRGB.b) + (frontRGBA.a * frontRGBA.b);

//just check that we don't end up with a value greater than 255 for any channel.
rtrn.r = (rtrn.r > 255) ? 255 : rtrn.r;
rtrn.g = (rtrn.g > 255) ? 255 : rtrn.g;
rtrn.b = (rtrn.b > 255) ? 255 : rtrn.b;

return rtrn;

}


var backgroundRGB = {r:165,g:193,b:211};
var frontRGBA = {r:210,g:203,b:178,a:0.25};

//used for example
var rgb = convertToRGB(frontRGBA, backgroundRGB); 
document.querySelector(".output").style.background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
document.querySelector(".output").innerHTML = "Output<br/>R:" + rgb.r + "<br/>G:" + rgb.g + "<br/>B:" + rgb.b;

.container div{
   width: 200px;
   height: 200px;
   float: left;
}
.div1{
    background: rgba(165,193,211,1);
}
.div2{
    background: rgba(210,203,178,0.25);
}

<div class="container">
<div class="div1">Background<br/>R:165<br/>G:193<br/>B:211<br/>A:1</div>
<div class="output">Output</div>
<div class="div2">Foreground<br/>R:210<br/>G:203<br/>B:178<br/>A:0.25</div>

</div>

​