← Back

Duotone

The power of two colors creating dramatic visual impact.

Explore

Two-Color Magic

Color Duality

Two contrasting colors create powerful visual harmony.

Image Filters

Transform photos into stylized duotone artwork.

Bold Impact

Simplicity creates memorable, striking designs.

Simplicity in Duality

Duotone reduces complexity to create bold, memorable visuals that stand out.

DUO

Create Duotone

Start

AI 프롬프트 예제

Claude/Cursor를 사용하여 Duotone 스타일의 컴포넌트를 생성할 때 참고하세요.

요구사항

  • 정확히 2가지 색상만 사용
  • 색상 간 그라데이션
  • 이미지 필터 효과 (mix-blend-mode)
  • 대비되는 색상 조합
  • 강렬한 비주얼 임팩트
  • 단순하지만 드라마틱한 효과

제약조건

  • CSS filter 또는 mix-blend-mode 활용
  • 반응형 디자인 적용
  • 접근성 고려 (충분한 대비)
  • 이미지 최적화
  • 그라데이션 부드러운 전환
  • 텍스트 가독성 유지

예상 결과

  • 2가지 색상의 조화로운 조합
  • 강렬하고 독특한 비주얼
  • 스타일리시한 이미지 효과
  • 브랜드 아이덴티티 강화
  • 현대적이고 세련된 느낌
  • 기억에 남는 디자인

프롬프트 템플릿

Duotone 스타일의 이미지 카드 컴포넌트를 만들어줘.

요구사항:
- 정확히 2가지 색상만 사용
- 이미지에 duotone 필터 적용
- CSS filter 또는 mix-blend-mode 활용
- 대비되는 색상 조합 (예: 파랑-핑크, 오렌지-청록)
- 그라데이션 오버레이
- 텍스트 오버레이 (흰색 또는 검정)

스타일 가이드:
- filter: grayscale(100%) + 색상 오버레이
- background: linear-gradient(색상1, 색상2)
- mix-blend-mode: multiply 또는 screen
- 색상 조합 예:
  * 파랑 #0066ff + 핑크 #ff0066
  * 청록 #00ffcc + 오렌지 #ff6600
  * 보라 #6600ff + 노랑 #ffff00

디자인:
- 이미지 카드
- duotone 필터 적용
- 텍스트 오버레이
- 호버 시 색상 변화 (선택)

반응형 디자인 필수, 접근성 고려해줘.