color-mix()

css에서 색상을 혼합해서 색상을 지정할 수 있는 방법.

참고

결과값을 바로 알 수는 없지만

처럼 계산된 결과의 색상을 가져올 수 있다.

크롬 디버거에서는 바로 마우스 오버하면 계산된 값이 보인다.

참고 2

<canvas>에서는 지원 안된다고 함

지원 현황

Safari 16.2 (Release date: ⁨2022-12-13⁩)

문법

color-mix( <color-interpolation-method>, <color> [<percentage>], <color> [<percentage>] )

color-mix(in lab, plum 60%, #123456 50%)

color-mix(in hsl, hsl(200 50 80), coral)

사용시 유의사항

1. color-interpolation-method 에 따라서 결과의 색이 다르다. 색 보간 방법에 따른 계산차이가 발생하며 눈에 띄는 차이를 보여줌.

1.1. in srgb 를 하면 다른 것보다 어둡게 합성됨.

1.2.문서에는 sRGB는 추천하지 않음.

'sRGB를 사용하는 특정 기기나 소프트웨어의 동작과 일치해야 하는 경우에만 sRGB를 사용하세요. sRGB 색 공간은 선형적으로 밝지도 않고, 시각적으로도 균일하지도 않아 지나치게 어둡거나 회색빛이 도는 혼합과 같은 좋지 않은 결과를 초래합니다.'

추천 보간 방법

1. OKLCH

2. sRGB

모든 브라우저/모니터에서 안정적

계산 및 예측 가능

비추천

1. HSL

2. RGB

보간 방법의 색공간에 따라서 나타낼 수 있는 색상에 차이도 있으므로.. 사용시 잘 선택해야할 듯.