혼합 모드

듀오톤은 사진에 많이 사용되는 색상 처리 방법으로, 이미지가 하이라이트와 어두운 부분에 사용된 두 가지 대비되는 색상으로만 구성된 것처럼 보이게 합니다. CSS로 어떻게 하면 될까요?

혼합 모드와 앞서 배운 다른 기법(예: 필터, 의사 요소)을 사용하면 이 효과를 모든 이미지에 적용할 수 있습니다.

블렌딩 모드란 무엇인가요?

혼합 모드는 일반적으로 Photoshop과 같은 디자인 도구에서 두 개 이상의 레이어의 색상을 혼합하여 구성 효과를 만드는 데 사용됩니다. 색상이 혼합되는 방식을 변경하면 매우 흥미로운 시각 효과를 얻을 수 있습니다. 흰색 배경이 있는 이미지를 분리하여 투명한 배경처럼 보이게 하는 등 혼합 모드를 유틸리티로 사용할 수도 있습니다.

CSS에서 mix-blend-mode 또는 background-blend-mode 속성을 사용하여 디자인 도구에서 사용할 수 있는 대부분의 혼합 모드를 사용할 수 있습니다. mix-blend-mode는 전체 요소에 혼합을 적용하고 background-blend-mode는 요소의 배경에 혼합을 적용합니다.

요소에 여러 배경이 있고 모두 서로 혼합되도록 하려면 background-blend-mode을 사용합니다.

mix-blend-mode는 가상 요소를 비롯한 전체 요소에 영향을 미칩니다. 한 가지 사용 사례는 가상 요소를 통해 요소에 색상 레이어가 적용된 듀오톤 이미지의 초기 예입니다.

혼합 모드는 분리 가능 모드와 분리 불가능 모드의 두 가지 카테고리로 나뉩니다. 분리 가능한 혼합 모드는 RGB와 같은 각 색상 구성요소를 개별적으로 고려합니다. 분리 불가능한 혼합 모드는 모든 색상 구성요소를 동일하게 고려합니다.

브라우저 호환성

mix-blend-mode

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 32.
  • Safari: 8.

Source

background-blend-mode

Browser Support

  • Chrome: 35.
  • Edge: 79.
  • Firefox: 30.
  • Safari: 8.

Source

분리 가능한 블렌딩 모드

보통

이 모드는 기본 블렌딩 모드이며 요소가 다른 요소와 혼합되는 방식을 변경하지 않습니다.

곱하기

multiply 혼합 모드는 여러 투명 필름을 서로 겹쳐 놓는 것과 같습니다. 흰색 픽셀은 투명하게, 검은색 픽셀은 검은색으로 표시됩니다. 그 사이의 값은 밝기 (빛) 값을 곱합니다. 즉, 밝은 부분은 훨씬 밝아지고 어두운 부분은 더 어두워지며, 대부분 더 어두운 결과를 얻게 됩니다.

.my-element {
  mix-blend-mode: multiply;
}

화면

screen를 사용하면 밝기 값이 곱해집니다. 이는 multiply와는 반대 효과이며 대부분 더 밝은 결과를 생성합니다.

.my-element {
  mix-blend-mode: screen;
}

오버레이

이 블렌딩 모드(overlay)는 multiplyscreen를 결합합니다. 어두운 기본 색상은 더 어두워지고 밝은 기본 색상은 더 밝아집니다. 50% 회색과 같은 중간 색상은 영향을 받지 않습니다.

.my-element {
  mix-blend-mode: overlay;
}

어둡게

darken 블렌딩 모드는 소스 이미지와 배경 이미지의 어두운 색상 밝기를 비교하고 두 이미지 중 가장 어두운 이미지를 선택합니다. 각 색상 채널의 밝기 대신 rgb 값을 비교하여 이를 수행합니다 (multiplyscreen가 하는 것처럼). darkenlighten를 사용하면 이 비교 프로세스에서 새 색상 값이 생성되는 경우가 많습니다.

.my-element {
  mix-blend-mode: darken;
}

밝게

lighten를 사용하면 darken과 정확히 반대의 작업이 실행됩니다.

.my-element {
  mix-blend-mode: lighten;
}

색상 닷지

color-dodge를 사용하면 배경 색상이 밝아져 소스 색상이 반영됩니다. 순수한 검은색 색상에는 이 모드의 효과가 적용되지 않습니다.

.my-element {
  mix-blend-mode: color-dodge;
}

색상 번

color-burn 혼합 모드는 multiply 혼합 모드와 매우 유사하지만 대비가 증가하여 중간 색조가 더 포화되고 밝은 부분이 줄어듭니다.

.my-element {
  mix-blend-mode: color-burn;
}

하드 라이트

hard-light를 사용하면 선명한 대비가 만들어집니다. 이 혼합 모드는 밝기 값을 제외하거나 곱합니다. 픽셀 값이 50% 회색보다 밝으면 이미지가 화면 보호 모드인 것처럼 밝아집니다. 더 어두우면 곱해집니다.

.my-element {
  mix-blend-mode: hard-light;
}

소프트 라이트

soft-light 혼합 모드는 overlay의 완화된 버전입니다. 대비가 낮은 경우에도 거의 동일한 방식으로 작동합니다.

.my-element {
  mix-blend-mode: soft-light;
}

차이

difference의 작동 방식을 파악하는 좋은 방법은 사진 현상액의 작동 방식과 비슷합니다. difference 혼합 모드는 각 픽셀의 차이 값을 사용하여 밝은 색상을 반전시킵니다. 색상 값이 동일하면 검은색이 됩니다. 값의 차이가 반전됩니다.

.my-element {
  mix-blend-mode: difference;
}

제외 게재위치 및 카테고리

exclusion 사용은 difference와 매우 유사하지만 동일한 픽셀에 검은색을 반환하는 대신 50% 회색을 반환하므로 대비가 낮은 더 부드러운 출력이 생성됩니다.

.my-element {
  mix-blend-mode: exclusion;
}

분리 불가능한 블렌딩 모드

이러한 혼합 모드는 HSL 색상 구성요소와 같이 생각할 수 있습니다. 각 레이어는 활성 레이어에서 특정 구성요소 값을 가져와 다른 구성요소 값과 혼합합니다.

색조

hue 블렌딩 모드는 소스 색상의 색조를 사용하여 배경 색상의 채도와 광도에 적용합니다.

.my-element {
  mix-blend-mode: hue;
}

채도

이는 hue와 같이 작동하지만 블렌딩 모드로 saturation를 사용하면 소스 색상의 채도가 배경 색상의 색조와 광도에 적용됩니다.

.my-element {
  mix-blend-mode: saturation;
}

색상

color 블렌딩 모드는 소스 색상의 색조와 채도, 배경 색상의 광도에서 색상을 만듭니다.

.my-element {
  mix-blend-mode: color;
}

밝기

마지막으로 luminositycolor의 역수입니다. 소스 색상의 광도와 배경 색상의 색조 및 채도로 색상을 만듭니다.

.my-element {
  mix-blend-mode: luminosity;
}

isolation 속성

Browser Support

  • Chrome: 41.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 8.

Source

isolation 속성을 isolate 값으로 설정하면 새로운 스택 컨텍스트가 생성되어 배경 레이어와 혼합되지 않습니다. z-index 모듈에서 배웠듯이 새 스택 컨텍스트를 만들면 해당 레이어가 기본 레이어가 됩니다. 즉, 상위 수준 블렌딩 모드는 더 이상 적용되지 않지만 isolation: isolate가 설정된 요소 내의 요소는 계속 혼합될 수 있습니다.

배경 속성이 이미 격리되어 있으므로 background-blend-mode에는 작동하지 않습니다.

이해도 확인

혼합 모드에 대한 지식 테스트

다음 중 CSS 혼합 모드는 무엇인가요?

밝게
차이
곱하기
오버레이
Dullen
밝게

다양한 방식으로 여러 색상을 혼합하려면 어떤 스타일의 혼합 모드가 필요할까요?

분리 가능
분리 불가