업로드한 사진에서 어울리는 2~5색 그라데이션을 자동으로 추출합니다. Instagram 톤매칭, 웹사이트 배경, 랜딩 페이지 헤더에 바로 활용하세요.

그라데이션 추출 사용법

  1. 이미지를 클릭·드래그로 업로드합니다.
  2. 색상 수(2~5)·그라데이션 방향·스무딩을 선택합니다.
  3. 추출된 그라데이션이 즉시 미리보기에 표시됩니다.
  4. CSS 코드 복사 또는 PNG 다운로드로 활용합니다.
  5. 웹사이트 배경·SNS 카드·랜딩 헤더에 적용합니다.

주요 기능

  • K-Means 클러스터링으로 이미지 대표 색상 자동 추출
  • 2색·3색·4색·5색 그라데이션 옵션
  • 5가지 방향 (가로·세로·대각·역대각·원형)
  • 스무딩 강도 3단계로 자연스러움 조절
  • 완전 로컬 처리 (이미지 서버 전송 없음)

활용 예시

  • Instagram 피드 — 사진과 어울리는 배경 그라데이션으로 통일감
  • 랜딩 페이지 헤더 — 제품 사진에서 추출한 톤으로 배경 구성
  • 발표 자료 — 사진 슬라이드의 배경색 자동 매칭
  • 웹사이트 메인 비주얼 — 사진+그라데이션 오버레이
  • 유튜브 썸네일 배경 — 영상 분위기와 일관된 색

K-Means 클러스터링이란?

이미지의 모든 픽셀을 RGB 3차원 공간에 점으로 배치한 뒤, 지정한 개수(K)의 중심점을 두고 가까운 픽셀끼리 그룹을 만드는 알고리즘입니다. 각 그룹의 중심이 대표 색상이 되며, 본 도구는 이 색상들을 그라데이션으로 자연스럽게 연결합니다. 같은 사진이라도 K값에 따라 결과가 달라지므로 2~5 사이에서 가장 마음에 드는 조합을 선택하세요.

자주 묻는 질문

이미지가 서버에 저장되나요?

아니요. 모든 색상 추출·그라데이션 생성은 브라우저 Canvas API에서 이루어지며 외부 전송이 없습니다.

왜 매번 결과가 약간씩 다를까요?

K-Means는 초기 중심점을 랜덤하게 잡기 때문에 같은 이미지라도 미세하게 다른 결과가 나올 수 있습니다. 새로고침 후 다시 추출하면 더 만족스러운 조합이 나올 수 있습니다.

추출한 색이 너무 비슷해요.

전체적으로 단조로운 이미지(노을, 단색 배경 등)는 색이 비슷하게 나옵니다. 대비가 강한 이미지(꽃·도시·풍경)를 시도해 보세요.

상업적으로 사용해도 되나요?

네. 색상 코드 자체는 저작권 대상이 아니며, 본인이 권리를 가진 이미지에서 추출했다면 결과물을 자유롭게 사용할 수 있습니다.