색상 피커 (스포이드)

화면 어디서나 색상을 추출합니다. 브라우저 바깥의 다른 앱(Slack, Figma 등)에서도 색상을 추출할 수 있습니다.

HEX
RGB
HSL

최근 선택한 색상

아직 선택한 색상이 없습니다

사용 팁

  • 버튼을 클릭하면 스포이드가 활성화됩니다
  • 브라우저 바깥의 앱에서도 색상을 추출할 수 있습니다
  • ESC 키를 누르면 취소됩니다

색상 피커(스포이드)란?

색상 피커(스포이드)는 화면의 어떤 위치에서든 원하는 색상을 정확하게 추출할 수 있는 도구입니다. 브라우저의 EyeDropper API를 활용하여 웹 페이지는 물론, Figma, Photoshop, Slack 등 다른 앱에서도 색상을 가져올 수 있습니다. 디자이너와 개발자가 작업 중 특정 색상을 빠르게 확인하고 복사하는 데 유용합니다.

작동 원리

색상 추출기는 업로드된 이미지를 Canvas에 렌더링하고, 클릭 위치의 픽셀 데이터를 getImageData()로 읽어 RGB 값을 추출합니다. 추출된 RGB 값을 HEX, HSL 등 다양한 형식으로 변환하여 표시합니다. 이미지 전체의 주요 색상을 자동 추출할 때는 K-means 클러스터링 또는 중앙값 분할(Median Cut) 알고리즘을 사용합니다.

관련 블로그 글