혼합 모드

CSS 팟캐스트 - 024: 혼합 모드

Duotone은 사진을 위해 널리 사용되는 색상 처리법으로, 이미지를 두 가지 대조되는 색상으로만 만든 것처럼 보이게 합니다. 하나는 밝은톤용이고 다른 하나는 저조도입니다. 그런데 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

background-blend-mode

분리 가능한 혼합 모드

일반

이는 기본 혼합 모드이며 요소가 다른 요소와 블렌딩되는 방식에 관해서는 아무것도 변경하지 않습니다.

곱하기

multiply 혼합 모드는 여러 개의 투명도를 서로 쌓는 것과 같습니다. 흰색 픽셀은 투명하게, 검은색 픽셀은 검은색으로 표시됩니다. 그 사이의 값은 광도 (밝은) 값을 곱합니다. 즉, 빛이 훨씬 더 밝거나 어두워지고 결과도 어두워지는 경우가 많습니다.

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

선택

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

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

오버레이

이 혼합 모드(overlay)는 multiply와 screen를 결합합니다. 기본 어두운 색상은 어두워지고 기본 밝은 색상은 밝아집니다. 50% 회색과 같은 중간 범위의 색상은 영향을 받지 않습니다.

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

어둡게

darken 혼합 모드는 소스 이미지와 배경 이미지의 어두운 색상 광도를 비교하고 두 가지 중 가장 어두운 색상을 선택합니다. 이는 각 색상 채널의 광도 (예: multiply 및 screen) 대신 RGB 값을 비교하는 방식으로 이루어집니다. darken 및 lighten를 사용하면 이 비교 프로세스에서 새 색상 값이 생성되는 경우가 많습니다.

.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

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

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

채도

이는 hue처럼 작동하지만 saturation를 혼합 모드로 사용하면 소스 색상의 채도가 배경화면 색상의 색조와 광도에 적용됩니다.

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

색상

color 혼합 모드는 소스 색상의 색조와 채도와 배경 색상의 광도를 사용하여 색상을 만듭니다.

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

밝기

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

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

isolation 속성

isolation 속성의 값을 isolate로 설정하면 새 스택 컨텍스트가 생성되어 배경화면 레이어와 블렌딩되지 않습니다. Z-색인 모듈에서 알아본 것처럼 새 스택 컨텍스트를 생성하면 해당 레이어가 기본 레이어가 됩니다. 즉, 상위 수준 혼합 모드가 더 이상 적용되지 않지만 isolation: isolate가 설정된 요소 내부의 요소는 여전히 블렌딩할 수 있습니다.

background-blend-mode에서는 작동하지 않습니다. 백그라운드 속성이 이미 격리되었기 때문입니다.

이해도 테스트

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