HSLA 색상을 흰색과 혼합하고 Chroma.js를 사용하여 알파가 아닌 HSL로 변환
다양한 색상의 디자인 시스템이 있습니다. 모든 색상이 다른 모든 색상과 혼합되고 각 조합의 색상 명암비 (CCR)가 출력되는 색상 표를 만들었습니다. 목표는 액세스 할 수없는 색상 조합을 표시하는 것입니다.
Chroma.js를 사용하여 색상을 조작하고 CCR을 출력하고 있습니다. 내 HSL 정의 색상의 대부분과 훌륭하게 작동합니다.
내 디자인 시스템이 알파 채널이있는 색상을 사용할 때 문제가 발생합니다. 한 쌍의 색상이 투명 할 때 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
결과는 내가 함께 만든이 그래픽으로 시각화됩니다. 왼쪽은 중간에 오버레이가있는 두 가지 색상입니다. 어도비 일러스트 레이터에서는 황갈색에 25 % 투명도와 "일반"블렌드 모드를 사용했습니다. CSS에서 똑같은 작업을 한 다음 스크린 샷을 찍고 Photoshop에서 결과 색상 혼합을 측정했습니다. 오른쪽에는 Chroma 색상 기능의 출력이 있습니다.

Chroma.js의 옵션으로 이해하는 것을 시도한 후 CCR 테스트가 정확할 수 있도록 결과를 브라우저 출력에 더 가깝게 만들 수있는 다른 방법이 궁금합니다. 모두 감사합니다.
@GrahamRitchie의 답변 덕분에 이제 내 출력 테이블이 다음과 같이 보입니다. 작은 "복합"레이블은 이러한 기능에 의해 생성 된 색상을 표시하는 반면, 주 출력은 여전히 투명 색상을 서로 및 배경 위에 겹쳐서 표시합니다.

답변
언급 한 라이브러리 (Chroma.js)로이 작업을 수행하는 방법을 모르겠지만 바닐라 JavaScript 함수가 도움이되기를 바랍니다.
아래 함수는 항상 불투명 한 배경색이 올바르게 작동한다고 가정합니다 (따라서 배경 RGB 및 전경 RGBA).
둘 다 알파 채널이있는 두 가지 색상으로 작업해야하는 경우 먼저 흰색 배경으로 배경 색상 (전경 색상)에서 함수를 실행 한 다음 두 색상을 결합합니다.
이 함수는 또한 두 개의 RGB 색상을 결합하며 RGB 색상을 전달할 때 알파 채널을 생략하면됩니다 ( convertToRGB({r,g,b}, {r,g,b})
).
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>