CSS 블렌드 모드 시뮬레이터

overlay는 BACKDROP의 밝기로 공식을 선택합니다 ─ 어두운 배경 → multiply, 밝은 배경 → screen. hard-light는 SOURCE의 밝기로 결정합니다 ─ 어두운 source → multiply, 밝은 source → screen. 즉 overlay(A, B) == hard-light(B, A) 입니다. '아래 깔린 색에 따라 대비를 강조' 하고 싶으면 overlay, '칠하는 색에 따라 뚫고 나오게' 하고 싶으면 hard-light를 쓰세요.

이 네 가지는 '비분리(non-separable)' 모드입니다 ─ 채널별 계산이 불가능합니다. W3C 사양은 세 가지 헬퍼로 정의합니다: lum(rgb) = 0.3R + 0.59G + 0.11B(휘도), sat(rgb) = max − min, 그리고 목표 값을 유지하며 클리핑하는 setLum/setSat. 예를 들어 'color' 모드는 source의 hue+saturation과 backdrop의 휘도를 결합합니다. 흑백 사진에 색을 입힐 때 mode: color를 쓰는 이유이기도 합니다.

네 ─ 미리보기는 실제 CSS mix-blend-mode 를 사용하므로 브라우저가 진짜 컴포지팅을 합니다. 표시되는 16 진수는 브라우저와 동일한 W3C 공식을 JavaScript로 구현한 결과이므로 채널당 ±1 정도의 반올림 오차 내에서 일치합니다. 차이가 보인다면 브라우저는 sRGB 선형 광공간에서, 이 도구는 감마 인코딩된 sRGB에서 블렌딩하기 때문일 수 있습니다 ─ W3C 사양은 둘 다 허용하며 대부분의 브라우저는 mix-blend-mode에 감마 인코딩 방식을 씁니다.

공식은 같지만 적용 대상이 다릅니다: mix-blend-mode는 요소를 그 뒤의 배경과 블렌딩하고, background-blend-mode는 한 요소의 여러 배경 레이어를 서로 블렌딩합니다. 이 도구의 출력값은 둘 다에 적용 가능합니다 ─ 모드 이름만 해당 프로퍼티에 붙여 넣으세요.