이미지 컬러 피커

브라우저가 이미지 디코드 시 색 프로파일(sRGB 변환)을 적용할 수 있습니다. 픽셀 단위로 정확하게 보려면 원본을 순수 sRGB로 저장하고 색 관리된 포맷을 피하세요.

됩니다. 다만 완전히 투명한 픽셀은 뒤에 보이는 색이 아니라 #000000으로 집힙니다. 피커는 캔버스의 원시 비트맵을 읽는데, 이미지가 칠하지 않은 픽셀은 (0, 0, 0, 0)이고 이미지 뒤의 페이지는 그 데이터에 포함되지 않습니다. 투명한 부분 아래에 색을 저장해 둔 PNG조차 그 색을 잃습니다. 알파가 0이면 합성 과정에서 RGB가 버려지기 때문입니다. 원하는 배경 위로 이미지를 평탄화한 뒤에 집으세요.

아니요. Canvas getImageData를 로컬에서 사용합니다. 외부 도메인 이미지는 보안상 막힐 수 있지만, 기기에서 업로드한 파일은 항상 동일 출처입니다.

팔레트가 읽기 좋게 유지되도록 한 소프트 리밋입니다. 필요한 만큼 뽑아 복사한 뒤 지우고 다시 시작하면 됩니다.

평균을 내지 않기 때문입니다. 캔버스는 이미지의 원본 크기로 잡히고, 클릭 위치는 표시된 크기에서 원본 픽셀로 환산되어 정확히 한 픽셀만 읽힙니다. 큰 사진이 작게 표시되면 화면 픽셀 하나가 이미지 픽셀 여러 개를 덮으므로, 화면에서 한 픽셀만 움직여도 꽤 다른 곳에 떨어질 수 있습니다. JPEG 아티팩트와 카메라 노이즈가 이를 더 키웁니다. 영역을 대표하는 색이 필요하면 여러 번 집어서 평균을 내거나, 이미지를 먼저 흐리게 만든 뒤 집으세요.

브라우저는 이미지를 디코딩할 때 내장된 색 프로파일을 적용합니다. 그래서 Display P3나 Adobe RGB로 태그된 파일은 캔버스에 닿기도 전에 sRGB로 변환되지만, 디자인 도구는 태그 없는 원본 수치를 그대로 보여 줄 수 있습니다. 여기서 집힌 값은 브라우저가 실제로 표시할 색이고, 웹 작업에서는 대개 그쪽이 필요한 값입니다. 파일 자체의 수치가 필요하다면 업로드 전에 프로파일을 제거하거나 sRGB로 변환하세요.