색상 피커 (스포이드)

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

HEX
RGB
HSL

최근 선택한 색상

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

사용 팁

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

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

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

이용 가이드

  1. "색상 선택" 버튼을 클릭하면 스포이드가 활성화됩니다
  2. 화면 어디서든 원하는 색상 위에 마우스 커서를 놓습니다
  3. 클릭하면 해당 위치의 색상이 추출됩니다
  4. HEX, RGB, HSL 중 원하는 형식의 복사 버튼을 클릭합니다
  5. ESC 키를 누르면 스포이드를 취소할 수 있습니다

핵심 기능

  • 화면 어디서든 클릭 한 번으로 색상 추출
  • 브라우저 바깥 영역(다른 앱)의 색상도 추출 가능
  • HEX, RGB, HSL 세 가지 형식으로 색상 코드 표시
  • 클릭 한 번으로 색상 코드 클립보드 복사
  • 최근 추출한 색상 히스토리 보관
  • 추출한 색상의 실시간 미리보기

이런 상황에서 유용해요

  • 웹사이트에서 마음에 드는 색상을 추출해 자신의 프로젝트에 적용
  • 디자인 시안의 색상 코드를 빠르게 확인하여 CSS에 입력
  • 경쟁사 웹사이트나 앱의 브랜드 색상 분석
  • 이미지나 사진에서 특정 색상의 정확한 값 추출
  • 프레젠테이션 디자인 시 일관된 색상 테마 유지
  • SNS 콘텐츠 제작 시 트렌디한 색상 참고

궁금한 점 모음

Q: 어떤 브라우저에서 사용할 수 있나요?

Chrome 95 이상, Edge 95 이상에서 사용 가능합니다. Safari와 Firefox는 아직 EyeDropper API를 지원하지 않으며, 향후 지원 여부는 미정입니다.

Q: 브라우저 바깥에서도 색상을 추출할 수 있나요?

네. 스포이드가 활성화되면 브라우저 창 바깥의 데스크톱, 다른 앱 화면에서도 색상을 추출할 수 있습니다. Figma, Photoshop, 파일 탐색기 등 어디서든 가능합니다.

Q: 추출한 색상이 원본과 약간 다르게 보여요

모니터의 색상 프로필, 브라우저 렌더링 엔진, 색 공간 변환 등에 의해 미세한 차이가 발생할 수 있습니다. 정확한 색상이 필요하면 원본 디자인 파일의 색상 코드를 직접 확인하는 것이 좋습니다.

Q: HEX, RGB, HSL의 차이는 무엇인가요?

HEX는 16진수로 표현한 색상(#FF5733), RGB는 빨강/초록/파랑의 0-255 값(rgb(255,87,51)), HSL은 색상/채도/밝기로 표현(hsl(11,100%,60%))합니다. CSS에서는 세 가지 모두 사용 가능하며, 상황에 맞게 선택하면 됩니다.

Q: 색상 히스토리는 몇 개까지 저장되나요?

최근 추출한 색상들이 히스토리에 표시됩니다. 이전에 추출한 색상을 다시 선택하면 해당 색상의 코드를 바로 복사할 수 있어 작업 효율을 높여줍니다.

Q: 스포이드를 중간에 취소할 수 있나요?

네, ESC 키를 누르면 스포이드 모드가 즉시 취소됩니다. 원하지 않는 색상을 클릭하기 전에 취소할 수 있습니다.

Q: 특정 색상의 보색이나 유사색을 알 수 있나요?

이 도구는 색상 추출에 특화되어 있습니다. 보색이나 유사색을 찾으려면 Toolneat의 색상 변환기나 색상 팔레트 추출 도구를 함께 활용하면 편리합니다.

Q: 모바일에서도 사용할 수 있나요?

EyeDropper API는 현재 데스크톱 브라우저에서만 지원됩니다. 모바일 브라우저에서는 스포이드 기능을 사용할 수 없으며, 데스크톱 Chrome이나 Edge에서 이용해 주세요.

Q: 추출한 색상 코드를 자동으로 복사할 수 있나요?

색상이 추출되면 HEX, RGB, HSL 코드가 모두 표시됩니다. 원하는 형식 옆의 복사 버튼을 클릭하면 클립보드에 즉시 복사됩니다.

Q: 개인 정보가 수집되나요?

아닙니다. 색상 추출과 모든 처리는 브라우저에서만 이루어지며, 추출한 색상이나 화면 정보가 서버로 전송되지 않습니다.

알아두면 좋은 점

  • EyeDropper API는 Chrome 95+, Edge 95+에서만 지원됩니다. Safari와 Firefox는 현재 미지원입니다
  • 디스플레이 색상 프로필(sRGB, DCI-P3 등)에 따라 추출된 색상이 미세하게 달라질 수 있습니다
  • 고해상도(Retina) 디스플레이에서는 픽셀 레벨의 색상이 스케일링에 영향을 받을 수 있습니다
  • 그라데이션이 적용된 영역에서는 클릭 위치에 따라 색상이 달라지므로 정확한 위치에서 클릭하세요
  • 모든 처리는 브라우저에서 이루어지며 서버로 데이터가 전송되지 않습니다