color-mix()
css에서 색상을 혼합해서 색상을 지정할 수 있는 방법.
참고
결과값을 바로 알 수는 없지만
const color = getComputedStyle(document.querySelector('.sample')).color;
처럼 계산된 결과의 색상을 가져올 수 있다.
크롬 디버거에서는 바로 마우스 오버하면 계산된 값이 보인다.
참고 2
<canvas>에서는 지원 안된다고 함
지원 현황
Chrome 111 (Release date: 2023-03-07)
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
사람의 시각적 밝기/채도 인식과 거의 1:1로 대응 → 자연스러운 그라데이션
색상 왜곡이 적음
2. sRGB
모든 브라우저/모니터에서 안정적
계산 및 예측 가능
비추천
1. HSL
섞을 때 밝기/채도 왜곡 심함
예측 불가 색상 생성됨
2. RGB
섞을 때 회색빛이 끼는 결과가 많음
고채도 색을 섞으면 탁해짐
보간 방법의 색공간에 따라서 나타낼 수 있는 색상에 차이도 있으므로.. 사용시 잘 선택해야할 듯.
