듀오톤

Duotone

사진을 흑백으로 뭉갠 뒤 어두운 영역과 밝은 영역을 서로 다른 두 색으로 물들이는 기법. Spotify 커버아트에서 자주 봅니다.

다른 이름: Two-tone imageSpotify duotone

···

html

<div class="wrap"><div class="photo"></div><div class="tone"></div></div>

css

.wrap{position:relative;width:min(300px,85%);aspect-ratio:4/3;border-radius:16px;overflow:hidden}
.photo{position:absolute;inset:0;
  background:radial-gradient(circle at 50% 32%,#fff 0 16%,#999 17% 42%,#333 43% 100%);
  filter:grayscale(1) contrast(1.1)}
.tone{position:absolute;inset:0;mix-blend-mode:color;background:linear-gradient(160deg,#ff5c8a,#5b5bf7);
  filter:hue-rotate(0deg);animation:hue 6s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}

filter: grayscale(1) 로 명암 정보만 남긴 뒤, 그 위에 두 색으로 된 gradient 를 mix-blend-mode: color 로 겹칩니다. 어두운 부분은 그라데이션의 앞쪽 색에, 밝은 부분은 뒤쪽 색에 가깝게 물듭니다.

SVG feColorMatrix + feComponentTransfer 로 더 정교하게 만들 수도 있지만, CSS filter + blend-mode 조합만으로도 실무에서 충분한 근사치가 나옵니다.

언제 쓰나

앨범 커버, 이벤트 포스터, 여러 팀 사진에 통일감을 줄 때 씁니다. 원본 색이 중요한 제품 사진에는 쓰지 않습니다.