colorize 이미지 색상 선택기 star

색상 선택은 어떻게 작동하나요

사진을 업로드하면 브라우저 안의 HTML5 <canvas> 요소에 그려집니다. 이미지의 어느 지점을 클릭하든 캔버스 API 함수인 getImageData()가 바로 그 정확한 픽셀 좌표에서 호출되며, 해당 픽셀에 저장된 원본 빨강, 초록, 파랑, 알파 채널 값을 반환합니다 — 이는 스크린샷에서 샘플링한 근사치나 추정값이 아니라, 브라우저가 이미지를 그릴 때 실제로 사용하는 것과 동일한 숫자 데이터입니다. 이렇게 얻은 원본 값은 즉시 hex(예: #3a7bd5), RGB(예: rgb(58, 123, 213)), HSL(색상, 채도, 명도)로 변환되어 동시에 표시되므로, 어떤 디자인 도구가 필요로 하는 형식이든 바로 복사할 수 있습니다.

이런 방식으로 처리되는 모든 이미지는 디지털 사진, 화면, 카메라의 대다수가 사용하는 표준 색 공간인 sRGB로 디코딩되어 읽힙니다. 이미지가 명시적으로 다른 색상 프로필을 포함하지 않는 한 sRGB가 기본값으로 가정되며, 이는 사실상 모든 소비자 사진과 웹 이미지를 포괄합니다.

알아두어야 할 사항

• 어디에도 업로드되지 않습니다 — 이미지를 그리는 과정부터 픽셀 데이터를 읽는 과정까지 모든 처리가 브라우저 메모리 안에서 로컬로 이루어집니다. 어떤 서버도 사진을 받지 않습니다.
• 읽어들인 값은 추정이 아니라 정확합니다 — getImageData()가 저장된 그대로의 픽셀 값을 반환하므로, 정확도는 오직 이미지 자체의 품질과 클릭한 정확한 위치에만 좌우되며, 화면 밝기, 대비, 보정 상태에는 영향받지 않습니다.
• 압축은 실제 색상을 약간 이동시킬 수 있습니다 — JPEG 압축은 작은 픽셀 블록 단위로 색을 평균화하므로, 강하게 압축된 사진은 원본 장면의 색상과 약간 다른 값을 반환할 수 있습니다. PNG를 비롯한 무손실 형식은 캡처된 값을 정확히 그대로 보존합니다.
• 선택한 색상 하나하나가 이미지 아래에 누적 팔레트를 만듭니다 — 덕분에 하늘, 셔츠, 벽 등 한 장의 사진에서 여러 지점을 샘플링해 한 번의 세션에서 작은 통일감 있는 색상 세트를 내보낼 수 있습니다.