CSS 블렌드 모드 시뮬레이터

사용법

1. Backdrop(밑에 깔리는 색) 을 선택합니다.
2. Source(위에 블렌딩될 색) 를 선택합니다.
3. 그리드를 살펴보세요 ─ 각 모드의 실시간 미리보기와 계산된 16 진수 결과가 표시됩니다.
4. 타일을 클릭하면 `mix-blend-mode: <모드>;` 가 클립보드에 복사됩니다.
5. 프리셋(Red on Blue·Photo Tinting·Sticker·Sunset 등) 으로 대표적인 케이스를 확인할 수 있습니다.

자주 묻는 질문

overlay 와 hard-light 의 차이는?

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

hue/saturation/color/luminosity 가 왜 다른 모드들과 다르게 보이나요?

이 네 가지는 '비분리(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 에 감마 인코딩 방식을 씁니다.

background-blend-mode 는 어떻게 다른가요?

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

관련 도구