Image Color Picker: 사진에서 색상 추출

Image Color Picker란?

곧 출시 예정: Image Color Picker는 이미지의 픽셀을 직접 클릭하여 정확한 색상 값을 추출할 수 있는 브라우저 기반 도구입니다. 사진을 업로드하고 아무 영역에나 커서를 올려 실시간 돋보기 오버레이에서 색상을 미리 보고, 클릭하여 해당 지점의 정확한 HEX, RGB, HSL, CMYK 값을 캡처하세요. 브라우저 개발자 도구나 데스크톱 스포이트와 달리, 이 도구는 업로드된 이미지 파일을 처리하고, 세션 중 픽한 색상으로 팔레트를 구성하며, 어떤 형식이든 한 번의 클릭으로 클립보드에 복사합니다. 모든 것이 브라우저에서 실행됩니다. 서버 업로드나 계정이 필요하지 않습니다.

주요 기능

• 이미지에서 색상 클릭 선택: 불러온 이미지 위의 마우스 클릭마다 디스플레이 영역에 맞게 이미지가 어떻게 크기 조정되었는지를 고려하여 해당 위치의 정확한 픽셀 색상을 캡처합니다.
• 정밀한 줌 돋보기: 이미지 위에서 커서를 이동하면 60×60px 플로팅 미리보기 정사각형이 위치를 추적하며, 커서 아래 색상과 HEX 값을 표시하여 클릭 전에 무엇을 선택할지 정확히 알 수 있습니다.
• HEX, RGB, HSL, CMYK 값 추출: 선택한 각 색상이 네 가지 형식 모두로 동시에 표시됩니다. 컴포넌트는 공유 색상 유틸리티 라이브러리의 rgbToHex, rgbToHsl, rgbToCmyk 변환 함수를 사용합니다.
• 픽으로 색상 팔레트 구성: 도구는 세션 중 선택한 마지막 10개의 고유한 색상을 유지합니다. 중복 HEX 값은 자동으로 무시됩니다. 같은 색상을 두 번 클릭해도 두 번째 항목이 추가되지 않습니다.
• 색상 기록 추적: 클릭한 팔레트 스와치를 통해 이전에 선택한 색상으로 돌아가 다시 선택하지 않고도 네 가지 형식 값을 모두 다시 볼 수 있습니다.
• 원클릭 색상 복사: 현재 색상 패널의 각 형식 행에는 자체 복사 버튼이 있습니다. "Copy All Colors" 버튼은 전체 세션 팔레트를 HEX 값의 쉼표로 구분된 목록으로 내보냅니다.
• 100% 클라이언트사이드 처리: 이미지는 숨겨진 HTML5 Canvas 요소에 그려집니다. 모든 픽셀 읽기는 getImageData()를 로컬로 사용합니다. 어떤 데이터도 브라우저를 떠나지 않습니다.
• 모든 이미지 형식과 호환: 파일 입력이 accept="image/*"를 사용하므로 브라우저가 디코딩할 수 있는 모든 형식(JPEG, PNG, WebP, GIF, AVIF, SVG)을 지원합니다.

Image Color Picker 사용 방법

1단계: 이미지 업로드

곧 출시 예정: Image Color Picker를 열면 점선 드롭 영역이 있는 업로드 패널이 표시됩니다. 영역을 클릭하여 파일 선택기를 열거나 이미지 파일을 직접 끌어다 놓으세요. 이미지가 성공적으로 로드되면 도구에 "Image loaded" 토스트 알림이 표시되고 이전에 선택한 색상이 지워집니다.

2단계: 호버로 색상 미리보기

이미지가 나타나면 아무 영역에나 커서를 이동하세요. 60×60px 플로팅 색상 정사각형이 커서를 따라다니며, 검사 중인 픽셀이 가려지지 않도록 오른쪽 위로 약간 오프셋됩니다. 정사각형은 커서 아래의 실시간 색상으로 채워지고 대비 텍스트로 HEX 값을 표시합니다. 이 돋보기는 커서를 이미지 밖으로 이동하면 사라집니다.

3단계: 클릭하여 색상 캡처

이미지의 아무 지점이나 클릭하여 색상을 고정하세요. "Current Color" 패널이 이미지 아래에 나타납니다:

• 대비 텍스트로 HEX 값이 중앙에 표시된 큰 색상 스와치
• HEX, RGB, HSL, CMYK에 대한 네 개의 행. 각각 복사 버튼 포함

예를 들어, 사진의 중간 톤 하늘을 클릭하면 다음과 같은 결과가 나올 수 있습니다:

HEX:  #6fa8dc
RGB:  rgb(111, 168, 220)
HSL:  hsl(210, 59%, 65%)
CMYK: cmyk(50%, 24%, 0%, 14%)

4단계: 팔레트 구성

이미지의 다른 영역을 계속 클릭하세요. 선택하는 각 고유한 색상이 하단의 "Picked Palette" 패널에 스와치로 나타납니다. 스와치를 클릭하면 활성 현재 색상으로 다시 로드되고 모든 값을 다시 볼 수 있습니다. 팔레트는 세션당 최대 10개의 고유한 색상을 보유합니다.

5단계: 색상 복사

해당 행의 복사 버튼을 사용하여 단일 형식 값을 복사하세요. 전체 팔레트를 내보내려면 "Copy All Colors"를 클릭하세요. 이렇게 하면 모든 HEX 값이 쉼표로 구분된 문자열로 클립보드에 기록됩니다(예: #6fa8dc, #2d5f8e, #f4c842, #e8573a). 업로드 영역을 통해 언제든지 새 이미지를 로드할 수 있습니다. 팔레트는 자동으로 초기화됩니다.

실용적인 예시

로고에서 브랜드 색상 추출

회사 로고의 PNG 파일이 있고 CSS 스타일시트에 정확한 브랜드 색상이 필요합니다. 로고를 업로드하고, 기본 브랜드 색상에 커서를 올려 클릭하여 캡처하세요. 그런 다음 보조 및 강조 색상을 선택하세요. "Copy All Colors"를 사용하여 선택한 모든 16진수 값의 쉼표로 구분된 목록을 얻고, :root CSS 변수에 직접 붙여넣으세요.

사진에서 색상 팔레트 샘플링

제품 사진에 UI 디자인에 사용하고 싶은 자연스러운 색상 구성이 있습니다. 사진을 업로드하고 지배적인 색상을 체계적으로 클릭하세요. 배경 톤, 제품 하이라이트, 그림자 영역, 강조 디테일. 팔레트 패널에 최대 10개의 고유한 스와치가 쌓입니다. 완료되면 각 스와치를 클릭하여 숫자 색상 입력을 받는 디자인 도구에서 사용할 RGB 값을 가져오세요.

버그 보고서용 특정 픽셀 색상 식별

UI의 특정 버튼 상태에 잘못된 텍스트 색상이 있고 스크린샷이 있습니다. 스크린샷을 업로드하고, 버튼 텍스트에 커서를 올려 클릭하세요. HEX 값을 복사하여 예상 값과 함께 버그 보고서에 포함시키세요. 이렇게 하면 어떤 정확한 색상이 잘못 렌더링되고 있는지에 대한 모호함이 해소됩니다.

팁과 모범 사례

정밀도가 중요할 때는 고해상도 이미지를 사용하세요. 도구는 렌더링 크기 대 캔버스 크기에 기반한 배율을 사용하여 커서 위치를 실제 이미지 픽셀 좌표에 매핑하므로, 내보내기 전에 이미지 편집기에서 세부 사항을 확대하면 시각적 영역당 더 많은 주소 지정 가능한 픽셀을 얻을 수 있습니다.

돋보기는 클릭하기 전에 HEX 값을 표시합니다. 이를 사용하여 텍스트나 얇은 선에서 샘플링할 때 특히 중요한, 인접한 안티앨리어스 처리된 가장자리 픽셀이 아닌 정확히 올바른 픽셀에 있는지 확인하세요.

팔레트는 중복 HEX 값을 무시합니다. 단일 채널만 다른 두 개의 시각적으로 유사한 색상을 비교하려면 하나를 선택하고 값을 기록한 다음 다른 것을 선택하세요.

모든 팔레트 색상을 복사할 때 출력은 쉼표로 구분된 HEX 값입니다. 이를 직접 곧 출시 예정: Palette Generator 16진수 입력에 붙여넣어 추출한 색상의 하모니 변형을 탐색하세요.

일반적인 문제 및 문제 해결

파일 선택 후 "Load error" 토스트: 이미지를 읽은 후 디코딩에 실패했습니다. 이는 일반적으로 손상된 파일이나 브라우저가 파싱할 수 없는 형식(일부 TIFF 및 RAW 카메라 파일)에서 발생합니다. 이미지를 JPEG나 PNG로 변환하고 다시 시도하세요.

클릭해도 색상이 없음 / 돋보기가 나타나지 않음: 캔버스가 올바르게 초기화되지 않은 경우 발생합니다. 도구를 새로고침하고 이미지를 다시 업로드하세요. 이미지가 매우 클 경우(8000×8000픽셀 이상), 일부 브라우저는 캔버스 크기를 제한합니다. 업로드하기 전에 이미지 크기를 줄이세요.

선택한 모든 색상이 동일하게 보임: 균일한 영역(배경, 단색 채우기)을 클릭하고 있을 수 있습니다. 사진 편집기에서 이미지를 확대하여 더 많은 세부 사항이 있는 영역을 찾은 다음 해당 잘린 버전을 업로드하세요.

팔레트 스와치가 클릭에 반응하지 않음: 가장 최근에 선택한 10개의 고유한 색상만 유지됩니다. 이미 10개의 색상을 선택한 경우, 이후의 고유한 색상이 가장 오래된 항목을 대체합니다. 스와치를 클릭하면 항상 색상을 다시 로드할 수 있습니다. 팔레트가 반응하지 않는 것처럼 보이면, 클릭이 스와치와 스와치 사이의 간격이 아닌 스와치에 정확히 떨어졌는지 확인하세요.

드래그 앤 드롭이 작동하지 않음: 드롭 영역은 file.type.startsWith('image/')를 확인합니다. MIME 타입이 없거나 잘못된 타입의 파일은 자동으로 무시됩니다. 대안으로 클릭하여 탐색하는 방법을 사용하세요.

개인정보 보호 및 보안

Image Color Picker는 파일을 완전히 브라우저 내에서 처리합니다. 이미지를 업로드하면 FileReader API를 사용하여 데이터 URL로 읽혀지고 숨겨진 캔버스 요소에 그려집니다. 어떤 데이터도 서버로 전송되지 않습니다. 이미지는 절대 기기를 벗어나지 않습니다. 이 도구는 페이지가 로드된 후 인터넷 연결 없이 작동하므로 기밀 사진, 독점 디자인 자산, 내부 스크린샷에 안전하게 사용할 수 있습니다.

자주 묻는 질문

Image Color Picker는 무료인가요?

네, Image Color Picker는 사용 제한 없이 완전히 무료입니다. 사용하기 위해 계정, 구독 또는 결제가 필요하지 않습니다. 이 도구는 곧 출시 예정: Glyph Widgets에서 이용 가능하며 브라우저에서 직접 실행됩니다.

Image Color Picker는 오프라인에서 작동하나요?

네. 페이지가 로드된 후 모든 처리는 HTML5 Canvas API를 로컬로 사용합니다. 인터넷에서 연결을 끊어도 중단 없이 이미지에서 계속 색상을 선택할 수 있습니다. 이 도구는 일반적인 사용 중에 네트워크 요청을 하지 않습니다.

Image Color Picker에서 내 데이터는 안전한가요?

이미지는 FileReader와 getImageData()를 사용하여 완전히 클라이언트사이드에서 처리됩니다. 어떤 이미지 데이터도 서버에 업로드되지 않습니다. Glyph Widgets는 이 도구로 열린 파일의 내용에 접근할 수 없습니다.

도구는 어떤 색상 형식을 출력하나요?

도구는 선택한 각 색상에 대해 네 가지 형식을 출력합니다: HEX(예: #6fa8dc), RGB(예: rgb(111, 168, 220)), HSL(예: hsl(210, 59%, 65%)), CMYK(예: cmyk(50%, 24%, 0%, 14%)). 각 형식에는 자체 복사 버튼이 있습니다.

한 세션에서 몇 개의 색상을 선택할 수 있나요?

팔레트는 마지막으로 선택한 10개의 고유한 색상을 유지합니다. 중복 HEX 값은 다시 저장되지 않습니다. 같은 색상을 두 번 클릭해도 팔레트 수에 영향이 없습니다. 새 이미지를 로드하면 팔레트가 비워집니다.

어떤 이미지 형식이 지원되나요?

파일 입력은 accept="image/*" 속성을 사용하여 브라우저가 디코딩할 수 있는 모든 이미지 형식을 수락합니다. 실제로 JPEG, PNG, WebP, GIF, AVIF, SVG가 포함됩니다. 브라우저가 기본적으로 디코딩할 수 없는 RAW나 TIFF 같은 형식은 로드 오류를 발생시킵니다.

복사 후 같은 이미지에서 다시 색상을 선택할 수 있나요?

네. 이미지는 지우거나 새 이미지를 로드할 때까지 도구에 로드된 상태로 유지됩니다. 재업로드 없이 원하는 만큼 클릭하고, 팔레트를 구성하고, 색상을 복사할 수 있습니다.

색상 샘플링은 얼마나 정확한가요?

도구는 getImageData(x, y, 1, 1)을 사용하여 클릭한 위치에서 정확히 한 픽셀을 읽습니다. 표시된 이미지 크기와 실제 캔버스 크기 사이의 배율 매핑은 getBoundingClientRect()에서 계산되므로, 이미지가 기본 해상도와 다른 크기로 표시되더라도 해당 위치의 실제 픽셀 색상을 정확하게 반영합니다.

돋보기는 무엇을 위한 건가요?

플로팅 돋보기 미리보기는 선택을 확정하기 전에 커서 아래의 현재 색상을 보여줍니다. 이를 통해 지금 막 샘플링하려는 픽셀을 정확히 식별할 수 있습니다. 인접 픽셀이 크게 다른 색상 경계, 그라데이션, 안티앨리어스 처리된 가장자리를 따라 특히 유용합니다.

한 번의 동작으로 전체 팔레트를 내보낼 수 있나요?

"Copy All Colors"를 클릭하면 선택한 모든 HEX 값이 쉼표로 구분된 목록으로 클립보드에 기록됩니다. 그런 다음 디자인 도구, CSS 변수 또는 추가 색상 작업을 위해 곧 출시 예정: Palette Generator에 붙여넣을 수 있습니다.

관련 도구

• 곧 출시 예정: Palette Generator — 피커로 추출한 기본 색상에서 보색, 유사색, 삼색 등의 색상 하모니를 생성합니다.
• Color Converter — HEX, RGB, HSL, CMYK 및 기타 형식 사이를 완전한 정밀도로 변환합니다.
• Contrast Checker — 팔레트의 두 색상 사이의 WCAG 접근성 대비 비율을 확인합니다.
• Color Picker — 컬러 휠과 슬라이더를 사용하여 이미지 없이 직접 색상을 선택합니다.

지금 Image Color Picker를 사용해 보세요: 곧 출시 예정: Glyph Widgets Image Color Picker