듀오톤이 정확히 뭔가요?

사진의 밝기 정보만 남기고 어두운 부분은 첫 번째 색, 밝은 부분은 두 번째 색으로 바꿔 두 가지 톤으로 표현하는 색보정 기법입니다. 잡지·앨범 커버·웹 배너에서 통일감 있는 무드를 낼 때 자주 씁니다.

CSS 방식과 이미지 변환의 차이는 무엇인가요?

CSS 오버레이(grayscale + mix-blend-mode)는 원본 이미지를 그대로 두고 화면에서만 듀오톤처럼 보이게 합니다. 이미지 변환은 픽셀 값을 실제로 매핑해 저장까지 가능한 완성 파일을 만듭니다.

아니요. 이미지 읽기와 색 변환, 저장까지 모두 브라우저 안(캔버스)에서 처리되며 어떤 파일도 서버로 업로드되지 않습니다. 색 대비가 큰 두 톤을 고를수록 결과가 또렷하니 참고하세요.

두 색으로 듀오톤 그라디언트 맵을 만들고 CSS·이미지 미리보기 제공

도구를 불러오는 중…

🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.

어두운 색과 밝은 색 두 가지를 고르면 그 사이를 잇는 듀오톤 그라디언트 맵과 5단계 색 스케일을 만들어 줍니다. CSS 그라디언트 코드와 오버레이 방식 듀오톤 CSS를 복사할 수 있고, 사진을 올리면 브라우저 안에서 실제 듀오톤으로 변환해 미리 볼 수도 있습니다.

듀오톤이 정확히 뭔가요?: 사진의 밝기 정보만 남기고 어두운 부분은 첫 번째 색, 밝은 부분은 두 번째 색으로 바꿔 두 가지 톤으로 표현하는 색보정 기법입니다. 잡지·앨범 커버·웹 배너에서 통일감 있는 무드를 낼 때 자주 씁니다.
CSS 방식과 이미지 변환의 차이는 무엇인가요?: CSS 오버레이(grayscale + mix-blend-mode)는 원본 이미지를 그대로 두고 화면에서만 듀오톤처럼 보이게 합니다. 이미지 변환은 픽셀 값을 실제로 매핑해 저장까지 가능한 완성 파일을 만듭니다.
올린 사진이 서버로 전송되나요?: 아니요. 이미지 읽기와 색 변환, 저장까지 모두 브라우저 안(캔버스)에서 처리되며 어떤 파일도 서버로 업로드되지 않습니다. 색 대비가 큰 두 톤을 고를수록 결과가 또렷하니 참고하세요.